如何在 HTML 中添加图像，同时满足 Web 可访问性指南

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">WAI-ARIA 是否建议将普通图像同时aria-labelledby添加和alt标签？或者还有什么我应该采用的？我需要为每个装饰图像添加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。用作altnull 属性将导致某些屏幕阅读器忽略它，因此文件名将被读出。

角色=“演示文稿”

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

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

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

咏叹调隐藏

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

aria 隐藏和内联 SVG

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

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

装饰图像示例

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

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

深思熟虑后

我提到内联 SVG 不使用该alt属性，而是希望将其用作<title>SVG 的一部分。