如何通过满足 Web 可访问性指南以正确的方式在 html 中添加图像

Question

我目前正在研究有关 HTML5 的 Web 可访问性指南。

关于图像，我目前正在 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标签为正常图像融合在一起？ 或者我应该采用更好的做法。
2. 我是否需要为每个装饰图像添加role="presentation" 、 aria-hidden="true"和alt="" ？ 他们三个应该一起去吧？ 还是只有其中之一？ （如果只有一两个，那么是哪个？）

Answer 1

为普通图像同时添加aria-labelledby和alt标签是一个好习惯吗？ 或者我应该采用更好的做法。

咏叹调

不，实际上将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属性。 请参阅我给出的有关title属性以及如何滚动可访问版本（如果您想使用它） 的深入答案。

可访问图像示例

所以你最终的、可访问的图像看起来像这样：-

<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">

完全可及且易于维护。

---

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

alt 属性

您需要做的就是添加一个空的alt属性。 注意我是如何说空而不是空的。 例如alt=""不仅仅是alt 。 将alt用作 null 属性将导致它被某些屏幕阅读器忽略，因此文件名将被读出。

角色=“演示”

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

话虽如此，我个人将role="presentation"添加到装饰图像，因为我们的单元测试将标记任何空的alt属性，除非添加此项。 这是一个深思熟虑的决定，所以当我们运行测试时，我们不会一直检查相同的空alt属性是否正确。

由于对空alt属性的支持也达到 99/100%，因此仅使用alt=""也是完全有效且可访问的。

咏叹调隐藏

您希望在外部图像上使用aria-hidden的唯一地方（主要时间，总是有例外）是如果您要动态隐藏和显示它。 一些屏幕阅读器比 DOM 更改更好地监视 WAI-ARIA 更改。

咏叹调隐藏和内联 SVG

我建议在纯粹装饰的内联 SVG 上添加aria-hidden="true" 、 role="presentation"和focusable="false" ，尽管 Internet Explorer 有时可以让它们聚焦。

请注意，无论如何您都不会在内联 SVG 上使用alt属性。

装饰图像示例

所以你最终的装饰图像将是：-

<!--all image types loaded externally using `img` including SVGs-->
<img src="https://placeholder.pics/svg/100x100" alt="" width="100" height="100">
<!--exception for inline SVGs due to focus bug in IE-->
<svg aria-hidden="true" role="presentation" focusable="false">...</svg>

关于 WAI-ARIA 的最后说明

当没有语义方式提供信息时，WAI-ARIA 会在那里提供信息。

添加额外的 WAI-ARIA 实际上会使可访问性变得更糟。 您应该始终从“是否有将信息提供给屏幕阅读器的本地方式”开始，如果有，则不需要或实际上不推荐 WAI-ARIA。

深思熟虑后

我提到了不使用alt属性的内联SVG，而是您想使用<title>作为 SVG 的一部分。 阅读这篇关于可访问 SVG 的快速文章，以获取快速概览。