adb 多点触碰_无法触及的神话

adb 多点触碰

On Twitter, in Slack, on Discord, in IRC, or wherever you hang out with other developers on the internet, you may have heard some formulation of the following statements:

在Twitter上，在Slack中，在Discord中，在IRC中，或者无论您在互联网上与其他开发人员闲逛的任何地方，您都可能听到以下陈述的表达形式：

React doesn't support accessibility
React不支持可访问性
React makes websites inaccessible
React使网站无法访问
People should write accessible HTML instead of React
人们应该编写可访问HTML而不是React
React is ruining the internet
React正在破坏互联网

There's a somewhat common misperception that JavaScript frameworks and web accessibility don't mix. React, being one of the largest JavaScript libraries, is often the target.

有一种普遍的误解，认为JavaScript框架和Web可访问性没有融合。作为最大JavaScript库之一，React通常是目标。

In my career, however, I have had the interesting experience of being introduced to accessibility and ReactJS at around the same time. I found tooling in React that helped me learn a lot about accessibility that I never would have encountered otherwise.

但是，在我的职业生涯中，我经历了有趣的经历，几乎同时被介绍了可访问性和ReactJS。我在React中发现了工具，该工具帮助我学到了很多关于可访问性的知识，而我从来没有遇到过。

And while I don't disagree that there are plenty of libraries, websites, apps, etc. written in React that are inaccessible, I do disagree there is something inherent in ReactJS that makes developers build inaccessible sites. In fact, I love the accessibility tooling available in the React ecosystem, so this post is really about how React can help you make more accessible websites than you've ever made before.

尽管我不同意React编写的许多库，网站，应用程序等都是无法访问的，但我确实不同意ReactJS固有的某些特性，这些特性使开发人员无法构建无法访问的站点。实际上，我喜欢 React生态系统中提供的可访问性工具，因此这篇文章实际上是关于React如何帮助您创建比以往任何时候都更多的可访问性网站。

I'll outline how you can combine React linting tools, DOM auditing, and Storybook (a component library tool) to provide a really supportive accessibility environment for developers -- whether they are accessibility pros or just getting started. By the end of this post, you'll have the following configured for your Gatsby project (or other React project):

我将概述如何结合使用React linting工具，DOM审计和Storybook(组件库工具)，为开发人员提供真正支持性的可访问性环境-无论他们是可访问性专家还是刚入门的人。在这篇文章的最后，您将为Gatsby项目 (或其他React项目)配置以下内容：

in-editor reporting of accessibility errors
编辑器中的可访问性错误报告
a pre-commit hook for preventing accessibility errors from getting into the repository
一个预提交钩子，用于防止可访问性错误进入存储库
browser console reporting of accessibility errors during development, with links to info on how to resolve the errors
浏览器控制台报告开发过程中的可访问性错误，并提供有关如何解决错误的信息的链接
a component library with built-in accessibility testing so all project stakeholders can hold the team accountable for accessibility issues
具有内置可访问性测试的组件库，因此所有项目涉众可以使团队对可访问性问题负责

Want to get started right away? I created a Gatsby starter with all these accessibility tools built in. Checkout the gatsby-starter-accessibility repo that has all these features available out of the box.

想立即开始吗？ 我使用内置的所有这些辅助功能工具创建了一个Gatsby入门程序。签出具有所有可用功能的gatsby-starter-accessibility存储库 。

工具与设定 (Tools and Setup)

If you've written JavaScript over the past few years, you've probably used or at least heard of ESLint. If not, now is a great time to get started with it!

如果您过去几年写过JavaScript，那么您可能已经使用或至少听说过ESLint 。如果没有，现在是开始它的好时机！

ESLint is a linting utility for JavaScript that helps you catch formatting and syntax errors while you are writing code. Most editors have some sort of linting configuration built in, which lets you see errors in your editor while you code.

ESLint是JavaScript的整理工具，可帮助您在编写代码时捕获格式和语法错误。大多数编辑器都内置了某种整理配置，使您可以在编写代码时查看编辑器中的错误。

This is really helpful for keeping code consistent, especially when there's a lot of people working on a project.

这对于使代码保持一致非常有帮助，尤其是在有很多人在从事项目工作时。

ESLint also has a really healthy plugin ecosystem. You can include rules specific to the JavaScript framework you are working with (i.e., React, Angular, Vue, etc), among others. For React, I typically use the eslint-plugin-react and the really helpful eslint-plugin-jsx-a11y. This plugin lints your code for known accessibility violations, using these rules.

ESLint还具有一个非常健康的插件生态系统。您可以包括特定于您正在使用JavaScript框架的规则(即React，Angular，Vue等)。对于React，我通常使用eslint-plugin-react和真正有用的eslint-plugin-jsx-a11y 。该插件使用这些规则，将代码删除已知的可访问性冲突。

Having these automated tests run while you are writing code can prevent so many errors. Even though automated accessibility testing catches only about 20-30% of all accessibility errors, catching these errors before they make it into a codebase can save time, budget, and energy for doing more manual testing once the code is in the browser.

在编写代码时运行这些自动化测试可以防止出现很多错误 。即使自动可访问性测试仅捕获大约20-30％的所有可访问性错误，但在将代码放入浏览器后立即将其纳入代码库中，这可以节省时间，预算和精力，以进行更多的手动测试。

用法 (Usage)

Here's how you can get started with accessibility linting in your React project.

这是您如何在React项目中开始使用可访问性棉绒的方法。

First, we'll need to install the necessary eslint packages:

首先，我们需要安装必要的eslint软件包：

npm install eslint eslint-plugin-react eslint-plugin-jsx-a11y --save-dev

In your package.json, add the following configuration:

在您的package.json中，添加以下配置：

"eslintConfig": {"parserOptions": {"sourceType": "module"},"env": {"node": true,"browser": true,"es6": true},"plugins": ["react","jsx-a11y"],"extends": ["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"]
}

With this added to your package.json, ESLint will use the rules recommended by ESLint, React, and the jsx-a11y plugin while you are working.

将其添加到package.json ，ESLint将在工作时使用ESLint，React和jsx-a11y插件推荐的规则。

You'll want to make sure your editor is set up to display linting errors in the editor for this to be really useful.

您将要确保将您的编辑器设置为在编辑器中显示棉绒错误，以使其真正有用。

使用lint：staged添加一个预提交钩子以防止代码库中的代码无法访问 (Add a pre-commit hook for preventing inaccessible code in the codebase using lint:staged)

Now we've got some accessibility linting set up, and hopefully everyone working on the project has linting turned on in their editor so they can see any errors while they work.

现在，我们已经设置了一些可访问性棉绒，希望该项目的每个人都在编辑器中启用棉绒，以便他们在工作时可以看到任何错误。

But you can't be 100% sure that everyone will be paying attention to the linter. And even if they are, it's easy to make a quick change, switch files, and any errors will be out of sight, out of mind.

但是您不能百分百确定每个人都将关注这个短毛绒。即使是这样，也可以轻松进行快速更改，切换文件，并且不会出现任何错误。

What we can do as an extra check to prevent inaccessible code from entering the codebase is to add a pre-commit hook that runs the linting we set up above every time a developer tries to commit code. If an accessibility error is found, an error message will display with the relevant linting error and location of the error, and the commit will be prevented until the developer resolves the issue.

作为防止无法访问的代码进入代码库的额外检查，我们可以做的是添加一个预提交钩子 ，该钩子在每次开发人员尝试提交代码时都会运行我们在上面设置的lint。如果发现了可访问性错误，将显示一条错误消息，其中包含相关的掉毛错误和错误的位置，在开发人员解决问题之前，将阻止提交。

用法 (Usage)

The easiest way to set up pre-commit linting hooks is using the lint-staged package. After you've got all your eslint configuration set up (from our first step), run the following command in your project directory:

设置预提交lint-staged钩的最简单方法是使用lint-staged 包装。在完成所有eslint配置之后(从第一步开始)，在项目目录中运行以下命令：

npx mrm lint-staged

This command will install the husky package for managing the pre-commit hooks and look in your package.json to automatically setup a pre-commit hook based on your linting configuration.

此命令将安装用于管理预提交挂钩的husky 软件包，并查看package.json以根据您的棉绒配置自动设置预提交挂钩。

A simple configuration that lints all JS files based on the existing eslint configuration in the repo will look like this (from package.json):

根据仓库中现有的eslint配置，将所有JS文件删除的简单配置如下所示(来自package.json )：

"husky": {"hooks": {"pre-commit": "lint-staged"}
},
"lint-staged": {"*.js": ["eslint"]
}

You can adjust this as you see fit. For example, sometimes you want to limit linting to certain directories. To run the pre-commit hook only on JS files in the src directory, you would update the lint-staged configuration like this:

您可以根据自己的喜好进行调整。例如，有时您希望将绒毛限制为某些目录。要仅对src目录中的JS文件运行pre-commit钩子，您将像这样更新lint暂存的配置：

"lint-staged": {"src/*.js": ["eslint"]
}

The great thing about lint-staged is that it only lints the files that are part of the current commit. If for some reason there is some pre-existing errors in another part of the codebase, the commit won't be prevented--it only prevents new errors from being introduced.

关于lint-staged伟大之处在于，它仅清除当前提交中的文件。如果由于某种原因在代码库的另一部分中存在一些预先存在的错误，那么将不会阻止该提交-它只会阻止引入新的错误。

React轴 (react-axe)

The great thing about the linting setup we have now is that it will prevent a lot of errors from being introduced into the codebase. It won't prevent all errors, however. Some errors only exist when several components are used together, or from certain content, and can only be caught in the browser.

现在，关于linting设置的伟大之处在于，它将防止将很多错误引入代码库中。但是，它不能防止所有错误。某些错误仅在将多个组件一起使用或来自某些内容使用时才存在，并且只能在浏览器中捕获。

Luckily, we have a solution for this, too. Axe is an open source engine for automated accessibility testing, supported by Deque. I first became familiar with axe by using their really useful browser extension for testing individual pages in the browser.

幸运的是，我们也有解决方案。 Ax是Deque支持的用于自动辅助功能测试的开源引擎。我首先通过使用斧头真正有用的浏览器扩展来熟悉斧头，以测试浏览器中的各个页面。

The problem with browser-extension accessibility testing is that they are typically only run after development is complete. Using the react-axe library, you can have automated accessibility testing run on every page during development, so developers can get real-time feedback on accessibility issues. This helps make sure that accessibility issues never make it to production, and it also educates developers who may not be accessibility experts on potential pitfalls.

浏览器扩展可访问性测试的问题在于，它们通常仅在开发完成后才运行。使用react-axe library ，您可以在开发过程中在每个页面上运行自动化的可访问性测试，因此开发人员可以获取有关可访问性问题的实时反馈。这有助于确保可访问性问题永远不会进入生产环境，并且还可以对可能不是可访问性专家的开发人员进行培训，以了解潜在的陷阱。

The react-axe library is an easy to use implementation of the axe engine, specifically for React.

react-axe库是ax引擎的易于使用的实现，专门用于React。

用法 (Usage)

Here's how to get started using react-axe with Gatsby (someone made a Gatsby plugin for it!):

这是开始在Gatsby中使用react-axe的方法( 有人为此制作了一个Gatsby插件！ )：

npm install --save gatsby-plugin-react-axe

Add gatsby-plugin-react-axe to your plugins array in gatsby-config.js

将gatsby-plugin-react-axe添加到gatsby-config.js中的插件数组

module.exports = {siteMetadata: {title: 'Gatsby Default Starter',description:'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',author: '@gatsbyjs',},plugins: ['gatsby-plugin-react-axe',// other plugins go here],
};

Now, when the page renders, the plugin will print any accessibility errors to the browser console. Here's an example, where I've put an <h5> directly underneath an <h1>:

现在，页面呈现后，该插件会将所有可访问性错误打印到浏览器控制台。这是一个示例，其中我在<h1>正下方放置了<h5> <h1> ：

React aXe will show accessibility errors in the console while you are developing.

开发过程中，React ax将在控制台中显示可访问性错误。

You can see that in the axe message in the console that it has identified my heading issue: "Heading issues should only increase by one" as a moderate issue. It also includes a link to learn more about why this is an issue and how to resolve it: https://dequeuniversity.com/rules/axe/3.2/heading-order. And lastly, it displays the specific element that is causing the issue for easy identification.

您可以在控制台的斧头消息中看到它确定了我的标题问题：“标题问题只应增加一个”作为中度问题。它还包括一个链接，了解更多关于为什么这是一个问题，如何解决它： https://dequeuniversity.com/rules/axe/3.2/heading-order 。最后，它会显示引起问题的特定元素，以便于识别。

This kind of instant feedback is so important, whether you are an accessibility beginner or even a seasoned pro. Catching the automated issues instantaneously can give you more bandwidth to focus on other more involved tasks.

无论您是辅助功能初学者还是经验丰富的专业人士，这种即时反馈都非常重要。即时捕获自动化问题可以为您提供更多带宽，以专注于其他涉及更多的任务。

故事书和辅助功能 (Storybook and Accessibility)

The last piece of our accessibility workflow has to do with our component-driven workflow. For React projects, I have really enjoyed using Storybook to build and document our front end components.

可访问性工作流程的最后一部分与组件驱动的工作流程有关。对于React项目，我真的很喜欢使用Storybook来构建和记录我们的前端组件。

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Storybook是一个开源工具，用于为React，Vue和Angular隔离开发UI组件。它使构建令人惊叹的UI井井有条且高效。

- storybook.js.org

-storybook.js.org

Besides having a nice workflow and UI, Storybook has an awesome accessibility add-on that adds a panel to each component in your component library highlighting accessibility issues.

除了拥有一个不错的工作流程和UI外，Storybook还具有一个很棒的可访问性插件，该组件将一个面板添加到组件库中的每个组件，以突出显示可访问性问题。

Our storybook configuration has built-in axe tests for each component and a color blindness simulator, provided by the storybook accessibility add-on.

我们的故事书配置具有针对每个组件的内置斧头测试，以及故事书辅助功能附加组件提供的色盲模拟器。

Behind the scenes, the add-on actually also uses aXe for testing. This is really nice, because it means that the testing we are using in development is the same as what we are using in the component library. Having the errors highlighted in the component library also helps everyone on our project teams catch accessibility issues as they are browsing the library, either for QA purposes or design inspiration.

在后台，该附件实际上还使用了斧头进行测试。这真的很好，因为这意味着我们在开发中使用的测试与组件库中使用的测试相同。在组件库中突出显示错误还可以帮助我们项目团队中的每个人在浏览库时都可以访问它们，以进行质量检查或设计灵感。

建立 (Setup)

The setup for Storybook is a bit more involved, so if you haven't used Storybook before, you can checkout the Storybook for React documentation for a generic React setup.

Storybook的设置涉及更多，因此，如果您以前从未使用过Storybook，则可以签出Storybook for React文档以获取通用的React设置。

If you want to get Storybook running with Gatsby, see Visual Testing with Storybook in the Gatsby docs.

如果要使Storybook与Gatsby一起运行，请参阅Gatsby文档中的Storybook的视觉测试。

Once you have Storybook setup, adding the accessibility add-on is pretty straightforward.

设置完Storybook后，添加辅助功能附件将非常简单。

First, install the add-on:

首先，安装附加组件：

npm install @storybook/addon-a11y --save-dev

Then add this line to your addons.js file in your storybook config directory:

然后将此行添加到您的故事书配置目录中的addons.js文件中：

import '@storybook/addon-a11y/register';

And lastly, add this line in your Storybook config.js file to automatically add the accessibility panel to all components:

最后，在您的Storybook config.js文件中添加以下行，以自动将可访问性面板添加到所有组件：

addDecorator(withA11y);

When you run Storybook now, you should now see the accessibility panel (see a live version here):

现在运行Storybook时，现在应该看到可访问性面板( 在此处查看实时版本 )：

As a side note - you can control the order of the tabs in your add-ons panel based on the order that you import add-ons into your addons.js file, if you want to have the accessibility panel display by default, make sure it is the first line in your addons.js.

附带说明-您可以根据将加载项导入addons.js文件的顺序来控制加载项面板中选项卡的顺序，如果要默认显示可访问性面板，请确保这是addons.js的第一行。

结语 (Wrap up)

If you didn't follow along with the setup or just want to get a new project setup quickly with this workflow, checkout the gatsby-starter-accessibility Gatsby starter!

如果您不遵循安装程序，或者只是想通过此工作流程快速获得新的项目设置，请签出gatsby-starter-accessibility Gatsby启动器！

You can create a new Gatsby site with all the configuration I described above out-of-the box with this single line in your terminal:

您可以直接在终端中使用以下单行代码创建具有上述所有配置的新Gatsby站点：

npx gatsby new my-accessible-project https://github.com/benjamingrobertson/gatsby-starter-accessibility

Or you can checkout the specific configuration in the repo.

或者，您可以在仓库中签出特定的配置。

Whether you ran through all the steps above or use with the starter, you'll have the following features set up in your Gatsby / React project:

无论您执行上述所有步骤还是与启动程序一起使用，您都将在Gatsby / React项目中设置以下功能：

in-editor reporting of accessibility errors
编辑器中的可访问性错误报告
a pre-commit hook for preventing accessibility errors from getting into the repository
预提交挂钩，用于防止可访问性错误进入存储库
browser console reporting of accessibility errors during development, with links to info on how to resolve the errors
浏览器控制台报告开发过程中的可访问性错误，并提供有关如何解决错误的信息的链接
a component library with built-in accessibility testing so all project stakeholders can hold the team accountable for accessibility issues
具有内置可访问性测试的组件库，因此所有项目涉众可以使团队对可访问性问题负责

On a complex project with many team members and moving parts, automating accessibility testing will help save time to make sure you can pay more attention to the accessibility tasks that can't be caught by automated tests.

在具有许多团队成员和活动部件的复杂项目中，自动化可访问性测试将帮助节省时间，以确保您可以更加关注自动测试无法捕获的可访问性任务。

Beyond that, tools like this can really help developers level up their accessibility knowledge.

除此之外，这样的工具确实可以帮助开发人员提高其可访问性知识。

I know it's helped me--I hope it helps your team too!

我知道这对我有所帮助-希望对您的团队也有所帮助！

Want to dive deeper into building accessible websites? Join my free email course: ? Common accessibility mistakes and how to avoid them. 30 days, 10 lessons, 100% fun! ? Sign up here!

想更深入地建设可访问的网站吗？ 加入我的免费电子邮件课程： 常见的可访问性错误以及如何避免它们。 30天，10节课，100％的乐趣！ ？ 在这里注册 ！