1

我正在使用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>
4

2 回答 2

3

这指的是H2：为 WCAG的相同资源技术组合相邻的图像和文本链接。

我想你已经发布了你的完整代码，我猜你对这些链接使用了某种 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>
于 2016-06-09T13:55:21.653 回答
0

试试这个

   <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>

技术/HTML/为同一资源组合相邻的图像和文本链接

于 2016-06-01T12:21:00.897 回答