A11y
Help ship interfaces that work for keyboard, screen readers, voice control, and low vision—without treating accessibility as a bolt-on checkbox.
What this skill is for
- - Concrete fixes: focus traps, missing names/roles, heading order, label–control wiring, live regions, skip links.
- Design trade-offs: custom components vs native elements, motion reduction, contrast vs brand color.
- Verification: what to test in browser + AT, and what still needs human QA.
What to skip or defer
- - Legal compliance certification (VPAT, formal audits)—suggest specialists when the user needs signed-off conformance.
- Visual design taste without an accessibility angle—unless it affects contrast, touch targets, or readability.
Workflow (adapt freely)
- 1. Context — Who uses what (keyboard-only, VoiceOver, NVDA, zoom)? Which WCAG level (A/AA) is the target?
- Surface problems — Route critical paths; list failures (not vague “be more accessible”).
- Fix in order — Blockers first (can’t complete task), then serious (wrong info), then polish.
- Prove it — Tab order, focus visible, screen reader labels, automated checks where useful, manual pass on real flows.
Anti-patterns to call out
- -
div buttons without keyboard support; only running Lighthouse and declaring done. - Hiding focus rings “for aesthetics”; icon-only controls with no accessible name.
- Over-using
aria-* instead of using the right semantic element first.
Done when
- - Critical paths are keyboard-operable and named for assistive tech; known gaps are documented with owners.
A11y
帮助交付适用于键盘、屏幕阅读器、语音控制和低视力的界面——而不是将无障碍视为事后打勾的附加项。
该技能的用途
- - 具体修复:焦点陷阱、缺失的名称/角色、标题层级、标签与控件的关联、活动区域、跳过链接。
- 设计权衡:自定义组件与原生元素、减少动效、对比度与品牌色。
- 验证:在浏览器+辅助技术中测试什么,以及哪些仍需人工质量保证。
应跳过或延后处理的内容
- - 法律层面的合规认证(VPAT、正式审计)——当用户需要签署确认合规时,建议寻求专家。
- 不涉及无障碍角度的视觉设计审美——除非影响对比度、触摸目标或可读性。
工作流程(可灵活调整)
- 1. 上下文——谁在使用什么(纯键盘、VoiceOver、NVDA、屏幕缩放)?目标达到哪个WCAG级别(A/AA)?
- 暴露问题——走查关键路径;列出失败项(而非模糊的提高无障碍性)。
- 按顺序修复——先解决阻塞性问题(无法完成任务),再处理严重问题(错误信息),最后进行优化。
- 验证——Tab键顺序、焦点可见、屏幕阅读器标签、自动化检查(在有用处)、手动通过真实流程。
需指出的反模式
- - 没有键盘支持的div按钮;仅运行Lighthouse就宣布完成。
- 为了美观隐藏焦点环;无无障碍名称的纯图标控件。
- 过度使用aria-*而非优先使用正确的语义元素。
完成标准
- - 关键路径可通过键盘操作且为辅助技术命名;已知缺陷已记录并指定负责人。