508/可访问性规则 (1) 链接必须有可识别的文本,(2) 空 Table 单元格(Axe 插件)

508/Accessibility Rules for (1) Links Must Have Discernible Text, (2) Empty Table Cells (Axe Plugin)

我是 运行 Axe plugin 以确保我的应用程序的有效性和 508 可访问性,并且报告的一些违规行为过于严格,我不知道如何解决它们,因为它们是有效的案例:

1. "Links must have discernible text"

参考工具提示 link,该提示不应包含任何文本。它是一个图形,必须单独存在于页面上。一般来说,您如何处理非常常见的无文本 link?

<a href="#" rel="tooltip" data-toggle="tooltip" title="" data-original-title="This is a tooltip icon by itself">

2。所有第 th 个元素和具有 role=columnheader/rowheader 的元素必须具有它们描述的数据单元格

“我们不确定这是一个问题,因为: Table 个数据单元格缺失或为空

我有一个 table,其中最后一列是 "Actions",它只包含图形图标,没有文本;例如有一个查看按钮、编辑按钮和删除按钮。该列的结构为

<table>
   <tr>
     <td>
        <a href="javascript:void(0)" title="Edit"> 
           <i class="fa fa-pencil" alt="Edit"></i>
        </a>
        <a href="javascript:void(0)" title="Delete">
           <i class="fa fa-trash" alt="Delete"></i>
        </a>
     </td>

正是缺少内部 HTML 文本触发了 Axe 的 "Empty Cell" 违规。我只是忽略它吗?这是一个常见的场景,我不想一直被它击中。

如果您的图标、图形、按钮或 link 执行某些操作,您需要提供一些替代屏幕阅读器的文本来描述 link 采取的操作。

向 link 添加一个 aria-label 属性来描述它们的用途,或者在 link 中放置一个带有描述性文本的 span 标签,使用 [=51] 隐藏起来=] 但屏幕阅读器可以访问。

此外,您对 i 元素的 alt 属性的使用不正确。您应该使用 aria-hidden="true" 隐藏图标,并通过另一个元素提供替代文本。

在 table 中有一个空的 td 元素本质上没有错,因为 td 元素有单元格的滚动,而滚动单元格的元素不需要可访问的名称。如果单元格包含图标等内容,您需要确保提供了可访问的替代方案,或者如果内容只是装饰性的,则采取适当的措施。

https://www.w3.org/TR/wai-aria-1.1/#cell

如果您有一个空的 th 元素,则会出现问题,因为它将扮演行标题或列标题的角色,并且两者都需要一个可访问的名称。

https://www.w3.org/TR/wai-aria-1.1/#columnheader

https://www.w3.org/TR/wai-aria-1.1/#rowheader

使用图标的有用信息: https://www.w3.org/WAI/GL/wiki/Icon_Font_with_an_On-Screen_Text_Alternative

描述link目的的信息:https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html#navigation-mechanisms-refs-techniques-head

对有视力的用户隐藏内容: https://webaim.org/techniques/css/invisiblecontent/