时间戳

首页 > 解决方案 > Aria 标签和 Alt 属性

html - Aria 标签和 Alt 属性

问题描述

在决定哪些属性应该放在下面的代码中时会感到很困惑：

<div class="image-container">
   <img src="images/Local/col-3/03 Rooftops.jpg" />
       <div class="image-overlay">
          <div class="image-title">Rooftops</div>
       </div>
</div>

帮助放置 Alt 属性、aria-label 以及是否在图像容器上需要“角色”会很棒。

谢谢

标签： htmlaccessibility

解决方案

ARIA 的一个基本原则，属性背后的标准role是避免它们，如果你可以使用语义 HTML 元素：ARIA 的第一条规则

所以到你的最后，有一个<figure>元素，它允许将媒体与<figcaption>. 这似乎适合您的用例。

对于可访问性而言，最关键的是在 alt 属性中提供替代文本，用于描述图像（如果它是信息性的）。例如“人们社交的屋顶”等。

如果您对视力正常的用户的说明足以解释视力正常的用户，您可以将 alt 留空，但它的存在是强制性的：alt="".

<figure class="image-container">
   <img src="images/Local/col-3/03 Rooftops.jpg" alt="Rooftops with people socialising" />
   <figcaption class="image-overlay">
      <div class="image-title">Rooftops</div>
   </figcaption>
</figure>

这是基于标准的理论。然而，对于奇怪的现实，不同的浏览器和屏幕阅读器支持不同的部分，您可能需要混合来支持某些版本。请参阅Scott O'Hara 2019 年关于不同浏览器/屏幕阅读器中的图形支持的文章。

如果由于某种原因，您不能使用语义正确的 HTML，则存在figure角色，通过aria-labelledby您可以在图形与其标题之间建立关联：ARIA:figure role and example

推荐阅读