html 元素的可访问性答案

【问题标题】：Accessibility for html elementshtml 元素的可访问性
【发布时间】：2021-06-24 19:08:34
【问题描述】：

我一直在寻找更明确的答案，但似乎我发现的内容已经过时，或者论坛对正确答案存在争议。

我正在构建一个没有引导程序的反应网络应用程序。 在哪里适合使用 alt、title 和 aria-label 属性？

*根据我收集到的信息：

a 和 Link 标签使用 title 和 aria-label
img 标签使用 alt 和 aria-label
按钮标签使用标题

【问题讨论】：

我认为您需要更好地解释。例如img 只需要一个alt 属性，你为什么要使用aria-label 呢？您认为需要什么用例？ link 标签 - 它们不是您可以与之交互的 HTML 元素吗？ title 现在几乎没用了，所以不确定你需要什么信息，因为通常不推荐。 <button> 标签不需要title，你的用例是什么？我建议您将问题细化为您想要解释的一个元素和/或属性，然后我们可以提供帮助。
嗯，这就是我从许多关于可访问性的线程中收集的信息，用于将这些属性用于这些标签。本质上，我想自学并确保我的网站按钮、链接和图像易于访问。
对于按钮，文本是重要的部分，所有内容都内置在 <button> 中。唯一需要其他任何东西的时候是在按钮中使用<img>（使用alt 属性）或图标（使用aria-label）。对于链接——同样的原则，文本更可取，img 使用alt 属性，图标使用aria-label。图片，使用alt 属性，研究figcaption 以获取更多信息。 a11yproject.com 上的大量信息或在 wuhcag.com/wcag-checklist 上学习 WCAG。可悲的是，这个问题有点过于宽泛，无法为您提供所有信息。为每个元素/标签尝试 MDN，因为它们提供了很好的信息
感谢您的建议！

标签： javascript html reactjs accessibility wai-aria

【解决方案1】：

属性aria-label 用于交互式元素 的上下文中，可以通过某些方式单击或操作。对于链接、按钮和表单元素，以及通过 tabindex=0 人工获得焦点的元素尤其如此。

如果您尝试标记的元素不是交互式的、不可聚焦的，建议您使用视觉隐藏文本而不是 aria-label。前者得到了更普遍的认可，而后者在非交互元素的情况下不能保证被阅读。

alt 属性专用于 images，即<img> 标记，以及图像按钮<input type="image">。在其他任何地方，它都不存在。它可用于交互式和非交互式图像。避免在同一个可聚焦元素上使用 alt 和 aria-label 以避免任何一种可能性，即一个被宣布而不是另一个（通常一个完全取代另一个）。

title 属性现在已不那么推荐了，因为它的支持因正在运行的屏幕阅读器和浏览器以及所使用的元素而异。但它仍然经常在许多地方工作，尤其是链接和表单元素。同样，避免在同一个元素上同时使用 title 和 aria-label 以避免任何一种可能性，即一个被宣布而不是另一个（通常一个完全取代另一个）。

【讨论】：