前端无障碍性开发指南:构建包容性 Web 体验
行业现状与误区
很多人觉得无障碍性(Accessibility)是给残障人士准备的'慈善项目',或者认为只要加几个 alt 标签就万事大吉。现实是,忽视无障碍性不仅可能导致法律合规风险,还会直接损失一部分用户群体。
实际上,无障碍设计带来的好处远不止于此:
- 法律合规:欧美及国内多地都有相关法规要求。
- SEO 优化:语义化结构天然利于搜索引擎抓取。
- 通用体验:清晰的导航和焦点管理对所有人都有益。
避坑指南:常见错误写法
在开发中,我们常看到一些缺乏语义的结构。比如用一堆 div 嵌套代替原生标签,图片缺少描述,或者交互元素无法通过键盘访问。
<!-- 错误示范:缺乏语义化 -->
<div>
<div>网站 logo</div>
<nav>
<a href="/">首页</a>
<a href="/about">关于我们</a>
</nav>
</div>
<!-- 错误示范:图片无描述 -->
<img src="logo.png">
<!-- 错误示范:颜色对比度不足 -->
<div style="color: #ccc; background: #eee;">这段文字很难阅读</div>
<!-- 错误示范:自定义按钮未处理焦点 -->
<button onclick="doSomething()">点击我</button>

