ARIA（Accessible Rich Internet Applications，无障碍富互联网应用程序）是一组属性，用于添加无障碍语义——角色、状态和属性——这些是原生 HTML 无法表达的。但最重要的 ARIA 规则是：优先使用原生 HTML。
ARIA 的第一条规则：不要使用 ARIA
html
Save
Save
原生元素免费提供了正确的角色、键盘行为和焦点管理。只有在没有原生元素能够完成工作时，才应该使用 ARIA。
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
这是真正有用的 ARIA：告诉屏幕阅读器没有页面重载就动态变化的内容（搜索结果、提示信息、验证错误）。
不正确的 ARIA 比没有 ARIA 还要糟糕——它向屏幕阅读器用户提供虚假信息。ARIA 只改变语义，不改变行为：在 <div> 上设置 role="button" 不会使其可聚焦或可点击；您必须自己添加 tabindex 和按键处理程序。
在 95% 的情况下使用语义 HTML；仅在需要实现自定义小部件（选项卡、组合框、菜单）和通过 live regions 宣布动态更新时使用 ARIA。
遵循规则——优先使用原生元素，不要随意改变原生语义，保持状态同步，永远不要应用您没有完全实现的角色。