Angular 2中ARIA role属性失效问题求助

嘿，我懂你在Angular里配置ARIA角色时遇到的糟心事儿了——这其实是个很容易踩的小细节，咱们马上把它搞定！

问题核心：属性命名搞错啦 #

你代码里用了[attr.aria-role]来绑定角色，但实际上ARIA的role属性本身不带aria-前缀！只有像aria-label、aria-activedescendant这类附加的ARIA属性才需要aria-开头。当你用[attr.aria-role]时，浏览器会渲染出一个根本不存在的aria-role属性，屏幕阅读器自然识别不了标准的listbox和option语义。

修正后的代码示例 #

把[attr.aria-role]替换成[attr.role]（如果是动态绑定场景），或者直接静态写role属性就行。另外还要注意aria-activedescendant的绑定值，如果是固定ID的话要加单引号，避免Angular把它当成变量解析：

<div>
  <h2>Hello {{name}}</h2>
  <div role="listbox" tabindex="0" id="listbox1" [attr.aria-activedescendant]="'listbox1-1'">
    <div role="option" id="listbox1-1" class="selected">Green</div>
    <div role="option" id="listbox1-2">Orange</div>
    <div role="option" id="listbox1-3">Red</div>
    <div role="option" id="listbox1-4">Blue</div>
    <div role="option" id="listbox1-5">Violet</div>
    <div role="option" id="listbox1-6">Periwinkle</div>
  </div>
</div>

额外提醒：完整可访问性还需交互支持 #

光设置ARIA角色只是完成了一半，一个合格的listbox组件得配上对应的键盘交互逻辑：

• 用上下箭头键切换选中的option
• 按回车键确认选中的选项
• 实时更新aria-activedescendant的值同步当前焦点项

这样屏幕阅读器用户才能顺畅使用这个组件哦。

内容的提问来源于stack exchange，提问作者Sameer