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

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

毒舌时刻

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

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

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

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

反面教材

// 反面教材：忽略可访问性 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; 

毒舌点评：这代码，就像在黑暗中摸索，什么都看不见。

正确姿势

1. 语义化 HTML

// 正确姿势：语义化 HTML function App() { return ( <div> <header> <h1>我的网站</h1> </header> <main> <form> <div> <label htmlFor="username">用户名</label> <input type="text" aria-label="用户名" /> </div> <div> <label htmlFor="password">密码</label> <input type="password" aria-label="密码" /> </div> <button type="submit" aria-label="登录">登录</button> </form> </main> <footer> <img src="logo.png" alt="网站 logo" /> <nav> <ul> <li><a href="#">关于我们</a></li> <li><a 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-controls="menu" onClick={() => setExpanded(!expanded)} > 菜单 </button> <nav aria-hidden={!expanded}> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a 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; } 

毒舌点评：这才叫可访问性，让所有人都能平等地使用你的网站。