组件可访问性实战：让你的 UI 在键盘和读屏器下可用
可访问性（A11y）不是“锦上添花”，而是交互质量的一部分。一个只能用鼠标点、读屏器无法理解的组件，本质上是不可用组件。
1. 先做对语义，再谈样式
用正确的语义标签可以减少大量补救工作。按钮用 button，导航用 nav，列表用 ul/li，而不是全部 div + click。
2. 焦点管理是关键
对弹窗、下拉菜单、抽屉这类浮层组件，必须管理键盘焦点：打开时聚焦首个可操作项，关闭后回到触发元素。
- 确保 Tab 顺序符合视觉与逻辑顺序。
- 不要移除焦点样式，必要时自定义更清晰的 focus ring。
- 对不可操作元素设置正确的 disabled 状态。
3. 正确使用 ARIA，而不是滥用
ARIA 的作用是补充语义，不是替代原生语义。优先使用原生元素，再用 ARIA 描述状态和关系。
- aria-expanded：表示折叠/展开状态。
- aria-controls：关联触发器与内容区域。
- aria-live：通知读屏器动态内容变更。
4. 把检测流程接入开发管线
建议在本地和 CI 都接入自动化检查，比如 axe、eslint-plugin-jsx-a11y 等工具。自动化能发现明显问题，但仍需人工走查关键流程。
5. 结语
可访问性最终提升的是所有人的体验。键盘可用、语义清晰、反馈明确的界面，也往往是更专业、更稳定的产品界面。