ARIA

[!info] related notes

• 基础：HTML 语义化元素、可访问性基础
• 入口：HTML MOC

ARIA（Accessible Rich Internet Applications）补充可访问性角色、名称、状态和关系，让辅助技术理解界面。优先使用已有正确语义和键盘行为的原生 HTML；添加 ARIA 不会自动实现点击、键盘操作或焦点管理。

例如只有图标的关闭按钮需要可访问名称：

<button type="button" aria-label="关闭菜单">×</button>

若按钮已有清晰可见文本，一般不需再用 aria-label 覆盖它。

ARIA 状态与 CSS

CSS 可以选择真实的 ARIA 状态，但不能为了样式随意设置状态。样式生效不证明可访问性已经正确；class 与 ARIA 可以并存。

当前页面：aria-current

<nav aria-label="主导航">
  <a href="/home">首页</a>
  <a href="/about" aria-current="page">关于我们</a>
</nav>

a[aria-current="page"] {
  border-bottom: 2px solid blue;
}

当前链接由应用按路由设置，不能假定 Astro 自动为所有导航添加 aria-current。它描述当前位置，不等同于标签页选中状态 aria-selected。

展开状态：aria-expanded

<button type="button" id="toggle" aria-expanded="false" aria-controls="details">
  显示详情
</button>
<div id="details" hidden>详情内容</div>

const button = document.getElementById('toggle');
const panel = document.getElementById('details');
button.addEventListener('click', () => {
  const expanded = button.getAttribute('aria-expanded') === 'true';
  button.setAttribute('aria-expanded', String(!expanded));
  panel.hidden = expanded;
});

原生 button 提供键盘激活行为；示例同步可见性与展开状态，aria-controls 指向真实 ID。复杂菜单和对话框还需按对应交互模式管理焦点，不能只改一个属性。

装饰内容：aria-hidden

aria-hidden=“true” 将元素及其子树从可访问性树中排除，不会视觉隐藏，也不会阻止键盘聚焦。不要用它隐藏仍可聚焦的按钮或其祖先；设 opacity: 0.5 更不等于隐藏。

纯装饰图标可使用 aria-hidden；真正需要隐藏整个内容区时，应按需求使用 hidden、display: none 或其他合适机制，并管理焦点。子元素的 aria-hidden=“false” 不能恢复被祖先隐藏的子树。

错误状态：aria-invalid

<label for="email">邮箱</label>
<input id="email" type="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">请输入有效的邮箱地址。</p>

input[aria-invalid="true"] {
  border-color: red;
}

aria-invalid 说明校验状态，不执行校验；应用要同步错误说明与状态，不能只用颜色传达错误。

检查重点

• 角色、可访问名称与实际控件用途一致。
• 状态更新与可见内容、交互行为一致。
• 键盘能到达并操作控件，焦点可见且不会进入隐藏内容。
• 用浏览器可访问性树与实际辅助技术检查；CSS 选择器匹配不是验收标准。

参考

• MDN：ARIA
• WAI-ARIA Authoring Practices