HTML | aria-labelledby 属性

aria-labelledby 属性是用来定义元素的关联标签。它对于提高网页辅助功能非常有用，可以将一个元素与其标记关联，帮助屏幕阅读器等辅助技术更好地理解和访问网页内容。

语法

<div aria-labelledby="id1 id2 ...">...</div>

其中 id1 id2 ... 是一个或多个用空格分隔的元素 ID。这些 ID 指向了要关联到当前元素的标签。

用法

在 aria-labelledby 中指定的元素 ID 必须指向当前文档中的一个元素，可以是任何具有文本内容的元素，如 <h1>、<h2>、<p>、<span>、<label> 等。关联元素的文本内容将被用于描述当前元素，以便辅助技术更好地理解它的作用。

<h1 id="section_title">Section Title</h1>
<div aria-labelledby="section_title">
  ...
</div>

在上面的例子中，<div> 元素被关联到 ID 为 section_title 的 <h1> 元素。这意味着，屏幕阅读器在访问该 <div> 元素时，将会把关联 <h1> 元素的文本内容读出来，从而帮助用户更好地理解这个部分的内容。

注意事项

• 请确保关联的元素 ID 是当前文档中唯一的，否则可能会导致错误或不一致的结果。
• aria-labelledby 属性应该只与文本内容相关的元素一起使用，如标题、标签、按钮、表单标签等。对于其它元素或组件，应该使用相关的 ARIA 属性来描述。

结论

aria-labelledby 属性是一个非常有用的辅助功能属性，可以帮助网页设计师提高网站的可访问性和可用性。合理使用该属性，能使网页更好地被辅助技术访问，从而更好地服务需要它们帮助的用户。