ARIA: img 角色

描述

任何应被视为单个图像（可能包括图像、视频、音频、代码片段、表情符号或其他内容）的内容集都可以使用 role="img" 进行标识。

你不应依赖单个图像的 alt 文本来向辅助技术传达上下文；大多数屏幕阅读器会将设置了 role="img" 的元素视为一个黑箱，并且无法访问其内部的单个元素。因此，请为图像提供全面、整体的描述性 alt 文本，要么在周围文本中提供，要么使用 aria-label 属性，并在图像失败时为搜索引擎或视力正常的用户编写 alt 属性到页面上。

<div role="img" aria-label="Description of the overall image">
  <img src="graphic1.png" alt="alternative text" />
  <img src="graphic2.png" alt="in case the images don't load" />
</div>

如果你希望在页面上添加对图像可见的字幕或标签，可以使用

• aria-labelledby，当文本是简洁的标签时。
• aria-describedby，当文本是较长的描述时。

例如

<div role="img" aria-labelledby="image-1">
  …
  <p id="image-1">Text that describes the group of images.</p>
</div>

如果图像纯粹是装饰性的，请考虑使用 presentation 角色。

SVG 和 role="img"

如果你在页面中使用嵌入式 SVG 图像，最好在外部 <svg> 元素上设置 role="img" 并为其提供一个标签。这将使屏幕阅读器将其视为单个实体，并使用标签进行描述，而不是尝试读取所有子节点。

<svg role="img" aria-label="Description of your SVG image">
  <!-- contents of the SVG image -->
</svg>

使用 role="img" 来传达被隐藏或隐含的含义

在某些情况下，辅助技术用户无法理解通过某些方式、通过某些媒体或以某些方式隐含表达的内容的含义。对于图像来说，这种情况很容易解决（可以使用 alt 属性），但在混合内容或其他某些类型的内容中，情况并非如此明显，这时 role="img" 就可以派上用场了。

例如，如果你在文本中使用表情符号，对于视力正常的用户来说，含义可能很明显，但使用屏幕阅读器的人可能会感到困惑，因为表情符号可能根本没有文本表示，或者替代文本可能令人困惑且与所使用的上下文不符。例如，考虑以下代码

<div role="img" aria-label="That cat is so cute">
  <p>&#x1F408; &#x1F602;</p>
</div>

🐈 😂，即 🐈 和 😂，是表情符号的实体引用，读作“猫”和“喜极而泣的脸”，但这并不一定有意义——隐含的意思可能是“这只猫太可爱了”，所以我们将其与 role="img" 一起包含在 aria-label 中。

这在某些浏览器/屏幕阅读器组合中似乎效果还可以，但有些组合会重复朗读标签。请谨慎使用并进行彻底测试。

另一个可能适合这种情况的例子是使用 ASCII 表情符号组合，例如传说中的“翻桌”

<div role="img" aria-label="Table flip">
  <p>(╯°□°）╯︵ ┻━┻</p>
</div>

如果使用 aria-labelledby，屏幕阅读器会朗读它。在这种情况下，只有 aria-label 的内容会被朗读给屏幕阅读器用户，隐藏了字符的乱码，而无需后代 ARIA 来隐藏内容，但也隐藏了可能属于图像一部分的潜在内容。

所有后代都是展示性的

有些用户界面组件类型，当在平台可访问性 API 中表示时，只能包含文本。可访问性 API 没有办法表示 img 中包含的语义元素。为了解决这个限制，浏览器会自动将 presentation 角色应用于任何 img 元素的后代元素，因为 presentation 是一个不支持语义子项的角色。

例如，考虑以下包含标题的 img 元素。

<div role="img"><h3>Title of my image</h3></div>

由于 img 的后代是装饰性的，因此以下代码等效

<div role="img"><h3 role="presentation">Title of my image</h3></div>

从辅助技术用户的角度来看，由于前面的代码片段在 可访问性树 中等效于以下内容，因此标题不存在。

<div role="img">Title of my image</div>

关联的 WAI-ARIA 角色、状态和属性

aria-label 或 aria-labelledby

需要一个可访问的名称。对于 HTML <img> 元素，使用 alt 属性。对于所有其他具有 img 角色的元素，如果存在可见的标签，则使用 aria-labelledby；否则，使用 aria-label。

示例

<span role="img" aria-label="Rating: 4 out of 5 stars">
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>★</span>
  <span>☆</span>
</span>

规范

另见

• <img> 元素
• <svg> 元素
• <picture> 元素
• <audio> 元素
• <video> 元素
• ARIA: presentation 角色
• 可访问性对象模型
• HTML 中的 ARIA