Question

我正在运行Axe plugin以确保我的应用程序的有效性和508可访问性，并且报告的某些违规行为过于严格，我不知道如何解决它们，因为它们是有效案例：< / p>

1。 “链接必须具有可识别的文本”

参考工具提示链接，该链接不应包含任何文本。它是图形，必须单独存在于页面上。一般来说，您如何处理非常普遍的无文本链接？

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

2。所有所有元素以及具有role = columnheader / rowheader的元素都必须具有它们描述的数据单元格

“我们不确定这是一个问题，因为：表格数据单元丢失或为空”

我有一个表，其中最后一列是“动作”，仅包含图形图标，没有文本；例如有一个“查看”按钮，“编辑”按钮和“删除”按钮。该列的结构为

<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的“空单元格”冲突。我会忽略吗？这是一种常见的情况，我不想一直受到它的打击。

Answer 1

如果图标，图形，按钮或链接执行某些操作，则需要为屏幕阅读器提供一些替代文本，以描述该链接采取的操作。

可以在链接中添加aria-label属性以描述它们的用途，或者在链接中放置带有描述性文本的span标签，该链接使用CSS可以隐藏，但屏幕阅读器可以访问。

此外，您在alt元素上使用i属性是不正确的。您应该使用aria-hidden="true"隐藏图标，并通过其他元素提供替代文本。

在表中具有空的td元素并没有什么本质上的错误，因为td元素具有单元格滚动，并且roll单元格的元素不需要可访问的名称。如果该单元格包含图标之类的内容，则需要确保提供了可访问的替代内容，或者如果该内容是严格装饰性的，则应采取适当的措施。

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

如果您有一个空的th元素，则可能会出现问题，因为该元素将具有rowheader或columnheader的角色，并且两者都需要一个可访问的名称。

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://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html#navigation-mechanisms-refs-techniques-head

隐藏可见用户的内容： https://webaim.org/techniques/css/invisiblecontent/

508 /（1）链接必须具有可识别文本的可访问性规则，（2）空表单元格（Axe插件）

1 个答案: