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％的樂趣！ ？ 在這里注冊 ！