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
对有视力的用户隐藏内容:
https://webaim.org/techniques/css/invisiblecontent/
我是 运行 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
对有视力的用户隐藏内容: https://webaim.org/techniques/css/invisiblecontent/