什么是ARIA属性？

ARIA代表"可访问的富互联网应用程序"。简单来说，ARIA提供了一种与辅助技术（如屏幕阅读器）通信的方式。当你构建自定义下拉菜单或复杂的模态框时，你的代码知道它是什么，但屏幕阅读器不知道。ARIA就是用来填补这个空白的。

举个例子：你用div和css创建了一个漂亮的标签页界面。视觉上很完美，但使用屏幕阅读器的人不知道这些是标签页。加上正确的ARIA属性后，屏幕阅读器就能理解整个交互模式。

为什么这很重要

全球有超过10亿人患有某种形式的残疾，约占全球人口的15-16%。许多人依赖屏幕阅读器、语音控制、键盘导航或其他辅助技术来使用网络。如果没有正确的ARIA实现，你的网站可能看起来很棒，但对这些人来说完全无法使用。

可访问性不仅仅是合规或避免法律问题（尽管这些是真实存在的担忧）。可访问的网站是更好的网站。它们更具语义，更容易用键盘导航，结构更好，通常在搜索引擎中表现也更好。

ARIA的第一原则

在深入了解这个庞大的列表之前，你需要知道：语义化html永远是第一位的。

当<button>存在时，不要使用<div role="button">。当HTML已经能完成工作时，不要用ARIA重新发明轮子。原生元素带有内置的可访问性、键盘支持和预期行为。ARIA是在HTML不够用时填补空白的。

所有ARIA属性详解

下面按用途分组介绍所有ARIA属性，帮助你理解何时以及为什么使用它们。

地标角色（Landmark Roles）

定义页面的主要区域：

• role="banner" - 主要头部区域

• role="navigation" - 导航菜单

• role="main" - 主要内容区域

• role="complementary" - 侧边栏等辅助内容

• role="contentinfo" - 页脚内容

• role="search" - 搜索区域

• role="form" - 表单区域

• role="region" - 值得标识的重要区域

文档结构角色

描述内容的组织结构：

• role="article" - 自包含的内容

• role="document" - 文档内容

• role="feed" - 可滚动的文章列表（如社交媒体信息流）

• role="figure" - 图片、图表、代码片段

• role="img" - 图片容器

• role="list" - 项目列表

• role="listitem" - 单个列表项

• role="math" - 数学符号

• role="none" 或 role="presentation" - 移除语义含义

• role="note" - 脚注或边注

表格相关角色

• role="table" - 表格数据

• role="row" - 表格行

• role="rowgroup" - 行组（thead、tbody、tfoot）

• role="cell" - 表格单元格

• role="columnheader" - 列标题

• role="rowheader" - 行标题

交互组件角色

用于所有交互式组件：

• role="button" - 按钮

• role="checkbox" - 复选框

• role="radio" - 单选按钮

• role="textbox" - 文本输入

• role="searchbox" - 搜索输入

• role="switch" - 切换开关

• role="slider" - 范围滑块

• role="spinbutton" - 数字微调器

• role="combobox" - 组合框（输入框+下拉框）

• role="listbox" - 选项列表

• role="option" - 单个选项

菜单相关角色

• role="menu" - 菜单组件

• role="menubar" - 菜单栏

• role="menuitem" - 菜单项

• role="menuitemcheckbox" - 可勾选的菜单项

• role="menuitemradio" - 单选菜单项

标签页角色

• role="tab" - 标签控件

• role="tablist" - 标签容器

• role="tabpanel" - 标签内容面板

其他重要角色

• role="separator" - 视觉分隔符

• role="toolbar" - 带控件的工具栏

• role="tooltip" - 上下文弹出信息

• role="link" - 链接

• role="progressbar" - 进度指示器

• role="scrollbar" - 滚动条

• role="tree" - 树形视图

• role="treeitem" - 树形项

• role="grid" - 交互式网格

• role="gridcell" - 网格单元格

动态内容角色

用于内容动态变化的场景：

• role="alert" - 紧急消息

• role="log" - 不断追加的日志

• role="status" - 状态消息

• role="timer" - 计时器和倒计时

窗口角色

用于模态交互：

• role="dialog" - 对话框

• role="alertdialog" - 警告对话框

常用ARIA属性详解

交互状态属性

• aria-checked="true|false|mixed" - 勾选状态

• aria-disabled="true|false" - 禁用状态

• aria-expanded="true|false" - 展开状态

• aria-hidden="true|false" - 对辅助技术是否可见

• aria-invalid="true|false|grammar|spelling" - 验证状态

• aria-pressed="true|false|mixed" - 按下状态

• aria-readonly="true|false" - 只读状态

• aria-required="true|false" - 必填字段

• aria-selected="true|false" - 选中状态

标签和描述属性

• aria-label="文本" - 直接提供标签文本

• aria-labelledby="元素ID" - 引用其他元素的文本作为标签

• aria-describedby="元素ID" - 提供额外描述

• aria-errormessage="元素ID" - 链接到错误消息

动态区域属性

控制变化内容如何向用户播报：

• aria-live="off|polite|assertive" - 播报紧急程度

  • off：不播报

  • polite：空闲时播报

  • assertive：立即中断播报

• aria-atomic="true|false" - 播报整个区域还是仅变化部分

• aria-busy="true|false" - 加载状态

关系属性

创建元素间的语义关系：

• aria-controls="元素ID" - 控制的元素

• aria-owns="元素ID" - 拥有的子元素

• aria-current="page|step|location" - 当前项指示器

• aria-posinset="数字" - 在集合中的位置

• aria-setsize="数字" - 集合大小

实际应用示例

示例1：自定义切换按钮

<button 
  aria-pressed="false"
  onclick="this.setAttribute('aria-pressed', this.getAttribute('aria-pressed') === 'false')">
  深色模式
</button>

示例2：可访问的模态对话框

<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>

示例3：表单验证

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

示例4：可展开区域

<button aria-expanded="false" aria-controls="content-panel">
  显示更多详情
</button>
<div id="content-panel" hidden>
  这里是额外内容...
</div>

示例5：实时搜索结果

<label for="search">搜索产品</label>
<input id="search" 
       type="search" 
       aria-controls="results"
       aria-describedby="results-count">
<div id="results" 
     role="region" 
     aria-live="polite">
  <span id="results-count">找到12个产品</span>
  <!-- 结果列表在这里 -->
</div>

常见的可访问性错误

错误1：替代语义化HTML

<!-- 错误 -->
<div role="button" onclick="submit()">提交</div>

<!-- 正确 -->
<button onclick="submit()">提交</button>

错误2：状态不同步

<!-- 错误 - 状态从不更新 -->
<button aria-expanded="false" onclick="toggle()">菜单</button>

<!-- 正确 - 状态随交互更新 -->
<button aria-expanded="false" 
        onclick="this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') === 'false')">
  菜单
</button>

错误3：隐藏交互内容

<!-- 错误 - 按钮对辅助技术隐藏 -->
<button aria-hidden="true">重要操作</button>

<!-- 正确 - 只隐藏装饰性元素 -->
<span aria-hidden="true">★</span><button>评分5星</button>

错误4：过度复杂化

<!-- 错误 - 不必要的aria-label -->
<h1 aria-label="欢迎">欢迎</h1>

<!-- 正确 - 文本内容本身就可访问 -->
<h1>欢迎</h1>

测试你的实现

不能只是添加ARIA就希望它能工作。以下是验证方法：

浏览器开发者工具：Chrome和Firefox都有内置的可访问性检查器
屏幕阅读器：使用NVDA（Windows）、JAWS（Windows）、VoiceOver（Mac/iOS）、TalkBack（Android）测试
自动化工具：运行axe DevTools、WAVE或Lighthouse审核
键盘导航：尝试只用Tab、Enter、空格和方向键使用你的网站
真实用户：黄金标准是与实际使用辅助技术的用户一起测试

常见场景快速参考

标记元素：

• aria-label - 直接标签文本

• aria-labelledby - 引用其他元素的文本

• aria-describedby - 额外描述

交互状态：

• aria-expanded - 用于可展开区域

• aria-pressed - 用于切换按钮

• aria-checked - 用于自定义复选框

• aria-selected - 用于选中选项

错误处理：

• aria-invalid - 标记无效字段

• aria-errormessage - 链接到错误文本

• role="alert" - 立即播报错误

动态内容：

• aria-live="polite" - 在方便时播报

• aria-live="assertive" - 立即播报

• aria-busy="true" - 加载时使用

实用建议

1. 从简单的开始：先掌握常用的aria-label、aria-expanded、aria-hidden、aria-live

2. 渐进学习：随着项目需求逐渐学习其他属性

3. 理解原理：ARIA存在的意义是让网络对所有人都可用

4. 实际测试：添加ARIA属性后，一定要用屏幕阅读器测试

5. 保持更新：ARIA规范会不断演进，关注最新变化

总结

每次你添加正确的ARIA属性，就是在向更多人开放你的网站。这正是网络应该有的样子。

从小处着手，选择当前项目中的一个组件。添加正确的ARIA属性。用屏幕阅读器测试它。你会惊讶地发现它很快就能成为你的第二本能。

当每个人都能使用时，网络会变得更好。现在你有了实现这一目标的工具。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13097