时间戳

首页 > 解决方案 > 如何通过满足 Web 可访问性准则以正确的方式在 html 中添加图像

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

问题描述

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

标签： htmlimageaccessibilitywai-ariaweb-accessibility

解决方案

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

咏叹调-labelledby

不，实际上将和加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。用作 null 属性将alt导致它被某些屏幕阅读器忽略，因此文件名将被读出。

角色="演示"

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

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

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

咏叹调隐藏

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

aria-hidden 和内联 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。

三思而后行

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

推荐阅读