跳至正文
uiify

无障碍

uiify以WCAG 2.2 AA为目标,优先使用语义化HTML,仅在原生元素无法满足需求时使用ARIA。

优先使用原生语义

每个组件都以具备正确角色和键盘行为的平台控件为基础:<button>、<dialog>、<details>、复选框和单选框,以及Popover API。ARIA作为回退方案。

键盘导航

  • 激活——Enter和Space激活按钮和切换按钮;Space切换复选框和开关。
  • 复合控件——方向键在菜单、标签页、单选框组和工具栏内移动焦点;Home和End跳到第一项和最后一项。
  • 浮层——Escape关闭对话框、弹出层和菜单,并将焦点返回触发器。
  • Tab顺序——只有交互元素参与Tab导航;禁用的控件会被跳过。

每个组件页面都列出了对应的键盘交互。

焦点管理

模态对话框打开时将焦点限制在内部,关闭时恢复焦点。弹出层和菜单通过各项的游走式tabindex管理焦点。焦点可见样式由应用CSS提供,可使用data-state和:focus-visible。

如何验证

本页的每项承诺都有发布门禁保障:在Chromium、Firefox和WebKit中axe违规数为零,Tier 0组件还须完整通过禁用JavaScript的测试套件。查看验证依据

本页由机器翻译,尚未经人工审核。