React 可访问性工具--如何构建更多的可访问的React 应用程序 2021-11-01 默认分类 暂无评论 1390 次阅读 ![tool-box.jpg][1] 使一个网站或网络应用无障碍，可以改善残疾人和所有用户的用户体验。 由于开发人员要处理紧张的截止日期和竞争性的优先事项，很容易意外地将未解决的无障碍性问题提交给生产。在使用React等涉及编写JSX的JavaScript框架时，事情变得更加复杂。 但幸运的是，你可以利用一些工具，在文本编辑器或浏览器中提示或评估常见的可及性问题。 本文将阐明这些现有的可及性工具，以及你如何利用它们来构建更多的可及性React应用程序。 **什么是网络可及性？** ------------- 如果一个网站或网络应用没有因为残疾而排斥残疾人使用，就可以说是无障碍的。 拥有一个无障碍的网站可以消除障碍，确保残疾人和非残疾人都能平等地使用网站的内容和功能。 让你的网站对残疾人无障碍，其好处将延伸到所有用户，包括非残疾人。 **为什么你要关注无障碍性** --------------- 我怎么强调无障碍性的重要性都不为过。如果你不从项目一开始就注意它，你就有可能把无障碍性变成一种负担，而且如果你开始改造，就会变成一种昂贵的负担。 从字面上看，使你的网站具有可访问性应该是你项目的一个组成部分。它不应该是一个事后的想法。 我在下面强调了为什么你需要从一开始就专注于无障碍性。 **遵循SEO最佳实践** ------------- 一些基本的可访问性要求，如使用语义的HTML元素，正确使用标题元素，以及为img标签添加描述性alt属性，也是SEO的最佳实践。 **为所有用户改善用户体验** --------------- 为残障人士提高无障碍性将改善你所有用户的体验。 例如，添加足够的对比度不仅对低视力、色盲或认知障碍的人有帮助，而且对在不同照明条件下工作的人也有帮助。 同样，当图片无法加载或加载时间过长时，添加一个带有适当文本的alt属性将有助于使用屏幕阅读器的人以及那些网络连接速度慢的人。 **这是正确的做法** ----------- 通过使你的网站无障碍，你正在做正确的事情。他们也有权利访问你提供的服务，有些是你的客户。此外，如果你因为你的网站对残疾人无法访问而被指控为歧视，这对你和你的企业都没有好处。这将损害你的品牌和声誉。 **避免法律问题** ---------- 最后，你可能会遇到法律上的无障碍要求，这取决于你生活和工作的地方。一些国家有立法要求网站对残疾人是无障碍的。 **无障碍标准和准则** ------------ 有几个不同的无障碍标准和准则。最值得注意和广泛认可的标准是由万维网联盟（W3C）通过其网络无障碍倡议（WAI）制定的。 我在下面的分节中强调了其中一些标准和准则。 **无障碍网页内容指南（WCAG）2.1** ---------------------- WCAG是国际公认的网络内容可及性标准之一。 它是由万维网联盟通过一个参与性的过程制定的，其中包括来自世界各地的一些个人和机构利益相关者的意见。 这个标准解释了如何使网络内容对残疾人更无障碍。它还得到了ISO的批准。 根据W3C的说法，WCAG的创建主要是为了作为国际上个人、组织和政府在网络内容无障碍性问题上的一个参考标准。 **制作工具可及性指南（ATAG）2.0** ---------------------- ATAG是一套可访问性指南，你可以用它来设计编写网络内容的工具。 该指南帮助你确保你制作的创作工具对残疾人是无障碍的。 反过来，这些工具也应该帮助作者创造无障碍的网络内容。 **用户代理可及性指南（UAAG）2.0** ---------------------- UAAG 2.0是WCAG的姐妹篇。这套指南阐述了如何使浏览器、浏览器扩展、媒体播放器和其他用户代理对残疾人无障碍。 它被浏览器供应商和浏览器扩展程序制造商用来解决某些无障碍问题，如浏览器中的文本定制。 在下一节中，我们将强调几个工具，它们可以帮助你在React应用程序中标记基本的可访问性问题。 **为你的React应用程序提供的可访问性工具** ------------------------- 尽管你尽了最大努力，但还是很容易无意中把可及性问题带到生产中。在本节中，我们将阐明一些工具，你可以用来突出常见的可访问性问题。 如果你正在处理紧张的最后期限，省略某些可及性功能可能是很诱人的。因此，在你的设置中拥有可及性工具，通知你可能错过的可及性缺陷是很有帮助的。 这绝不是一个详尽的可访问性工具的清单。如果有其他你认为有用但没有包括在这里的工具，请在Twitter上与我联系。我将很乐意更新这篇文章。有人可能会发现它们也很有用。 虽然这些工具会捕捉到一些常见的可及性问题，你可以通过编程来测量，但它们不会替你完成你的工作。你有责任从项目的构思开始，就刻意努力开发更多的无障碍和包容性数字产品。 我将我们要介绍的工具分为两类，即 - 你可以集成到你的React项目中的可访问性工具，这些工具是在考虑React的情况下开发的。 - 一般的可访问性审计工具，你可以用它来审计用或不用React构建的网站。 在下面的小节中，我将强调你可以在React项目中使用的工具。它们是专门为使用React或JJSX而创建的。 **为React打造的可访问性工具eslint-plugin-jsx-a11y** ----------------------------------------- 你可以使用这个工具对React项目中的JSX元素的可访问性问题进行提示。你可以把它和eslint等工具结合起来使用，在你的文本编辑器中对你的项目进行可及性标准的提示。 由于它是通过npm发布的，你可以通过在你的项目中运行下面的命令来安装它。 ``` # using npm as package manager npm install eslint-plugin-jsx-a11y --save-dev # using yarn as package manager yarn add eslint-plugin-jsx-a11y --dev ``` 任何你用create-react-app创建的React项目都已经配置了这个工具--但它默认只启用了可配置的可访问性规则的一个子集。 你可以通过在你的项目中创建一个.eslintrc配置文件并添加以下代码来启用其他规则。下面的代码激活了推荐的规则。 ``` { "extends": ["react-app", "plugin:jsx-a11y/recommended"], "plugins": ["jsx-a11y"] } ``` 如果你想在一个自定义的React项目中标记可访问性问题，你需要安装eslint并在你的.eslintrc配置文件的插件栏中添加 "jsx-a11y"。 然后，它将标记可访问性问题，它可以通过程序识别，并根据你的配置在你的文本编辑器中直接警告你。 ``` { "plugins": [ "jsx-a11y" ]} ``` 关于如何在自定义的React项目中配置这个提示工具的更多信息，请查看GitHub上的项目README。 **axe accessibility linter** ---------------------------- Axe accessibility linter是一个Visual Studio Code扩展，你可以用它来检查React、HTML、Vue和Markdown的一些常见的可访问性缺陷。 它检查.js、.jsx、.ts、.tsx、.vue、.html、.htm、.md和.markdown文件中的无障碍性问题。 安装后你不需要配置就可以开始使用axe accessibility linter。你从VS代码市场上安装它，它就会自动开始对兼容的文件进行无障碍性缺陷的提示，而不需要额外的配置。 关于axe accessibility linter使用的规则的完整列表，请查看VS Code marketplace上的扩展页面。 如果你愿意，你也可以继续配置该工具，通过在你的项目根部添加 axe-linter.yml 配置文件来打开和关闭一些规则。 你可以选择使用WCAG标准单独或分组禁用可访问性规则。在你的项目中使用这个功能将确保你的团队的所有成员遵守相同的可访问性标准。 你可以在你的axe-linter.yml文件中添加以下内容来单独启用或禁用某些规则。关于可配置规则的完整列表，请查看VS代码市场上的axe accessibility linter扩展页面。 ``` # To enable/disable rules at individual level rules: accessibility-rule: false # turn off rule another-accessibility-rule: true # turn on rule ``` 另外，你可以在axe-linter.yml配置文件中添加以下内容，以使用特定的WCAG标准，将规则作为一个组进行禁用。 关于可配置的WCAG标准的完整列表，请查看VS代码市场上的axe accessibility linter扩展页面。 ``` # To enable/disable rules at group level based on WCAG standard tags: - wcag2a # Disable all rules for WCAG 2.0 level A - wcag21a # Disable all rules for WCAG 2.1 level A ``` **axe-core-react** ------------------ 这个无障碍测试工具是由Deque实验室开发和维护的，他们也是axe无障碍linter背后的人。 axe-core-react最初被称为react-axe。你可以在开发中的React项目中运行它，每当你的组件更新时，可及性缺陷就会在Chrome DevTools控制台中突出显示。 它确实可以帮助你在开发的早期抓住一些可及性问题。目前，axe-core-react在Google chrome上运行得最好。与前两者不同的是，它测试的是渲染的DOM的可访问性，而不是你在React组件中编写的JSX元素。 ``` npm install @axe-core/react --save-dev ``` 然后你可以在安装后的开发中运行该包。 下面的代码说明了你如何使用最基本的配置在你的React应用程序中运行axe-core-react。还有一些额外的配置选项，你可以在GitHub上的软件包README中了解。 ``` const React = require('react'); const ReactDOM = require('react-dom'); // Make sure to run @axe-core/react in development if (process.env.NODE_ENV !== 'production') { const axe = require('@axe-core/react'); axe(React, ReactDOM, 1000); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); ``` 你可以在你的React应用程序中直接使用上面提到的工具来捕捉和修复常见的可访问性问题。 在下一节，我们将看看其他一些与React没有直接关系但对识别React应用程序中的基本可访问性缺陷有用的可访问性工具。 **其他可访问性工具** ------------ 有许多工具可以用来检测浏览器中常见的可访问性问题。我在下面强调了这些工具中的几个。 **Axe DevTools浏览器扩展** --------------------- 这是一个浏览器扩展，你可以用来对你的网页进行简单的审核，以发现常见的可访问性问题。 在使用这个浏览器扩展检查无障碍性问题之前，你的应用程序需要被托管在某个地方。它将无障碍性缺陷分为关键、严重、中度和轻度。 **WAVE评估工具浏览器扩展** ----------------- 这是另一个chrome浏览器扩展，你可以用它来识别网站的无障碍性问题。 就像Axe DevTools铬浏览器扩展一样，这个扩展要求你在使用它审核你的网络应用的无障碍性缺陷之前，先托管该应用。 **谷歌在Chrome DevTools的Lighthouse** --------------------------------- 你可以使用谷歌的Lighthouse Chrome DevTools来审核你的网站的无障碍性问题。它可以生成一份报告，你可以用它来修复你网站的缺陷。 外面有一个无穷无尽的一般网络无障碍性评估工具的清单。你可以挑选一个符合你的需求。 对于一个全面的列表，你可以查看W3C的网络可及性评估工具列表或a11y项目的可及性工具。 **结论** ------ 在你的项目中使用eslint-plugin-jsx-a11y、axe accessibility linter和axe-core-react等工具，将在很大程度上帮助你使用React开发更多的无障碍和包容性产品。 虽然它们很方便，但这里提到的工具只能标记一定比例的可访问性缺陷--主要是那些可以通过编程检测的缺陷。 因此，在你的开发中整合自动化测试、手动测试和实际的用户测试真的很重要，因为仅靠自动化测试可能无法检测到你项目中哪怕是50%的无障碍性问题。 [1]: http://guobacai.com/usr/uploads/2021/11/2896970300.jpg 标签: javascript, 性能优化, jsx, 无障碍, seo
评论已关闭