当前位置：首页 > news >正文

前端无障碍性吐槽：别再让残障人士用不了你的网站！

news 2026/5/29 5:59:04

前端无障碍性吐槽：别再让残障人士用不了你的网站！

毒舌时刻

前端无障碍性就像公共厕所的无障碍设施——每个人都知道应该有，但真正重视的没几个。ARIA、键盘导航、屏幕阅读器... 一堆无障碍性规范让你头晕脑胀，结果你的网站还是像个迷宫，残障人士根本用不了。

我就想不明白了，为什么无障碍性要这么复杂？你看看现在的网站，键盘根本无法导航，屏幕阅读器读得乱七八糟，还有那些没有alt文本的图片，你是想让视力障碍用户猜图吗？

别跟我提什么"无障碍性最佳实践"，先把你的图片加上alt文本再说。还有那些忽视无障碍性的，觉得残障人士不会使用你的网站，结果被告上法庭才后悔莫及。

为什么你需要这个

法律合规：很多国家和地区都有无障碍性法律法规，违反可能会面临法律责任。
扩大用户群体：无障碍性能让残障人士使用你的网站，扩大用户群体。
提升用户体验：好的无障碍性对所有用户都有好处，不仅仅是残障人士。
SEO优化：无障碍性对SEO有帮助，搜索引擎更容易理解你的网站。
面试必备：面试官最喜欢问无障碍性的问题，掌握这些能让你面试更有底气。
装X神器：跟同事聊起来，你能说上几句无障碍性的技巧，瞬间提升逼格。

反面教材

// 1. 没有alt文本 function BadImageComponent() { return ( <img src="logo.png" /> ); } // 问题：没有alt文本，屏幕阅读器无法识别图片内容 // 2. 键盘无法导航 function BadButtonComponent() { return ( <div onClick={() => console.log('Clicked')} style={{ padding: '10px', background: 'blue', color: 'white', cursor: 'pointer' }} > Click me </div> ); } // 问题：div元素无法通过键盘导航和激活 // 3. 颜色对比度不足 function BadColorComponent() { return ( <div style={{ background: '#f0f0f0', color: '#999', padding: '10px' }}> Some text </div> ); } // 问题：颜色对比度不足，视力障碍用户难以阅读 // 4. 没有焦点状态 function BadFocusComponent() { return ( <button style={{ padding: '10px', background: 'blue', color: 'white', outline: 'none' // 移除焦点轮廓 }}> Click me </button> ); } // 问题：移除了焦点轮廓，键盘用户无法知道当前焦点位置 // 5. 动态内容没有通知 function BadDynamicComponent() { const [message, setMessage] = useState(''); useEffect(() => { setTimeout(() => { setMessage('New message'); }, 2000); }, []); return ( <div> <p>{message}</p> </div> ); } // 问题：动态内容更新时，屏幕阅读器无法通知用户

问题：

没有alt文本，屏幕阅读器无法识别图片内容
键盘无法导航，键盘用户无法使用
颜色对比度不足，视力障碍用户难以阅读
没有焦点状态，键盘用户无法知道当前焦点位置
动态内容没有通知，屏幕阅读器用户无法感知更新

正确的做法

前端无障碍性指南

// 1. 添加alt文本 function GoodImageComponent() { return ( <img src="logo.png" alt="公司logo" /> ); } // 2. 使用语义化HTML function GoodButtonComponent() { return ( <button onClick={() => console.log('Clicked')}> Click me </button> ); } // 3. 确保颜色对比度 function GoodColorComponent() { return ( <div style={{ background: '#ffffff', color: '#333333', padding: '10px' }}> Some text </div> ); } // 4. 保留焦点状态 function GoodFocusComponent() { return ( <button style={{ padding: '10px', background: 'blue', color: 'white', outline: '2px solid #000', outlineOffset: '2px' }}> Click me </button> ); } // 5. 通知动态内容更新 import { useEffect, useState, useRef } from 'react'; function GoodDynamicComponent() { const [message, setMessage] = useState(''); const liveRegionRef = useRef(null); useEffect(() => { setTimeout(() => { setMessage('New message'); }, 2000); }, []); return ( <div> <p>{message}</p> <div ref={liveRegionRef} aria-live="polite" style={{ position: 'absolute', left: '-9999px' }} > {message} </div> </div> ); } // 6. 使用ARIA属性 function GoodAriaComponent() { const [expanded, setExpanded] = useState(false); return ( <div> <button aria-expanded={expanded} onClick={() => setExpanded(!expanded)} > Toggle </button> {expanded && ( <div aria-labelledby="toggle-button"> <p>Hidden content</p> </div> )} </div> ); } // 7. 键盘导航 function GoodKeyboardComponent() { const [focused, setFocused] = useState(0); const items = ['Item 1', 'Item 2', 'Item 3']; const handleKeyDown = (e) => { if (e.key === 'ArrowDown') { setFocused((prev) => (prev + 1) % items.length); } else if (e.key === 'ArrowUp') { setFocused((prev) => (prev - 1 + items.length) % items.length); } }; return ( <div onKeyDown={handleKeyDown} tabIndex={0}> {items.map((item, index) => ( <div key={index} style={{ padding: '10px', background: focused === index ? 'blue' : 'gray', color: 'white', margin: '5px' }} > {item} </div> ))} </div> ); } // 8. 表单无障碍性 function GoodFormComponent() { return ( <form> <div> <label htmlFor="name">Name:</label> <input type="text" id="name" name="name" /> </div> <div> <label htmlFor="email">Email:</label> <input type="email" id="email" name="email" /> </div> <button type="submit">Submit</button> </form> ); }

无障碍性工具和资源

无障碍性测试工具：
- axe：自动化无障碍性测试工具
- Lighthouse：Google的网站性能和无障碍性测试工具
- WAVE：Web可访问性评估工具
- A11Y Project：无障碍性资源和测试工具
无障碍性资源：
- WCAG：Web内容无障碍性指南
- MDN Accessibility：Mozilla的无障碍性指南
- W3C Accessibility：W3C的无障碍性资源
- A11Y Coffee：无障碍性博客和资源
最佳实践：
- 使用语义化HTML
- 为所有图片添加alt文本
- 确保颜色对比度足够
- 支持键盘导航
- 使用ARIA属性增强无障碍性
- 测试屏幕阅读器兼容性
- 提供足够的焦点状态
- 通知动态内容更新