跳到主要内容

HTML ARIA属性

什么是ARIA属性？​

ARIA（Accessible Rich Internet Applications）属性是一组用于增强网页可访问性的HTML属性。它们的主要目的是为屏幕阅读器和其他辅助技术提供额外的语义信息，帮助用户更好地理解和使用网页内容。ARIA属性特别适用于动态内容和复杂的用户界面，例如单页应用（SPA）和富互联网应用（RIA）。

备注

ARIA属性不会改变网页的外观或行为，它们只是为辅助技术提供额外的信息。

为什么需要ARIA属性？​

在HTML5中，许多语义元素（如 <header>、<nav>、<main> 等）已经为网页提供了良好的结构。然而，对于一些复杂的交互式组件（如标签页、下拉菜单、模态框等），HTML5的语义元素可能不足以描述其行为和状态。这时，ARIA属性就派上了用场。

常见的ARIA属性​

1. role 属性​

role 属性用于定义元素的角色或类型。它告诉辅助技术某个元素的作用是什么。例如，一个 <div> 元素可以通过 role="button" 来表明它是一个按钮。

html
<div role="button" tabindex="0" onclick="handleClick()">点击我</div>

2. aria-label 属性​

aria-label 属性用于为元素提供可访问的名称。这对于没有可见文本的元素（如图标按钮）非常有用。

html
<button aria-label="关闭" onclick="closeModal()">X</button>

3. aria-labelledby 属性​

aria-labelledby 属性用于将元素的标签与另一个元素的ID关联起来。这对于复杂的表单控件非常有用。

html
<div id="username-label">用户名</div>
<input type="text" aria-labelledby="username-label" />

4. aria-describedby 属性​

aria-describedby 属性用于为元素提供额外的描述信息。这对于表单验证消息或工具提示非常有用。

html
<input type="text" aria-describedby="username-help" />
<div id="username-help">请输入您的用户名</div>

5. aria-hidden 属性​

aria-hidden 属性用于隐藏对辅助技术无用的元素。例如，装饰性图标或重复的内容可以设置为 aria-hidden="true"。

html
<span aria-hidden="true">★</span>
<span class="sr-only">五星评级</span>

实际案例​

案例1：模态框​

模态框是一个常见的交互组件，通常用于显示重要信息或请求用户输入。使用ARIA属性可以确保模态框对屏幕阅读器用户也是可访问的。

html
<div role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
  <h2 id="modal-title">确认删除</h2>
  <p id="modal-description">您确定要删除此项目吗？</p>
  <button onclick="deleteItem()">删除</button>
  <button onclick="closeModal()">取消</button>
</div>

案例2：标签页​

标签页是另一种常见的交互组件。使用ARIA属性可以确保屏幕阅读器用户能够理解标签页的结构和当前选中的标签。

html
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="tab1-content">标签1</button>
  <button role="tab" aria-selected="false" aria-controls="tab2-content">标签2</button>
</div>
<div id="tab1-content" role="tabpanel">标签1的内容</div>
<div id="tab2-content" role="tabpanel" hidden>标签2的内容</div>

总结​

ARIA属性是提升网页可访问性的重要工具。通过正确使用ARIA属性，你可以确保所有用户，包括使用辅助技术的用户，都能无障碍地访问和使用你的网站内容。虽然ARIA属性非常强大，但它们应该作为HTML语义元素的补充，而不是替代。

提示

在使用ARIA属性时，务必遵循ARIA最佳实践，并确保你的网页在多种辅助技术下都能正常工作。

附加资源​

练习​

  1. 为你的网页添加一个模态框，并使用ARIA属性确保其可访问性。
  2. 创建一个标签页组件，并使用ARIA属性描述其结构和状态。
  3. 尝试为没有可见文本的按钮添加 aria-label 属性，并测试其在屏幕阅读器中的表现。

通过以上练习，你将更好地理解ARIA属性的实际应用，并能够为你的网页提供更好的可访问性支持。