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"
我正在使用 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>
试试这个
<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的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>
我正在使用 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>
试试这个
<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的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>