前端可访问性：别让你的网站对某些人关闭大门

前端可访问性别让你的网站对某些人关闭大门毒舌时刻这网站做的跟迷宫似的正常人都找不到路更别说有障碍的人了。各位前端同行咱们今天聊聊前端可访问性。别告诉我你还在忽略可访问性那感觉就像在公共建筑里不建无障碍通道——能进但不是所有人都能进。为什么你需要关注可访问性最近看到一个项目按钮没有焦点状态表单没有标签屏幕阅读器根本无法正常工作。我就想问你是在做网站还是在做密室逃脱反面教材// 反面教材忽略可访问性 function App() { return ( div h1我的网站/h1 div input typetext placeholder用户名 / input typepassword placeholder密码 / button登录/button /div div img srclogo.png / a href#关于我们/a a href#联系我们/a /div /div ); } export default App;毒舌点评这代码就像在黑暗中摸索什么都看不见。正确姿势1. 语义化 HTML// 正确姿势语义化 HTML function App() { return ( div header h1我的网站/h1 /header main form div label htmlForusername用户名/label input typetext idusername aria-label用户名 / /div div label htmlForpassword密码/label input typepassword idpassword aria-label密码 / /div button typesubmit aria-label登录登录/button /form /main footer img srclogo.png alt网站 logo / nav ul lia href#关于我们/a/li lia href#联系我们/a/li /ul /nav /footer /div ); } export default App;2. ARIA 标签// 正确姿势使用 ARIA 标签 function App() { const [expanded, setExpanded] React.useState(false); return ( div button aria-expanded{expanded} aria-controlsmenu onClick{() setExpanded(!expanded)} 菜单 /button nav idmenu aria-hidden{!expanded} ul lia href#首页/a/li lia href#关于我们/a/li lia href#联系我们/a/li /ul /nav /div ); } export default App;3. 键盘导航// 正确姿势键盘导航 function App() { const [focused, setFocused] React.useState(0); const items [首页, 关于我们, 联系我们, 服务]; const handleKeyDown (e) { if (e.key ArrowRight) { setFocused((prev) (prev 1) % items.length); } else if (e.key ArrowLeft) { setFocused((prev) (prev - 1 items.length) % items.length); } }; return ( nav onKeyDown{handleKeyDown} tabIndex{0} ul {items.map((item, index) ( li key{index} a href# tabIndex{-1} style{{ outline: index focused ? 2px solid blue : none, backgroundColor: index focused ? #e0e0e0 : transparent }} onClick{() setFocused(index)} {item} /a /li ))} /ul /nav ); } export default App;4. 颜色对比度/* 正确姿势颜色对比度 */ /* styles.css */ body { color: #333333; /* 深色文本 */ background-color: #ffffff; /* 浅色背景 */ } a { color: #0066cc; /* 蓝色链接对比度高 */ text-decoration: none; } a:hover { color: #004499; text-decoration: underline; } button { background-color: #0066cc; color: #ffffff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; } button:hover { background-color: #004499; }毒舌点评这才叫可访问性让所有人都能平等地使用你的网站。