Question

我正在使用tawdis在线工具来验证WCAG 2.0 AA级兼容性。当我使用下面的代码时，我遇到错误“Consecutive text and image links to the same resource”。如何在WCAG验证中修复此错误？

<ul>
    <li><div><a href="#"><em class="fa fa-instagram" title="instagram"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-facebook-square" title="facebook"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-pinterest-square" title="pinterest"></em></a></div></li>
    <li><div><a href="#"><em class="fa fa-youtube-square" title="youtube"></em></a></div></li>
</ul>

Answer 1

这是指WCAG的H2: Combining adjacent image and text links for the same resource技术。

我想你已经发布了完整的代码，我想你会使用某种javascript来获取这些链接。因此，Tawdis解析器认为这些链接的目标是相同的URI。

实际上，这是一个来自该解析器的糟糕分析，因为它应该注意到锚#通常用于标记javascript链接（尽管它不是一个有效的URI和一个不好的做法。）

你有不同的事情要做：

对看似button的内容使用有意义的标记，而不是链接，
不要使用具有语义含义的em标记
提供替代文字。

示例：

 <ul>
    <li><button class="fa fa-instagram">Instagram</button></li>
    <li><button class="fa fa-facebook-square">Facebook</button></li>
    <li><button class="fa fa-pinterest-square">Pinterest</button></li>
    <li><button class="fa fa-youtube-square">Youtube</button></li>
</ul>

Answer 2

试试这个

   <ul>
        <li><div><a href="#"><em class="fa fa-instagram" title="instagram" alt="instagram"></em></a></div></li>
        <li><div><a href="#"><em class="fa fa-facebook-square" title="face" alt="face"></em></a></div></li>
        <li><div><a href="#"><em class="fa fa-pinterest-square" title="pinta" alt="pinta"></em></a></div></li>
        <li><div><a href="#"><em class="fa fa-youtube-square" title="youtube" alt="youtube"></em></a></div></li>
    </ul>

Techniques/HTML/Combining adjacent image and text links for the same resource

WCAG 2.0验证 - “到同一资源的连续文本和图像链接”

2 个答案: