role属性有什么用_ARIA无障碍角色说明【介绍】

role 和 aria-label 不是配套开关

这里需要厘清一个关键概念：role定义的是“它是什么”，而aria-label定义的是“它叫什么”。两者可以协同工作，但绝不能互相替代：

• 一个只有图标的按钮：。它缺少可见文字，因此需要aria-label="删除项目"来告知名称，但它完全不需要role="button"，因为原生标签已经表明了身份。
• 一个带标题的卡片区域：

  设置

  ...
  。这里的role="region"是合理的（因为没有更贴切的原生标签），而名称是通过aria-labelledby关联标题元素提供的，并非使用aria-label。
• 设置了role="alert"却没有动态更新aria-live="polite"。这种情况屏幕阅读器可能完全不会播报内容变化，因为role本身并不会触发实时通知机制。

role 值的兼容性与运行时限制

并非所有role值在所有浏览器和屏幕阅读器的组合中都有完全一致的表现，尤其是在涉及复杂交互状态时，需要格外留意：

• role="combobox"（组合框）要求同时管理aria-expanded、aria-controls、aria-activedescendant等多个关联属性。漏掉其中任何一个关键状态，都可能导致屏幕阅读器卡住或报出“未知控件”的错误。
• role="tree"（树形控件）和role="grid"（网格）对键盘导航逻辑有非常严格的要求。如果只加了个role标签，却没有用Ja vaScript实现对应的方向键、Home/End等导航行为，那无异于挂羊头卖狗肉。
• 一些陈旧的辅助技术组合，例如旧版NVDA配合IE11，可能无法识别role="feed"或role="doc-introduction"这类较新的文档角色。遇到这类情况，优先考虑降级方案，比如使用role="region"配合aria-label来替代。
• 所有role值必须小写且拼写准确。role="Button"（首字母大写）或role="menubar"（少了个字母u）都会被浏览器直接忽略。

还有一个极易被忽略的要点：role属性一旦设置，就相当于锁定了该元素的语义身份。后续想通过Ja vaScript动态切换role值，比如从"tablist"改成"list"，屏幕阅读器几乎不会重新解析。与其在运行时费力折腾，更好的做法是使用不同的DOM结构，或者通过CSS来控制显示与隐藏。