前端可访问性开发指南

前端可访问性开发指南

引言

这网站做的跟迷宫似的，正常人都找不到路，更别说有障碍的人了。

各位前端同行，咱们今天聊聊前端可访问性。别告诉我你还在忽略可访问性，那感觉就像在公共建筑里不建无障碍通道——能进，但不是所有人都能进。

为什么你需要关注可访问性

最近看到一个项目，按钮没有焦点状态，表单没有标签，屏幕阅读器根本无法正常工作。我就想问：你是在做网站还是在做密室逃脱？

反面教材

// 反面教材：忽略可访问性 
function App() { 
  return ( 
    <div> 
      <h1>我的网站</h1> 
      <div> 
        <input type="text" placeholder="用户名" /> 
        <input type="password" placeholder="密码" /> 
        <button>登录</button> 
      </div> 
      <div> 
        <img src="logo.png" /> 
        <a href="#">关于我们</a> 
        <a href="#">联系我们</a> 
       
     
  ); 
} 
  ;