前端可访问性别让你的应用变成残疾人的噩梦什么是前端可访问性前端可访问性a11y是指让你的应用对所有人都可用包括残障人士。别以为这是个小问题如果你忽视可访问性你就等于把一部分用户拒之门外。为什么需要可访问性法律要求许多国家和地区的法律要求网站和应用必须可访问扩大用户群据统计全球约有15%的人口有某种形式的残疾提升用户体验可访问的设计对所有人都有好处增强品牌形象关注可访问性的品牌显得更有社会责任感可访问性的核心原则1. 感知性信息和用户界面组件必须以可感知的方式呈现给用户。!-- 错误示例图片没有alt属性 -- img srclogo.png !-- 正确示例图片有alt属性 -- img srclogo.png alt公司logo !-- 错误示例视频没有字幕 -- video srcdemo.mp4/video !-- 正确示例视频有字幕 -- video srcdemo.mp4 track kindcaptions srccaptions.vtt srclangzh label中文字幕 /video2. 可操作性用户界面组件必须可操作。!-- 错误示例只有鼠标才能操作的按钮 -- div classbutton onclickdoSomething()点击我/div !-- 正确示例可以通过键盘操作的按钮 -- button onclickdoSomething()点击我/button !-- 错误示例没有跳过导航的链接 -- nav ul lia href#首页/a/li lia href#关于我们/a/li lia href#联系我们/a/li /ul /nav !-- 正确示例有跳过导航的链接 -- a href#main-content classskip-link跳过导航/a nav ul lia href#首页/a/li lia href#关于我们/a/li lia href#联系我们/a/li /ul /nav main idmain-content !-- 主要内容 -- /main3. 可理解性信息和用户界面操作必须是可理解的。!-- 错误示例表单没有标签 -- input typetext placeholder姓名 !-- 正确示例表单有标签 -- label forname姓名/label input typetext idname placeholder请输入姓名 !-- 错误示例错误信息不明确 -- input typeemail valueinvalid-email p classerror错误/p !-- 正确示例错误信息明确 -- input typeemail valueinvalid-email aria-invalidtrue p classerror aria-livepolite请输入有效的电子邮件地址/p4. 健壮性内容必须足够健壮能够被各种用户代理包括辅助技术可靠地解析。!-- 错误示例使用过时的HTML -- font colorred错误信息/font !-- 正确示例使用现代HTML -- p classerror错误信息/p !-- 错误示例使用ARIA不当 -- div rolebutton tabindex0点击我/div !-- 正确示例使用原生按钮 -- button点击我/button可访问性工具和库1. axe-coreaxe-core是一个可访问性测试库可以集成到你的测试流程中。// 安装 // npm install axe-core // 使用 import axe from axe-core; // 在测试中使用 describe(可访问性测试, () { it(页面应该没有可访问性问题, async () { await page.goto(http://localhost:3000); await axe.run(page, (err, results) { expect(results.violations.length).toBe(0); }); }); });2. react-axereact-axe是axe-core的React封装可以在开发过程中实时检测可访问性问题。// 安装 // npm install react-axe // 使用 import React from react; import ReactDOM from react-dom; import App from ./App; if (process.env.NODE_ENV ! production) { const ReactDOMServer require(react-dom/server); const axe require(react-axe); axe(React, ReactDOM, 1000); } ReactDOM.render(App /, document.getElementById(root));3. eslint-plugin-jsx-a11yeslint-plugin-jsx-a11y是一个ESLint插件可以在开发过程中检测JSX中的可访问性问题。// 安装 // npm install eslint-plugin-jsx-a11y --save-dev // .eslintrc.js module.exports { plugins: [jsx-a11y], extends: [plugin:jsx-a11y/recommended], };4. storybook-addon-a11ystorybook-addon-a11y是Storybook的插件可以在Storybook中检测组件的可访问性问题。// 安装 // npm install storybook/addon-a11y --save-dev // .storybook/main.js module.exports { addons: [storybook/addon-a11y], };可访问性最佳实践使用语义化HTML使用正确的HTML元素来表示内容的结构提供文本替代为图片、音频、视频等非文本内容提供文本替代确保键盘可访问所有功能都应该可以通过键盘操作提供足够的颜色对比度确保文本和背景之间有足够的对比度使用ARIA属性在必要时使用ARIA属性来增强可访问性测试辅助技术使用屏幕阅读器等辅助技术测试你的应用提供清晰的导航确保用户可以轻松找到他们需要的内容使用一致的界面保持界面元素的一致性让用户容易理解常见可访问性问题和解决方案1. 颜色对比度不足问题文本和背景之间的对比度不足导致视力障碍用户难以阅读。解决方案使用足够对比度的颜色组合使用工具如WebAIM的对比度检查器来验证对比度提供高对比度模式2. 缺少键盘可访问性问题某些功能只能通过鼠标操作键盘用户无法使用。解决方案使用原生HTML元素它们默认是可键盘访问的为自定义组件添加适当的键盘事件处理确保所有交互元素都有适当的焦点状态3. 缺少文本替代问题图片、图标等非文本内容没有文本替代屏幕阅读器用户无法理解。解决方案为图片添加alt属性为图标添加适当的文本描述为视频提供字幕和音频描述4. 表单缺少标签问题表单控件缺少关联的标签屏幕阅读器用户无法理解输入的内容。解决方案为每个表单控件添加元素使用aria-label或aria-labelledby属性为无法添加标签的控件提供描述5. 动态内容缺少通知问题页面内容动态变化时屏幕阅读器用户无法得知。解决方案使用aria-live属性来通知屏幕阅读器内容的变化确保重要的动态内容有适当的通知机制可访问性测试1. 手动测试使用键盘导航整个应用使用屏幕阅读器测试应用检查颜色对比度验证表单的可访问性2. 自动化测试使用axe-core进行自动化可访问性测试集成eslint-plugin-jsx-a11y到开发流程中在CI/CD流程中添加可访问性测试3. 用户测试邀请残障用户测试你的应用收集用户反馈并进行改进总结前端可访问性是一个重要但