ARIA角色与属性

ARIA 是 W3C 标准，为 HTML 元素添加语义化属性，弥补原生 HTML 的语义不足。

ARIA 三大类

role 角色

文档结构角色

交互组件角色

使用原则

<!-- 原生标签优先 -->
<button>按钮</button>  <!-- 不需要 role="button" -->

<!-- 自定义组件需要 role -->
<div role="button" tabindex="0" aria-label="按钮">按钮</div>

<!-- 原生标签无法表达时补充 -->
<nav aria-label="主导航">...</nav>  <!-- 区分多个nav -->

aria 状态属性

状态类（动态变化）

<!-- 折叠面板 -->
<button aria-expanded="false" aria-controls="panel1">
  展开详情
</button>
<div id="panel1" aria-hidden="true">内容</div>

<!-- 标签页 -->
<div role="tablist">
  <button role="tab" aria-selected="true">标签1</button>
  <button role="tab" aria-selected="false">标签2</button>
</div>

<!-- 复选框模拟 -->
<div role="checkbox" aria-checked="false" tabindex="0">
  选项
</div>

aria 属性类

关系属性

<!-- aria-label 直接标签 -->
<button aria-label="关闭">×</button>

<!-- aria-labelledby 引用标签 -->
<h2 id="title">设置面板</h2>
<div role="dialog" aria-labelledby="title">...</div>

<!-- aria-describedby 引用描述 -->
<label for="password">密码</label>
<input id="password" aria-describedby="hint">
<small id="hint">至少8位字符</small>

<!-- aria-controls 关联控制 -->
<button aria-controls="menu" aria-expanded="false">
  菜单
</button>
<ul id="menu" role="menu">...</ul>

信息属性

<!-- aria-current 当前项 -->
<nav aria-label="面包屑">
  <a aria-current="page">当前页</a>
</nav>

<!-- aria-live 动态内容 -->
<div aria-live="polite">消息更新区域</div>

<!-- aria-haspopup 弹出菜单 -->
<button aria-haspopup="menu">打开菜单</button>

aria-live 值

常用组件示例

模态对话框

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
>
  <h2 id="dialog-title">确认操作</h2>
  <p id="dialog-desc">确定要删除此内容吗？</p>
  <button>确认</button>
  <button>取消</button>
</div>

标签页组件

<div class="tabs">
  <div role="tablist" aria-label="设置标签页">
    <button
      role="tab"
      aria-selected="true"
      aria-controls="panel-general"
      id="tab-general"
    >
      通用设置
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-privacy"
      id="tab-privacy"
    >
      隐私设置
    </button>
  </div>

  <div
    role="tabpanel"
    id="panel-general"
    aria-labelledby="tab-general"
  >
    通用设置内容
  </div>

  <div
    role="tabpanel"
    id="panel-privacy"
    aria-labelledby="tab-privacy"
    hidden
  >
    隐私设置内容
  </div>
</div>

下拉菜单

<button
  aria-haspopup="menu"
  aria-expanded="false"
  aria-controls="dropdown-menu"
>
  更多操作
</button>

<ul
  id="dropdown-menu"
  role="menu"
  aria-label="操作菜单"
  hidden
>
  <li role="menuitem">
    <a href="#">编辑</a>
  </li>
  <li role="menuitem">
    <a href="#">删除</a>
  </li>
  <li role="separator"></li>
  <li role="menuitem">
    <a href="#">分享</a>
  </li>
</ul>

使用原则

ARIA使用原则：
1. 原生HTML优先，ARIA补充不足
2. 不改变元素行为，仅添加语义
3. 状态属性需JavaScript动态更新
4. 所有交互组件需键盘支持
5. tabindex="0"使非交互元素可聚焦

注意：ARIA 只添加语义，不改变元素行为。自定义组件需自行实现键盘交互和状态管理。

要点总结

• 原生 HTML 标签优先，ARIA 仅补充不足
• role 定义元素功能类型
• aria-* 状态需 JavaScript 动态更新
• aria-labelledby/aria-describedby 关联标签和描述
• 自定义交互组件必须支持键盘操作