为非文本内容提供替代文本

图像、图标等无法被屏幕阅读器直接解读的内容，需通过替代方式传达信息。

• 所有 标签都应包含适当的 alt 属性。
• 装饰性图片使用空 alt（alt=””），使其被屏幕阅读器忽略。
• 复杂图像（如图表）除 alt 外，还应提供详细文字说明或链接到解释页面。

确保键盘可操作性

许多用户依赖键盘导航，必须保证所有功能可通过键盘访问。

立即学习“前端免费学习笔记（深入）”；

• 所有交互元素（按钮、链接、表单控件）支持 Tab 键顺序聚焦。
• 可见的焦点指示器（focus outline）不应被 CSS 移除；若需自定义，应提供清晰替代样式。
• 自定义组件（如 JS 实现的下拉菜单）需模拟标准行为，支持 Enter、Space、Arrow 等键操作。

表单可访问性优化

表单是常见障碍点，正确标记可帮助用户理解并完成输入。

• 每个 都应有对应的 ，使用 for 和 id 关联。
• 必填字段通过文本和 aria-required 标识，错误信息用 aria-live 或 role=”alert” 动态提示。
• 使用 fieldset 和 legend 组织相关控件（如单选按钮组）。

ARIA 的合理使用

当原生 HTML 不足以表达语义时，可用 WAI-ARIA 增强可访问性，但不能替代语义标签。

• 使用 aria-label 或 aria-labelledby 为无可见文本的控件提供名称。
• 状态变化使用 aria-expanded、aria-checked 等动态更新。
• 避免滥用 ARIA，优先使用原生语义元素（如用 button 而不是 div + onclick）。

基本上就这些。坚持语义化、关注键盘交互、提供替代信息，并结合测试工具（如 axe、Lighthouse），就能构建真正包容的网页体验。