1. WAI 工作组制定 ARIA 规范,aria 标准被映射到本地原生的无障碍机制中。
1.1 支持浏览器:ie8,9 chrome firefox,读屏器:nvda
2.包括 角色 ( role ) 以及和角色相关联的状态 ( state) 和属性 ( property ).
2.1 角色包括:文档结构角色,路标角色以及组件角色
2.2 通过 tabindex 来控制焦点以及用户的键盘导航。
tabindex > 0 : 精确描述 tab 顺序
tabindex = 0 : tab 顺序同文档结构一致
tabindex = -1 : tab 不到,但是可以通过 javascript 聚焦。
不设 tabindex ,只有表单和链接元素可获得焦点,tab 顺序同文档结构一致。
3.标签组件实践
3.1 挑选合适的角色,并设置
3.2 根据初始逻辑,设置对应的 aria 状态,属性以及 tabindex
3.3 绑定键盘事件 ( keydown , keypress ),处理函数中修改逻辑状态
3.4 监听逻辑状态变化,并同步 aria 状态,属性,tabindex ,并通过 focus() 改变当前焦点元素。