ADA合规SVG问题

Question

我目前正在开发一个需要阿达依从。的网站，当我在波中检查这个站点时，我得到了一个零错误的完美分数。然而，当我把它放在这个检查器中时，它说有6个错误丢失了alt标记。

​

​

这些图像是svgs，当我查看页面源和检查元素时，我可以看到alt标记，它们明显存在。出于某种原因，检查程序正在查看实际的svg本身。

以下是代码：

 <div class="footer-desktop">
   <img src="<?php echo get_template_directory_uri(); ?>/img/fc-footer-logo.svg" alt="Footer Logo">
 </div>

我尝试过添加role="image"，这只会导致更多的错误。我也尝试过添加一个标题标签。

Answer 1

并不是所有的自动验证器都是准确的，它们不应该被认为是权威的。它们仅仅是帮助您找到可能是一个问题的工具。你最好的选择是测试和确认事物是否是可访问的。话虽如此，以下是一些让SVG更好的建议.

在您的SVG上，使用<title>和<desc>标签，并给出每个唯一的ID，然后在标签上包括一个咏叹调标签。例如：

<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg" aria-labelledby="svgTitle svgDesc" >
    <title id="svgTitle">This is my title.</title>
    <desc id="svgDesc">This is my description.</desc>
    <...>
</svg>

这将为您提供相当好的屏幕阅读器支持。但是，我不能断言它将通过任何特定的自动化测试。或者，您可以在SVG上使用aria-label，但是在标准浏览器中不能从标题标记中获得工具提示。

注意：<svg>标记没有"alt“属性，因此它将不是有效的HTML5。

顺便说一下，应该是role="img"而不是role="image"。