前端可访问性:别让你的网站对某些人关闭大门
毒舌时刻
这网站做的跟迷宫似的,正常人都找不到路,更别说有障碍的人了。
各位前端同行,咱们今天聊聊前端可访问性。别告诉我你还在忽略可访问性,那感觉就像在公共建筑里不建无障碍通道——能进,但不是所有人都能进。
为什么你需要关注可访问性
最近看到一个项目,按钮没有焦点状态,表单没有标签,屏幕阅读器根本无法正常工作。我就想问:你是在做网站还是在做密室逃脱?
反面教材
// 反面教材:忽略可访问性 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> </div> </div> ); } export default App;
毒舌点评:这代码,就像在黑暗中摸索,什么都看不见。

