WCAG 2.0 验证 - "Consecutive text and image links to the same resource"

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

试试这个

   <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

Answer 2

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

我想您已经发布了完整的代码，我猜您对那些 link 使用了某种 javascript。因此 Tawdis 解析器认为那些 link 目标相同的 URI。

实际上，解析器的分析结果很糟糕，因为它应该注意到锚 # 通常用于标记 javascript link（尽管它不是有效的 URI 和不良做法）。

你有不同的事情要做：

对看似 button 而不是 link、
不要使用像 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>

WCAG 2.0 验证 - "Consecutive text and image links to the same resource"

WCAG 2.0 validation - "Consecutive text and image links to the same resource"

html

twitter-bootstrap-3

wcag

wcag2.0