如何通过满足 Web 可访问性指南以正确的方式在 html 中添加图像
How to add images in html the right way by satisfying web accessibility guidelines
我目前正在研究与 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">
我的问题：
- 将
aria-lablleby 和 alt 标签一起添加 是一个好的做法吗？还是我应该采用更好的做法。
- 是否需要为每个装饰图像添加
role="presentation"、aria-hidden="true" 和 alt=""？他们三个应该一起去？或者只有其中之一？ （如果只有一两个，那是哪两个？）
为普通图像同时添加 aria-labelledby 和 alt 标签是个好习惯吗？还是我应该采用更好的做法。
aria-labelledby
不，事实上将 aria-labelledby 和 alt 加在一起会导致某些屏幕 reader 读取名称两次。只需使用 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 属性相同。否则，鼠标用户将获得与屏幕 reader 用户不同的体验，因为大多数屏幕 reader 无法访问 title 属性。请参阅此 in-depth answer I gave about the title attribute 以及如何推出可访问版本（如果您想使用它）。
可访问的图像示例
因此您最终的可访问图像将如下所示：-
<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">
完全可访问且易于维护。
是否需要为每个装饰图像添加 role="presentation"、aria-hidden="true" 和 alt=""？他们三个应该一起去？或者只有其中之一？ （如果只有一两个，那是哪两个？）
替代属性
您需要做的就是添加一个空的 alt 属性。注意我是怎么说空而不是空的。
例如alt="" 不只是 alt。使用 alt 作为空属性将导致它被某些屏幕 reader 忽略，因此文件名将被读出。
角色="presentation"
为了完整起见，您可以添加 role="presentation"，但据我所知，它不会添加任何额外的支持。
话虽如此，我个人将 role="presentation" 添加到装饰图像中，因为我们的单元测试将标记任何空的 alt 属性，除非添加它。这是一个深思熟虑的决定，因此当我们 运行 测试时，我们不会一直检查相同的空 alt 属性是否正确。
由于对空 alt 属性的支持也是 99/100%，因此仅使用 alt="".
也是完全有效和可访问的
aria-hidden
您想要在外部图像上使用 aria-hidden 的唯一地方（主要是时间，总是有例外）是您要动态隐藏和显示它。一些屏幕 reader 的显示器 WAI-ARIA 的变化比 DOM 的变化要好。
aria-hidden 和内联 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 实际上会使可访问性变差。您应该始终以 'is there a native way to give the information to a screen reader' 开头，如果有，WAI-ARIA 不是必需的或实际上推荐的。
深思熟虑
我提到 inline SVGs not using the alt attribute, instead you want to use <title> as part of the SVG. Read this quick article on accessible SVGs 是为了快速概览。
我目前正在研究与 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">
我的问题：
- 将
aria-lablleby和alt标签一起添加 是一个好的做法吗？还是我应该采用更好的做法。 - 是否需要为每个装饰图像添加
role="presentation"、aria-hidden="true"和alt=""？他们三个应该一起去？或者只有其中之一？ （如果只有一两个，那是哪两个？）
为普通图像同时添加 aria-labelledby 和 alt 标签是个好习惯吗？还是我应该采用更好的做法。
aria-labelledby
不，事实上将 aria-labelledby 和 alt 加在一起会导致某些屏幕 reader 读取名称两次。只需使用 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 属性相同。否则，鼠标用户将获得与屏幕 reader 用户不同的体验，因为大多数屏幕 reader 无法访问 title 属性。请参阅此 in-depth answer I gave about the title attribute 以及如何推出可访问版本（如果您想使用它）。
可访问的图像示例
因此您最终的可访问图像将如下所示：-
<img src="https://placeholder.pics/svg/300x300" alt="Image Placeholder" width="300" height="300">
完全可访问且易于维护。
是否需要为每个装饰图像添加 role="presentation"、aria-hidden="true" 和 alt=""？他们三个应该一起去？或者只有其中之一？ （如果只有一两个，那是哪两个？）
替代属性
您需要做的就是添加一个空的 alt 属性。注意我是怎么说空而不是空的。
例如alt="" 不只是 alt。使用 alt 作为空属性将导致它被某些屏幕 reader 忽略，因此文件名将被读出。
角色="presentation"
为了完整起见，您可以添加 role="presentation"，但据我所知，它不会添加任何额外的支持。
话虽如此，我个人将 role="presentation" 添加到装饰图像中，因为我们的单元测试将标记任何空的 alt 属性，除非添加它。这是一个深思熟虑的决定，因此当我们 运行 测试时，我们不会一直检查相同的空 alt 属性是否正确。
由于对空 alt 属性的支持也是 99/100%，因此仅使用 alt="".
aria-hidden
您想要在外部图像上使用 aria-hidden 的唯一地方（主要是时间，总是有例外）是您要动态隐藏和显示它。一些屏幕 reader 的显示器 WAI-ARIA 的变化比 DOM 的变化要好。
aria-hidden 和内联 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 实际上会使可访问性变差。您应该始终以 'is there a native way to give the information to a screen reader' 开头，如果有，WAI-ARIA 不是必需的或实际上推荐的。
深思熟虑
我提到 inline SVGs not using the alt attribute, instead you want to use <title> as part of the SVG. Read this quick article on accessible SVGs 是为了快速概览。