role 属性必须取自 WAI-ARIA 预设枚举值，按语义分为基础角色（如 button、checkbox）、地标角色（如 banner、main）、实时区域角色（如 alert、status）和文档结构角色（如 article、table），硬编码非法值将被忽略；选用前提是原生 HTML 无法准确表达元素本质语义，且须同步实现对应状态属性与键盘交互逻辑。
role 属性不是随意取值的字符串，它必须来自 WAI-ARIA 规范定义的**预设枚举值集合**，且按语义和用途分为几类。直接硬编码一个不存在的 role 值（比如 role="mybutton"）不会报错，但会被浏览器忽略，辅助技术完全无法识别。
基础角色（Widget Roles）
用于表达可交互控件的语义，常配合 aria- 状态属性使用：
-
button、checkbox、radio、slider：对应原生表单控件，但用在非语义化元素（如<div>）上时需手动管理aria-checked、aria-valuenow等 -
combobox、listbox、menu：复合控件，有严格子元素角色要求（例如combobox必须含textbox和listbox） - 误用高发点：用
role="button"包裹<a href="#">却没加tabindex="0"和keydown回车/空格响应，键盘用户无法触发
地标角色（Landmark Roles）
帮助屏幕阅读器用户快速跳转页面大区块，优先级高于普通结构元素：
-
banner（页眉）、navigation（导航）、main（主内容）、complementary（侧边栏）、contentinfo（页脚） -
search：专指搜索区域，比role="searchbox"更宏观，通常包裹整个搜索表单 - 注意：同一页面中相同地标角色（如多个
navigation）应通过aria-label或aria-labelledby区分，否则屏幕阅读器可能只播报第一个
实时区域与通知角色（Live Region Roles）
控制动态内容如何被辅助技术感知和播报，和 aria-live 配合使用：
立即学习“前端免费学习笔记（深入）”；
-
alert：紧急信息，隐式aria-live="assertive"，会打断当前播报 -
status：非紧急状态更新（如“已保存”），默认aria-live="polite" -
log：追加式日志流（如聊天记录），适合持续滚动更新 - 关键细节：这些角色本身不决定播报时机，真正起作用的是
aria-live；但若只设aria-live="assertive"而不设role="alert"，部分旧版读屏软件可能不识别为高优通知
文档结构与表格角色（Document Structure & Table Roles）
补足 HTML5 语义缺失或修复语义混乱的场景：
-
article、section、heading：当原生标签不可用（如 CMS 输出纯<div>）时兜底，但优先用真实 HTML 标签 -
table、row、gridcell、rowheader：用于自定义表格（如 div 模拟的可编辑表格），必须严格满足父子关系和属性约束（如aria-rowindex） - 陷阱：给一个
<table>再套role="table"是冗余且有害的——原生<table>已自带完整语义，覆盖反而可能破坏读屏行为
实际项目里，role 的选择不是查表填空，而是先问：这个元素对用户来说“本质上是什么”？再看原生 HTML 是否已能准确表达；只有当不能时，才用 ARIA 补语义——而且必须同步补全所有依赖的状态属性和键盘交互逻辑。漏掉任意一环，无障碍就只是个摆设。
