如何通过满足网络可访问性准则以正确的方式添加html中的图像

Question

我目前正在研究与HTML5有关的网络可访问性准则。

关于图像，我目前正在以如下方式添加HTML中的图像：

<!-- Normal Images -->
<img src="https://placeholder.pics/svg/300x300" title="Image Placeholder" alt="Image Placeholder" aria-labelledby="Image Placeholder" width="300" height="300">

<!-- Decorative images -->
<img src="https://placeholder.pics/svg/100x100" role="presentation" aria-hidden="true" alt="" width="100" height="100">

我的问题：

1. 为普通图像添加aria-lablleby和alt标签together是一个好习惯吗？还是我应该采用更好的做法。
2. 我需要在每个装饰图像上添加role="presentation"，aria-hidden="true"和alt=""吗？他们三个应该一起去吗？还是只有其中之一？ （如果仅其中一两个，那么哪个？）

Answer 1

将aria-labelledby和alt标签同时添加到普通图像中是一种好习惯吗？还是我应该采用更好的做法。

[不，实际上这样做会导致某些屏幕阅读器将名称读取两次。只需使用alt属性即可，它具有最广泛的支持（100％），可以很好地完成工作。

也aria-labelledby在DOM中至少需要一个包含文本的元素，您可以通过ID引用它。您也可以有多个标签，仅供参考。它旨在用于不能使用语义HTML标记的其他元素，而不是真正用于图像（总是有例外，但很少见，这是一般性指导）。

例如

<span id="ID1">Read First</span>
<span id="ID2">You can add a second label that will be read second</span>
<div aria-labelledby="ID1 ID2"></div>

也不要使用title属性，除非您打算使其与alt属性相同。否则，大多数屏幕阅读器无法访问title属性，因此鼠标用户会与屏幕阅读器用户获得不同的体验。请参阅此in-depth answer I gave about the title attribute以及如何滚动可访问版本。

因此，您最终的可访问图像将如下所示：-

title

完全可访问且易于维护。

我是否需要为每个装饰图像添加role =“ presentation”，aria-hidden =“ true”和alt =“”？他们三个应该一起去吗？还是只有其中之一？ （如果仅其中一两个，那么哪个？）

您需要做的就是添加一个空的<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300"> 属性。请注意我怎么说空而不是空。例如alt不只是alt=""。将alt用作null属性将导致某些屏幕阅读器将其忽略，因此文件名将被读出。

为了完整起见，您可以添加alt，但据我所知，它不会添加任何额外的支持。

由于对空role="presentation"属性的支持也为99/100％，因此也非常有效，只需使用alt就可以访问。

唯一要在图像上使用alt=""的位置（通常是例外，总是有例外）是要动态隐藏和显示图像。一些屏幕阅读器监视WAI-ARIA的变化要比DOM的变化好。

我建议在纯装饰性的嵌入式SVG上添加aria-hidden，aria-hidden="true"和role="presentation"，尽管Internet Explorer有时可以使它们成为焦点。

请注意，无论如何您都不会在嵌入式SVG上使用focusable="false"属性。

因此，您最终的装饰形象将是：-包括SVG->...

关于WAI-ARIA的最后说明

WAI-ARIA在没有语义方法的情况下可以提供信息。

整个添加额外的WAI-ARIA实际上会使可访问性变差。您应该始终从“是否有将信息提供给屏幕阅读器的本地方法”开始，如果有的话，则不需要或实际上不建议使用WAI-ARIA。

思考后

我提到了alt，而您想将inline SVGs not using the alt attribute用作SVG的一部分。阅读此alt以获得快速概述。