17370845950

如何为自定义下拉菜单添加完整的 ARIA 角色支持
为自定义下拉菜单添加完整ARIA支持,需设置触发按钮role="combobox"、aria-haspopup="listbox"、aria-expanded和aria-controls,菜单容器role="listbox",选项role="option"及动态aria-selected,同步键盘交互与ARIA状态更新,并增强辅助信息。

要为自定义下拉菜单添加

完整的 ARIA 角色支持,核心是准确映射原生 的语义和交互行为,让屏幕阅读器能正确识别菜单结构、当前选中项、展开/折叠状态以及键盘导航逻辑。

基础角色与属性:菜单容器与触发按钮

自定义下拉通常由两部分组成:一个可聚焦的触发按钮(如“选择选项”)和一个隐藏/显示的菜单列表。需明确分配角色:

  • 触发按钮添加 role="combobox"aria-haspopup="listbox",表示它控制一个可展开的列表式菜单;
  • 同时设置 aria-expanded="false"(初始收起)或 "true"(默认展开),并动态同步该值;
  • aria-controls="menu-id" 关联触发按钮与菜单容器的 ID,建立明确的控制关系;
  • 菜单容器使用 role="listbox",并设 id="menu-id" 与上一步呼应。

选项项语义:每个选项都要有角色和选中状态

菜单中的每一项不是普通

  • ,而应作为可选单位被识别:
    • 每个选项元素添加 role="option"
    • aria-selected="true" 标记当前选中项(仅一个为 true,其余为 false);
    • 若支持多选,还需在触发按钮上加 aria-multiselectable="true",并在选项中保持 aria-selected 状态;
    • 确保所有选项都可键盘聚焦(例如通过 tabindex="-1"),并在展开时将焦点移入第一个选项。

    键盘交互与 ARIA 动态更新

    ARIA 不仅是静态标记,还需配合真实行为:

    • 按下 EnterSpace 时切换菜单展开状态,并同步更新 aria-expandedaria-hidden(菜单容器);
    • 方向键(/)在 listbox 中移动焦点,同时实时更新各选项的 aria-selected
    • 选中后,触发按钮的文本应反映当前值,并设置 aria-activedescendant="option-id" 指向当前高亮项(尤其在不可见滚动区域时);
    • 关闭菜单时,焦点应回到触发按钮,并重置 aria-expanded

    辅助信息与无障碍增强

    提升理解度和兼容性:

    • 为触发按钮提供清晰的可访问名称,用 aria-label 或关联
    • 菜单容器添加 aria-labelledby="trigger-id",让屏幕阅读器读出“XXX 选项列表”;
    • 禁用状态需同时设 aria-disabled="true"tabindex="-1",避免键盘误入;
    • 避免仅用颜色传达状态(如选中高亮),辅以图标、粗体或文字提示。

    不复杂但容易忽略的是:ARIA 属性必须随 DOM 状态实时更新,且不能替代原生语义——如果能用 就优先用;自定义实现时,每一步交互都要有对应的 ARIA 反馈,否则对辅助技术用户而言,它只是个“看不见的黑盒”。