审校 | 重楼
你曾经在 HTML 语言中使用过某个属性，却并未完全明白它的用途吗？你并非个例！随着时间的推移，我深入探究了众多HTML属性背后的含义，特别是那些对于可访问性极为关键的属性。
在这个深入的教程里，我将剖析一些增强可访问性的关键HTML属性，阐释它们的作用以及何时有效地运用它们。
先决条件
要学习本教程，你应该对HTML具备基本的认识，并且对Javascript知识稍有了解。
目录
- 什么是ARIA属性？
- alt属性
- aria-label属性
- 使用 aria-label的最佳实践
- aria-labelledby属性
- aria-label和aria-labelledby有什么不同
- 使用 aria-labelledby的最佳实践
- aria-describedby属性
- 使用 aria-describedby 的最佳实践
- role属性
- 常见的 role 值
- 使用 role 属性的最佳实践
- aria-controls属性
- 使用 aria-controls 的最佳实践
- aria-selected属性
- 使用 aria-selected 的最佳实践
- tabindex属性
- tabindex可能的值
- 使用tabindex的最佳实践
- title属性
- title 的可访问性问题
- 使用 title 属性的最佳实践
- 在 label 中使用 for 属性
- 使用 for 属性的最佳实践
- scope 属性
- 可能的 scope 值
- 使用 scope 的最佳实践
- aria-hidden 属性
- 使用 aria-hidden 的最佳实践
- inert属性
- 使用 inert 的最佳实践
- aria-live 属性
- aria-live 可能的值
- 使用 aria-live 的最佳实践
- aria-roledescription属性
- 使用aria-roledescription的最佳实践
- aria-atomic 属性
- 使用 aria-atomic 的最佳实践
- 结论
1.什么是ARIA属性？
本文中列出的大多数属性都是ARIA属性。ARIA，全称为Accessible Rich Internet Applications（可访问富互联网应用），是由W3C（万维网联盟）定义的一组属性，旨在提升网络应用的可访问性。
ARIA属性为辅助技术（如屏幕阅读器）提供额外信息。正确运营这些属性可以使复杂的网络应用对视觉、听觉或运动障碍人士更加友好。
使用ARIA的一个关键原则是：有时最好不要使用它。尽管这听起来可能有些矛盾，但你应该仅在必要时才使用ARIA属性。过度使用ARIA可能会干扰依赖辅助技术的用户体验。虽然视力正常的用户可能察觉不到任何问题，但ARIA的过度或不当使用可能会对可访问性产生负面影响。
2.alt属性
如果你已经在HTML中使用过图片，那么alt属性对你来说或许并不陌生。你使用它来提供替代文本，这些文本会在图片无法在屏幕上正确显示时予以呈现。
然而，alt属性最重要的用途在于可访问性。如果图片元素中缺失alt属性，那么屏幕阅读器可能会仅显示图片文件的名称或图片的URL，而不是解释它所展示的内容。这可能会对用户造成困扰，而我们不希望发生这种情况。
alt属性中的内容应该简洁明了，因为其主要目的是为那些无法看到图片的人简要地描述图片。这涵盖了依赖屏幕阅读器的用户、搜索引擎以及因网络连接缓慢致使图片可能无法加载的用户。如果alt文本过长，可能会包含不必要的细节，这些细节不会增加用户对图片内容的理解。
alt属性与图片说明有所不同。图片说明是可见的，可以提供更多关于图片的上下文或额外信息。将图片说明用作alt文本可能会使其过长且冗余。
如果图片纯粹是装饰性的，那么alt属性应当为空。若图片有一个空的alt属性，辅助工具将会跳过它。这对于帮助用户专注于内容而不被不必要的信息分散注意力非常重要。
下面是一个如何使用alt属性的例子：
Lions are remarkable for their powerful roars,
which can be heard up to five miles away.
These roars are used to communicate with other
members of the pride, as well as to ward off rival lions and intruders.
Although lions are often associated with the African savannah,
a small population of Asiatic lions still exists in India's Gir Forest,
making them one of the world's most endangered big cats.
3.aria-label属性
aria-label属性用于为可能没有可见文本的元素提供一个可访问的名称。一个常见的例子是包含图像或 SVG 的按钮。
很多元素都有一个可访问的名称——可访问的名称是元素内部的内容。在这个例子中，的可访问名称是“Frequently Asked Questions”。
包括使用辅助技术的人员在内的每个人，都能清楚地理解上面这个例子的意思，因为它包含了可见的内容。
但在下面的例子中，倘若按钮没有aria-label，依赖屏幕阅读器的用户或许会错过按钮中的内容。这是因为按钮中的内容是一个SVG格式（Scalable Vector Graphics:可缩放矢量图），而SVG不包含任何可见的内容：
不要过度使用aria-label。并非所有内容都需要aria-label——例如，如果你有一个包含带有alt的图像的按钮，或者带有title的 SVG，那么这些属性就充当了该元素的可访问名称。
你应该谨慎且适当地使用aria-label。过度使用该属性可能会导致几个问题：
- aria-label的内容对视力正常的用户不可见。如果有认知障碍的用户使用屏幕阅读器来获取支持时，他们可能不理解为什么听到的信息与在屏幕上看到的不同。
- 在大型代码库中广泛使用aria-label会使 HTML 更难维护。你可能难以跟踪标签的来源，特别是如果它们是通过编程方式设置的或在多个地方设置的。
使用aria-label的最佳实践
- 只要有可能，就用可见文本标签。它们更易于理解和维护，并且能够为所有用户提供一致的体验。
- 倘若页面上已经存在一个可见的标签，请使用 aria-labelledby 将元素与现有文本关联起来，而非使用 aria-label 创建一个新标签（我们稍后会探讨这一点）。
- 如果你使用 aria-label，请让文本保持简短且切中要害，并用最少的词汇来描述元素的目的。
4.aria-labelledby属性
aria-labelledby属性用于将一个元素和另一个元素相关联，后者充当前者的标签。它能够把目标元素与页面上的一个或多个其他元素相连接，这些元素中包含的文本将作为目标元素的标签来使用。
你能够在已经存在可见的文本标签，或者标签需要由多个文本元素构成时运用此属性。
例如，你能够在
About Us
We are a company dedicated to providing excellent service...
Our Services
We offer a wide range of services including...
有时，你可能想将多个文本片段组合成标签，可以通过在aria-labelledby属性中列出多个ID来实现这一点：
Are you sure you want to delete this item?
aria-labelledby与aria-label在目的上是相似的，都是为了提供一个可访问的元素。
aria-label和aria-labelledby有什么不同
aria-label属性直接为元素指定一串文本作为标签。这段文本在屏幕上不可见，但会被屏幕阅读器等辅助技术朗读出来。它通常用于那些没有可见文本标签的情况。
而aria-labelledby属性则通过引用页面上已存在的一个或多个元素（利用这些元素的ID属性）来作为目标元素的标签。标签文本对所有用户都是可见的，因为它们本身就是页面上其他元素内容的一部分。
使用aria-labelledby的最佳实践
- 当页面上已经存在可以作为标签的文本时，应优先使用aria-labelledby而不是aria-label。这样做可以减少冗余，并确保视力正常的用户和屏幕阅读器用户都能看到相同的内容。
- aria-labelledby引用的ID属性在页面上必须是唯一的，并且必须正确地指向现有的元素。如果ID缺失或错误，标签将不会起作用，从而导致可访问性问题。
- 当组合多个标签时，请确保组合后的标签在一起阅读时是有意义的。aria-labelledby中ID的顺序很重要，因为屏幕阅读器会按照列出的顺序来朗读标签。
- 与aria-label一样，应避免在可以使用更简单方法（如直接使用可见的label元素）的情况下过度使用aria-labelledby。这有助于保持代码的可维护性，并减少用户的认知负担。
5.aria-describedby属性
aria-describedby属性用于将一个元素与一个或多个能为其提供额外描述性信息的元素相关联。aria-describedby属性用于为元素提供额外的上下文或说明。
与旨在提供标签或名称的aria-labelledby不同，aria-describedby旨在为用户提供有关元素的更为详细的信息或上下文，通常是对他们从标签中已经了解到的内容的补充。
Enter your full name.当在同一个元素上同时运用了 aria-labelledby 和 aria-describedby 属性时，屏幕阅读器会首先声明由 aria-labelledby 指定的标签，接着声明元素的角色（例如，“按钮”），最后声明由 aria-describedby 所提供的描述。
使用aria-describedby的最佳实践
- 当你需要为用户提供超出标签范畴的额外上下文或说明时，应当使用“aria-describedby”属性。这对于表单、复杂控件或者任何可能需要加以澄清的元素而言特别有用。
- 尽管“aria-describedby”旨在提供更为详尽的描述，但是应当避免使用过长的文本。要保持描述的内容专注于用户与元素有效交互所需要了解的信息。
- 和“aria-labelledby”相同，请确保“aria-describedby”所引用的元素具备唯一且相关的“id”属性。这些元素的内容应当直接与它们所描述的元素相关联。
6.role属性
role属性用于指定元素的角色。你可以使用它来覆盖语义元素的默认角色，从而帮助辅助技术理解元素应该如何被解释或与之交互。
当你使用非语义元素（如 地标区域的角色： 下面的这个示例仅用于演示目的——在可能的情况下，你应该使用正确的语义元素： Here is some main content... © 2024 My Website 小部件和交互式元素的角色： Are you sure you want to proceed? 选项卡面板的示例： This is the content of the first tab. This is the content of the second tab. This is the content of the third tab. aria-controls 属性会通知屏幕阅读器该元素由另一个元素所控制或者受其影响。它通常被用于声明一个组件（如按钮或者选项卡）控制或者与页面的另一部分（如面板或者菜单）进行交互。它也应用于交互式组件，例如选项卡、折叠面板（accordions）和滑块，以描述当用户与组件进行交互时，页面的哪些部分会受到影响。 例如，你能够在选项卡按钮上使用aria-controls来声明每个按钮控制所对应的面板： aria-selected 属性用于声明一组可选项目当中某个元素的当前选择状态。可选项目可以是菜单中的选项、选项卡面板中的选项，或列表框中的项目。 以下是一个在列表框中选择状态的一个示例，选项1中的 aria-selected ="true"表示选项1目前被选中： tabindex 属性用于把控元素的键盘导航。你能够用它为非交互式元素（例如 div、p 或者 span）激活焦点，或者为交互式元素（例如 button、a、input）禁用焦点。此外，你还能够使用 tabindex 来控制页面上的焦点顺序。 正值：具有正值的元素将变得可聚焦，并且会按照它们的tabindex值被纳入到tab键的导航顺序中。tabindex值较小的元素会先于tabindex值较大的元素获得焦点。 具有相同tabindex值的元素将依照它们在文档中出现的顺序进行导航。 注意：使用正值的tabindex或许会致使tab键的导航顺序变得混乱且不符合直觉。通常，对于应当按照自然顺序接收焦点的元素，使用tabindex="0"是更优的选择。 零值：你可以使用此选项来让一个元素变得可聚焦，并将其按照在文档中的位置自然地纳入到tab键的导航顺序中。这对于让那些通常不可聚焦的元素（如 负值：在 tabindex 属性中使用负值，目的是将元素从 Tab 键的导航顺序里移除，这表示用户无法通过 Tab 键直接聚焦到该元素上。然而，这并不代表该元素完全不可聚焦；它依旧能够通过编程的方式（例如，使用 JavaScript）来接收焦点。这种设置对于那些默认情况下不应被聚焦，但在某些特定条件下可能需要被聚焦的元素尤其有用。 在HTML中，title属性用于提供关于元素的附加信息。当用户将鼠标悬停在包含的元素上时，属性中的内容会以工具提示的形式显示。它可以应用于大多数HTML元素，包括链接、图片和表单字段。 你可以使用title属性来提供元素内容的简要解释或描述。例如，你可以在使用<abbr>标签时，通过它来声明缩略语或首字母缩略词的含义。 属性虽然具有一定的实用价值，但也存在一些可访问性问题： 当在常见的role值
Welcome to My Website
Confirmation
Content for Tab 1
Content for Tab 2
Content for Tab 3
使用role属性的最佳实践
7.aria-controls属性
使用aria-controls的最佳实践
8.aria-selected属性
使用aria-selected的最佳实践
9.tabindex属性
tabindex可能的值
使用tabindex的最佳实践
10.title属性
WWW
title的可访问性问题
使用title属性的最佳实践
11.在label标签中使用for属性