Aria 标签和 Alt 属性

Question

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

<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 以及如果图像容器上需要 'role' 会很棒。

谢谢

Answer 1

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

最后，还有 <figure> 元素，它允许使用 <figcaption> 对媒体进行分组。这似乎适合您的用例。

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

如果您为视力正常的用户提供的说明足以解释 non-sighted 个用户，您可以将 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's article from 2019 on figure support in different browsers/screenreaders。

如果由于某种原因，你不能使用语义正确的HTML，还有figure的作用，通过aria-labelledby你可以在图形和图形之间建立关联它的标题：ARIA:figure role and example

Aria 标签和 Alt 属性

Aria Labelling and Alt Attribute

html

accessibility