Skip to content

无障碍(A11y) ​

OAS-UI 以 WCAG 2.1 AA 为目标,并有持续的 axe 自动化审计。

自动化审计 ​

Playwright + axe-core 对每个组件 demo 页执行审计,零严重违规为通过标准:

bash
pnpm test:e2e

审计范围覆盖 wcag2a / wcag2aa / wcag21aa 规则集,仅检查组件 demo 区域(.demo-block)。

键盘流回归矩阵 ​

组件键盘行为角色/ARIA
ButtonEnter/Space 触发button
Input / Textarea原生输入textbox + label
Checkbox / Radio / SwitchSpace 切换、方向键(Radio)checkbox / radio / switch
Slider方向键 + Home/Endslider(aria-valuenow)
InputNumber方向键增减、Home/Endspinbutton
Rate方向键、Home/End(无 Enter)slider(aria-valuenow)
Select / AutoComplete / Cascader / TreeSelect方向键导航、Enter 选择、Esc 关闭combobox + listbox/tree
Menu / Dropdown / ContextMenu方向键、Home/End、Entermenu + menuitemradio
Tabs方向键循环切换tablist + tab + aria-selected
Tree方向键 + 左右展开/收起tree + treeitem
Modal / Drawer / ConfirmTab 焦点困在对话框、Esc 关闭dialog + aria-modal
Tooltip / PopoverEsc 关闭tooltip / dialog
HoverCard悬停/焦点移出关闭无 role(aria-hidden 控制显隐)
PaginationTab 到页码按钮语义按钮 + aria-current
Carousel指示器可 Tab 聚焦role="tablist" + role="tab"
Collapse表头可 Tab 聚焦 + Enter/Space 展开按钮语义
Splitter方向键调整separator + aria-orientation
Questionnaire头部项 Enter/Space 跳步、原生按钮progressbar + aria-current="step" + aria-live 播报

语义原则 ​

  • 表单控件均有可访问名称(aria-label 或关联 label)
  • 弹层类组件提供 role + aria-modal + Esc 关闭
  • 动态区域(loading / 弹窗打开)提供 aria-live 或焦点管理
  • 颜色原则上仅用语义 token(个别极值/预设除外),确保明暗主题下对比度达标

基于 MIT OR Apache-2.0 双许可发布