使用语义化的HTML元素·用途·至少51的对比度用工具测测就知道了
一、使用语义化的HTML元素
用对的路子，屏幕阅读器才能帮你搞懂页面。
| 元素 | 用途 |
|---|---|
| <header> | 页面或部分的头部区域 |
| <nav> | 导航链接的集合 |
| <main> | 页面主体内容 |
| <article> | 独立的内容块 |
| <section> | 内容的逻辑分区 |
| <footer> | 页面或部分的底部区域 |
二、确保键盘导航的可访问性
不能点鼠标的，也要能操作。
- 给交互元素（按钮、链接、表单控件等）加属性
- 合理设置属性值，比如`tabindex`
三、提供足够的颜色对比度
颜色搭配好，老花眼也能看清楚。
至少4.5:1的对比度，用工具测测就知道了。
四、使用ARIA标签来增强可访问性
给屏幕阅读器加点料，让它们知道页面里的门道。
- <role>
- <aria-label>
- <aria-labelledby>
五、添加可替代文本和标题
图像和表单控件也要说话，别让屏幕阅读器蒙在鼓里。
- 用`alt`属性加可替代文本
- 用`title`属性加标题
六、测试和验证无障碍功能
看看你的网站是不是真的无障碍。
- 用WAVE工具检查
- 用axe浏览器扩展扫描
- 启用VoiceOver测试
无障碍功能就像给网站穿上了一层贴心的小衣服，让所有用户都能舒服地逛逛。