前端无障碍性：构建包容性 Web 应用

前端无障碍性概述

常见误区

前端无障碍性常被误解为仅针对残障人士的功能，或被视为额外的负担。

• 认为'用户都是正常人'
• 认为'太麻烦没时间做'
• 认为'只是加几个 alt 标签'

实际上，无障碍性是责任而非慈善。

核心价值

• 法律合规：许多国家和地区都有无障碍性法规
• 扩大用户群体：让残障人士也能使用你的网站
• SEO 优化：无障碍性好的网站更容易被搜索引擎收录
• 用户体验：对所有人都友好的设计，对正常人也有好处

反面案例

<!-- 缺乏语义化 HTML -->
<div>
  <div>网站 logo</div>
  <div>
    <div>首页</div>
    <div>关于我们</div>
    <div>联系我们</div>
  </div>
</div>

<!-- 缺少 alt 标签 -->
<img src="logo.png">

<!-- 颜色对比不足 -->
<div>这段文字很难阅读</div>

<!-- 键盘无法访问 -->
<button onclick="doSomething()">点击我</button>

最佳实践

<!-- 使用语义化 HTML -->

  网站 logo
  
    
      首页
      关于我们
      联系我们
    
  






点击我



  
    弹窗标题
    弹窗内容