adb 多點(diǎn)觸碰

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中，或者無(wú)論您在互聯(lián)網(wǎng)上與其他開(kāi)發(fā)人員閑逛的任何地方，您都可能聽(tīng)到以下陳述的表達(dá)形式：

• React doesn't support accessibility
  React不支持可訪問(wèn)性
• React makes websites inaccessible
  React使網(wǎng)站無(wú)法訪問(wèn)
• People should write accessible HTML instead of React
  人們應(yīng)該編寫(xiě)可訪問(wèn)HTML而不是React
• React is ruining the internet
  React正在破壞互聯(lián)網(wǎng)

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.

有一種普遍的誤解，認(rèn)為JavaScript框架和Web可訪問(wèn)性沒(méi)有融合。 作為最大JavaScript庫(kù)之一，React通常是目標(biāo)。

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.

但是，在我的職業(yè)生涯中，我經(jīng)歷了有趣的經(jīng)歷，幾乎同時(shí)被介紹了可訪問(wèn)性和ReactJS。 我在React中發(fā)現(xiàn)了工具，該工具幫助我學(xué)到了很多關(guān)于可訪問(wèn)性的知識(shí)，而我從來(lái)沒(méi)有遇到過(guò)。

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編寫(xiě)的許多庫(kù)，網(wǎng)站，應(yīng)用程序等都是無(wú)法訪問(wèn)的，但我確實(shí)不同意ReactJS固有的某些特性，這些特性使開(kāi)發(fā)人員無(wú)法構(gòu)建無(wú)法訪問(wèn)的站點(diǎn)。 實(shí)際上，我喜歡 React生態(tài)系統(tǒng)中提供的可訪問(wèn)性工具，因此這篇文章實(shí)際上是關(guān)于React如何幫助您創(chuàng)建比以往任何時(shí)候都更多的可訪問(wèn)性網(wǎng)站。

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):

我將概述如何結(jié)合使用React linting工具，DOM審計(jì)和Storybook(組件庫(kù)工具)，為開(kāi)發(fā)人員提供真正支持性的可訪問(wèn)性環(huán)境-無(wú)論他們是可訪問(wèn)性專(zhuān)家還是剛?cè)腴T(mén)的人。 在這篇文章的最后，您將為Gatsby項(xiàng)目 (或其他React項(xiàng)目)配置以下內(nèi)容：

• in-editor reporting of accessibility errors
  編輯器中的可訪問(wèn)性錯(cuò)誤報(bào)告
• a pre-commit hook for preventing accessibility errors from getting into the repository
  一個(gè)預(yù)提交鉤子，用于防止可訪問(wèn)性錯(cuò)誤進(jìn)入存儲(chǔ)庫(kù)
• browser console reporting of accessibility errors during development, with links to info on how to resolve the errors
  瀏覽器控制臺(tái)報(bào)告開(kāi)發(fā)過(guò)程中的可訪問(wèn)性錯(cuò)誤，并提供有關(guān)如何解決錯(cuò)誤的信息的鏈接
• a component library with built-in accessibility testing so all ?project stakeholders can hold the team accountable for accessibility ?issues
  具有內(nèi)置可訪問(wèn)性測(cè)試的組件庫(kù)，因此所有項(xiàng)目涉眾可以使團(tuán)隊(duì)對(duì)可訪問(wèn)性問(wèn)題負(fù)責(zé)

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.

想立即開(kāi)始嗎？ 我使用內(nèi)置的所有這些輔助功能工具創(chuàng)建了一個(gè)Gatsby入門(mén)程序。簽出具有所有可用功能的gatsby-starter-accessibility存儲(chǔ)庫(kù) 。

工具與設(shè)定 (Tools and Setup)

eslint-plugin-jsx-a11y (eslint-plugin-jsx-a11y)

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!

如果您過(guò)去幾年寫(xiě)過(guò)JavaScript，那么您可能已經(jīng)使用或至少聽(tīng)說(shuō)過(guò)ESLint 。 如果沒(méi)有，現(xiàn)在是開(kāi)始它的好時(shí)機(jī)！

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的整理工具，可幫助您在編寫(xiě)代碼時(shí)捕獲格式和語(yǔ)法錯(cuò)誤。 大多數(shù)編輯器都內(nèi)置了某種整理配置，使您可以在編寫(xiě)代碼時(shí)查看編輯器中的錯(cuò)誤。

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

這對(duì)于使代碼保持一致非常有幫助，尤其是在有很多人在從事項(xiàng)目工作時(shí)。

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還具有一個(gè)非常健康的插件生態(tài)系統(tǒng)。 您可以包括特定于您正在使用JavaScript框架的規(guī)則(即React，Angular，Vue等)。 對(duì)于React，我通常使用eslint-plugin-react和真正有用的eslint-plugin-jsx-a11y 。 該插件使用這些規(guī)則 ，將代碼刪除已知的可訪問(wèn)性沖突。

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.

在編寫(xiě)代碼時(shí)運(yùn)行這些自動(dòng)化測(cè)試可以防止出現(xiàn)很多錯(cuò)誤 。 即使自動(dòng)可訪問(wèn)性測(cè)試僅捕獲大約20-30％的所有可訪問(wèn)性錯(cuò)誤 ，但在將代碼放入瀏覽器后立即將其納入代碼庫(kù)中，這可以節(jié)省時(shí)間，預(yù)算和精力，以進(jìn)行更多的手動(dòng)測(cè)試。

用法 (Usage)

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

這是您如何在React項(xiàng)目中開(kāi)始使用可訪問(wèn)性棉絨的方法。

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

首先，我們需要安裝必要的eslint軟件包：

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

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將在工作時(shí)使用ESLint，React和jsx-a11y插件推薦的規(guī)則。

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

您將要確保將您的編輯器設(shè)置為在編輯器中顯示棉絨錯(cuò)誤，以使其真正有用。

使用lint：staged添加一個(gè)預(yù)提交鉤子以防止代碼庫(kù)中的代碼無(wú)法訪問(wèn) (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.

現(xiàn)在，我們已經(jīng)設(shè)置了一些可訪問(wèn)性棉絨，希望該項(xiàng)目的每個(gè)人都在編輯器中啟用棉絨，以便他們?cè)诠ぷ鲿r(shí)可以看到任何錯(cuò)誤。

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.

但是您不能百分百確定每個(gè)人都將關(guān)注這個(gè)短毛絨。 即使是這樣，也可以輕松進(jìn)行快速更改，切換文件，并且不會(huì)出現(xiàn)任何錯(cuò)誤。

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.

作為防止無(wú)法訪問(wèn)的代碼進(jìn)入代碼庫(kù)的額外檢查，我們可以做的是添加一個(gè)預(yù)提交鉤子 ，該鉤子在每次開(kāi)發(fā)人員嘗試提交代碼時(shí)都會(huì)運(yùn)行我們?cè)谏厦嬖O(shè)置的lint。 如果發(fā)現(xiàn)了可訪問(wèn)性錯(cuò)誤，將顯示一條錯(cuò)誤消息，其中包含相關(guān)的掉毛錯(cuò)誤和錯(cuò)誤的位置，在開(kāi)發(fā)人員解決問(wèn)題之前，將阻止提交。

用法 (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:

設(shè)置預(yù)提交lint-staged鉤的最簡(jiǎn)單方法是使用lint-staged 包裝 。 在完成所有eslint配置之后(從第一步開(kāi)始)，在項(xiàng)目目錄中運(yùn)行以下命令：

npx mrm lint-staged

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.

此命令將安裝用于管理預(yù)提交掛鉤的husky 軟件包 ，并查看package.json以根據(jù)您的棉絨配置自動(dòng)設(shè)置預(yù)提交掛鉤。

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

根據(jù)倉(cāng)庫(kù)中現(xiàn)有的eslint配置，將所有JS文件刪除的簡(jiǎn)單配置如下所示(來(lái)自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:

您可以根據(jù)自己的喜好進(jìn)行調(diào)整。 例如，有時(shí)您希望將絨毛限制為某些目錄。 要僅對(duì)src目錄中的JS文件運(yùn)行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.

關(guān)于lint-staged偉大之處在于，它僅清除當(dāng)前提交中的文件。 如果由于某種原因在代碼庫(kù)的另一部分中存在一些預(yù)先存在的錯(cuò)誤，那么將不會(huì)阻止該提交-它只會(huì)阻止引入新的錯(cuò)誤。

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.

現(xiàn)在，關(guān)于linting設(shè)置的偉大之處在于，它將防止將很多錯(cuò)誤引入代碼庫(kù)中。 但是，它不能防止所有錯(cuò)誤。 某些錯(cuò)誤僅在將多個(gè)組件一起使用或來(lái)自某些內(nèi)容使用時(shí)才存在，并且只能在瀏覽器中捕獲。

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.

幸運(yùn)的是，我們也有解決方案。 Ax是Deque支持的用于自動(dòng)輔助功能測(cè)試的開(kāi)源引擎。 我首先通過(guò)使用斧頭真正有用的瀏覽器擴(kuò)展來(lái)熟悉斧頭，以測(cè)試瀏覽器中的各個(gè)頁(yè)面 。

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.

瀏覽器擴(kuò)展可訪問(wèn)性測(cè)試的問(wèn)題在于，它們通常僅在開(kāi)發(fā)完成后才運(yùn)行。 使用react-axe library ，您可以在開(kāi)發(fā)過(guò)程中在每個(gè)頁(yè)面上運(yùn)行自動(dòng)化的可訪問(wèn)性測(cè)試，因此開(kāi)發(fā)人員可以獲取有關(guān)可訪問(wèn)性問(wèn)題的實(shí)時(shí)反饋。 這有助于確保可訪問(wèn)性問(wèn)題永遠(yuǎn)不會(huì)進(jìn)入生產(chǎn)環(huán)境，并且還可以對(duì)可能不是可訪問(wèn)性專(zhuān)家的開(kāi)發(fā)人員進(jìn)行培訓(xùn)，以了解潛在的陷阱。

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

react-axe庫(kù)是ax引擎的易于使用的實(shí)現(xiàn)，專(zhuān)門(mén)用于React。

用法 (Usage)

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

這是開(kāi)始在Gatsby中使用react-axe的方法( 有人為此制作了一個(gè)Gatsby插件！ )：

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

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中的插件數(shù)組

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>:

現(xiàn)在，頁(yè)面呈現(xiàn)后，該插件會(huì)將所有可訪問(wèn)性錯(cuò)誤打印到瀏覽器控制臺(tái)。 這是一個(gè)示例，其中我在<h1>正下方放置了<h5> <h1> ：

?

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

開(kāi)發(fā)過(guò)程中，React ax將在控制臺(tái)中顯示可訪問(wèn)性錯(cuò)誤。

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.

您可以在控制臺(tái)的斧頭消息中看到它確定了我的標(biāo)題問(wèn)題：“標(biāo)題問(wèn)題只應(yīng)增加一個(gè)”作為中度問(wèn)題。 它還包括一個(gè)鏈接，了解更多關(guān)于為什么這是一個(gè)問(wèn)題，如何解決它： https://dequeuniversity.com/rules/axe/3.2/heading-order 。 最后，它會(huì)顯示引起問(wèn)題的特定元素，以便于識(shí)別。

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.

無(wú)論您是輔助功能初學(xué)者還是經(jīng)驗(yàn)豐富的專(zhuān)業(yè)人士，這種即時(shí)反饋都非常重要。 即時(shí)捕獲自動(dòng)化問(wèn)題可以為您提供更多帶寬，以專(zhuān)注于其他涉及更多的任務(wù)。

故事書(shū)和輔助功能 (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.

可訪問(wèn)性工作流程的最后一部分與組件驅(qū)動(dòng)的工作流程有關(guān) 。 對(duì)于React項(xiàng)目，我真的很喜歡使用Storybook來(lái)構(gòu)建和記錄我們的前端組件。

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是一個(gè)開(kāi)源工具，用于為React，Vue和Angular隔離開(kāi)發(fā)UI組件。 它使構(gòu)建令人驚嘆的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.

除了擁有一個(gè)不錯(cuò)的工作流程和UI外，Storybook還具有一個(gè)很棒的可訪問(wèn)性插件，該組件將一個(gè)面板添加到組件庫(kù)中的每個(gè)組件，以突出顯示可訪問(wèn)性問(wèn)題。

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

我們的故事書(shū)配置具有針對(duì)每個(gè)組件的內(nèi)置斧頭測(cè)試，以及故事書(shū)輔助功能附加組件提供的色盲模擬器。

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.

在后臺(tái)，該附件實(shí)際上還使用了斧頭進(jìn)行測(cè)試。 這真的很好，因?yàn)檫@意味著我們?cè)陂_(kāi)發(fā)中使用的測(cè)試與組件庫(kù)中使用的測(cè)試相同。 在組件庫(kù)中突出顯示錯(cuò)誤還可以幫助我們項(xiàng)目團(tuán)隊(duì)中的每個(gè)人在瀏覽庫(kù)時(shí)都可以訪問(wèn)它們，以進(jìn)行質(zhì)量檢查或設(shè)計(jì)靈感。

建立 (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的設(shè)置涉及更多，因此，如果您以前從未使用過(guò)Storybook，則可以簽出Storybook for React文檔以獲取通用的React設(shè)置。

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

如果要使Storybook與Gatsby一起運(yùn)行，請(qǐng)參閱Gatsby文檔中的Storybook的視覺(jué)測(cè)試 。

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

設(shè)置完Storybook后，添加輔助功能附件將非常簡(jiǎn)單。

First, install the add-on:

首先，安裝附加組件：

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

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

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

然后將此行添加到您的故事書(shū)配置目錄中的addons.js文件中：

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

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文件中添加以下行，以自動(dòng)將可訪問(wèn)性面板添加到所有組件：

addDecorator(withA11y);

addDecorator(withA11y);

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

現(xiàn)在運(yùn)行Storybook時(shí)，現(xiàn)在應(yīng)該看到可訪問(wèn)性面板( 在此處查看實(shí)時(shí)版本 )：

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.

附帶說(shuō)明-您可以根據(jù)將加載項(xiàng)導(dǎo)入addons.js文件的順序來(lái)控制加載項(xiàng)面板中選項(xiàng)卡的順序，如果要默認(rèn)顯示可訪問(wèn)性面板，請(qǐng)確保這是addons.js的第一行。

結(jié)語(yǔ) (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!

如果您不遵循安裝程序，或者只是想通過(guò)此工作流程快速獲得新的項(xiàng)目設(shè)置，請(qǐng)簽出gatsby-starter-accessibility Gatsby啟動(dòng)器！

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:

您可以直接在終端中使用以下單行代碼創(chuàng)建具有上述所有配置的新Gatsby站點(diǎn)：

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

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

Or you can checkout the specific configuration in the repo.

或者，您可以在倉(cāng)庫(kù)中簽出特定的配置。

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:

無(wú)論您執(zhí)行上述所有步驟還是與啟動(dòng)程序一起使用，您都將在Gatsby / React項(xiàng)目中設(shè)置以下功能：

• in-editor reporting of accessibility errors
  編輯器中的可訪問(wèn)性錯(cuò)誤報(bào)告
• a pre-commit hook for preventing accessibility errors from getting into the repository
  預(yù)提交掛鉤，用于防止可訪問(wèn)性錯(cuò)誤進(jìn)入存儲(chǔ)庫(kù)
• browser console reporting of accessibility errors during development, with links to info on how to resolve the errors
  瀏覽器控制臺(tái)報(bào)告開(kāi)發(fā)過(guò)程中的可訪問(wèn)性錯(cuò)誤，并提供有關(guān)如何解決錯(cuò)誤的信息的鏈接

• a component library with built-in accessibility testing so all ?project stakeholders can hold the team accountable for accessibility ?issues

  具有內(nèi)置可訪問(wèn)性測(cè)試的組件庫(kù)，因此所有項(xiàng)目涉眾可以使團(tuán)隊(duì)對(duì)可訪問(wèn)性問(wèn)題負(fù)責(zé)

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.

在具有許多團(tuán)隊(duì)成員和活動(dòng)部件的復(fù)雜項(xiàng)目中，自動(dòng)化可訪問(wèn)性測(cè)試將幫助節(jié)省時(shí)間，以確保您可以更加關(guān)注自動(dòng)測(cè)試無(wú)法捕獲的可訪問(wèn)性任務(wù)。

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

除此之外，這樣的工具確實(shí)可以幫助開(kāi)發(fā)人員提高其可訪問(wèn)性知識(shí)。

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

我知道這對(duì)我有所幫助-希望對(duì)您的團(tuán)隊(duì)也有所幫助！

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!

想更深入地建設(shè)可訪問(wèn)的網(wǎng)站嗎？ 加入我的免費(fèi)電子郵件課程： 常見(jiàn)的可訪問(wèn)性錯(cuò)誤以及如何避免它們 。 30天，10節(jié)課，100％的樂(lè)趣！ ？ 在這里注冊(cè) ！

翻譯自: https://www.freecodecamp.org/news/the-myth-of-inaccessible-react/

adb 多點(diǎn)觸碰

總結(jié)

以上是生活随笔為你收集整理的adb 多点触碰_无法触及的神话的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。