ARIA：img 角色

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

您不应该依赖各个图像的替代文本向辅助技术传达上下文；大多数屏幕阅读器会将设置了role="img"的元素视为黑盒，并且不会访问其中的各个元素。因此，请为图像提供全面且描述性的替代文本，可以在周围的文本中提供，也可以使用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 图像，建议在外部<svg>元素上设置role="img"并为其提供标签。这将导致屏幕阅读器将其视为单个实体并使用标签对其进行描述，而不是尝试读出所有子节点。

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

在某些情况下，辅助技术用户将无法获得以某些方式表达的内容的含义，例如通过某些媒体或以某些方式暗示的内容。对于图像，解决方法很明显（可以使用alt属性），但对于混合或其他某些类型的内容，解决方法并不那么明显，role="img"可以发挥作用。

例如，如果在文本中使用表情符号，有视力的人可能会很清楚其含义，但使用屏幕阅读器的人可能会感到困惑，因为表情符号可能根本没有文本表示，或者替代文本可能令人困惑且与使用上下文不符。例如，请考虑以下代码

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

🐈 😂、🐈和😂是表情符号的实体引用，读作“猫”和“带泪的表情”，但这并不一定有意义——隐含的含义可能是“那只猫太可爱了”，因此我们在aria-label中包含它以及role="img"。

这在某些浏览器/屏幕阅读器组合中似乎可以正常工作，但其中一些最终会将标签读出两次。请谨慎使用并进行彻底测试。

另一个可能适合使用此方法的示例是使用ASCII表情符号组合，例如著名的“翻桌”

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

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

某些类型的用户界面组件在平台辅助功能 API 中表示时只能包含文本。辅助功能 API 无法表示包含在img中的语义元素。为了解决此限制，浏览器会自动将角色presentation应用于任何img元素的所有后代元素，因为它是不支持语义子元素的角色。

例如，请考虑以下包含标题的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>

aria-label 或 aria-labelledby

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

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