Web 可访问性角色（Accessibility Role）

1. 基本定义

   • 可访问性角色是网页元素的一个属性，用于向辅助技术（如屏幕阅读器）说明该元素的功能或用途。例如，屏幕阅读器通过角色识别某个元素是按钮、菜单还是导航区域，从而为用户提供准确的上下文信息。
   • 角色通过HTML的role属性定义，例如：<div role="button">点击这里</div>。

2. 角色的分类

   • 抽象角色：仅用于规范定义，不直接在代码中使用（如widget）。
   • 小部件角色：描述交互式组件（如button、checkbox、slider）。
   • 文档结构角色：描述静态内容结构（如heading、list、table）。
   • 地标角色：标识页面关键区域（如banner、navigation、main），帮助用户快速导航。

3. 角色的实现方式

   • 隐式角色：原生HTML元素自带默认角色（如<button>隐式具有role="button"）。
   • 显式角色：通过手动添加role属性覆盖默认行为（例如将<div>声明为按钮：<div role="button" tabindex="0">）。
   • ARIA角色：遵循W3C的ARIA（可访问富互联网应用） 规范，涵盖超过80种角色类型。

4. 角色与属性的协作

   • 角色需结合其他ARIA属性（如aria-label、aria-expanded）提供完整语义。
   • 例如，一个可折叠菜单需要：

     <div role="button" aria-expanded="false" aria-controls="menu">菜单</div>  
     <ul id="menu" role="menu" hidden>...</ul>  
     

5. 使用场景与注意事项

   • 修复语义缺失：当使用非语义元素（如<div>）模拟控件时，必须显式添加角色。
   • 避免冗余：若原生HTML元素已具备所需语义（如<nav>），无需额外添加role="navigation"。
   • 动态更新：角色与状态需通过JavaScript实时同步（如aria-pressed反映按钮切换状态）。

6. 浏览器与辅助技术支持

   • 屏幕阅读器（如NVDA、JAWS）根据角色生成语音提示，并与操作系统可访问性API（如Windows的UI Automation）交互。
   • 开发者可通过浏览器开发者工具的可访问性检查器验证角色是否被正确暴露。

7. 实际示例

   • 自定义标签页组件：

     <div role="tablist">  
       <button role="tab" aria-selected="true">标签1</button>  
       <button role="tab" aria-selected="false">标签2</button>  
     </div>  
     <div role="tabpanel">标签1的内容</div>  
     

通过理解并正确应用可访问性角色，开发者能确保动态内容和自定义组件对残障用户友好，符合WCAG标准。