為什么可達(dá)性？

Web可訪問(wèn)性（也稱為a11y）是設(shè)計(jì)和創(chuàng)建每個(gè)人都可以使用的網(wǎng)站。輔助功能支持對(duì)于允許輔助技術(shù)解釋網(wǎng)頁(yè)是必需的。

React完全支持構(gòu)建可訪問(wèn)的網(wǎng)站，通常使用標(biāo)準(zhǔn)的HTML技術(shù)。

標(biāo)準(zhǔn)和準(zhǔn)則

WCAG

網(wǎng)頁(yè)內(nèi)容無(wú)障礙指南提供了創(chuàng)建可訪問(wèn)網(wǎng)站的指導(dǎo)方針。

以下WCAG清單提供了一個(gè)概述：

• 來(lái)自Wuhcag的WCAG清單

• 來(lái)自WebAIM的WCAG清單

• A11Y項(xiàng)目的清單

WAI-ARIA

網(wǎng)頁(yè)倡議-無(wú)障礙富互聯(lián)網(wǎng)應(yīng)用程序文檔中包含用于構(gòu)建完全訪問(wèn)的JavaScript控件技術(shù)。

請(qǐng)注意，aria-*JSX完全支持所有HTML屬性。盡管React中的大多數(shù)DOM屬性和屬性都是camelCased的，但這些屬性應(yīng)該是小寫的：

<input
  type="text" 
  aria-label={labelText}
  aria-required="true"
  onChange={onchangeHandler}
  value={inputValue}
  name="name"/>

可訪問(wèn)表單

Labeling

每個(gè)HTML表單控件（例如<input>和<textarea>）都需要被標(biāo)記為可訪問(wèn)。我們需要提供也向屏幕閱讀器公開(kāi)的描述性標(biāo)簽。

以下資源向我們展示了如何執(zhí)行此操作：

• W3C向我們展示了如何標(biāo)注元素

• WebAIM向我們展示了如何給元素添加標(biāo)簽

• Paciello集團(tuán)解釋可訪問(wèn)的名稱

雖然這些標(biāo)準(zhǔn)的HTML實(shí)踐可以直接在React中使用，但請(qǐng)注意，該for屬性是按照htmlForJSX 編寫的：

<label htmlFor="namedInput">Name:</label><input id="namedInput" type="text" name="name"/>

通知用戶錯(cuò)誤

所有用戶都需要理解錯(cuò)誤情況。以下鏈接向我們展示了如何將錯(cuò)誤文本展示給屏幕閱讀器：

• W3C演示用戶通知

• WebAIM查看表單驗(yàn)證

焦點(diǎn)控制

確保您的Web應(yīng)用程序只能通過(guò)鍵盤完全操作：

• WebAIM討論鍵盤輔助功能鍵盤焦點(diǎn)和焦點(diǎn)outlineKeyboard焦點(diǎn)是指DOM中的當(dāng)前元素，該元素被選為接受來(lái)自鍵盤的輸入。我們將它視為與以下圖像中顯示的焦點(diǎn)輪廓類似的焦點(diǎn)輪廓：

僅使用可刪除此輪廓的CSS，例如通過(guò)設(shè)置outline: 0，如果您將其替換為另一個(gè)焦點(diǎn)輪廓實(shí)現(xiàn)。跳過(guò)所需內(nèi)容的機(jī)制提供機(jī)制允許用戶跳過(guò)應(yīng)用程序中的導(dǎo)航部分，因?yàn)檫@有助于加速鍵盤導(dǎo)航。跳過(guò)鏈接或跳過(guò)導(dǎo)航鏈接是隱藏的導(dǎo)航鏈接，只有當(dāng)鍵盤用戶與網(wǎng)頁(yè)進(jìn)行交互時(shí)才會(huì)顯示鏈接。使用內(nèi)部頁(yè)面錨點(diǎn)和一些樣式，它們非常容易實(shí)現(xiàn)：

• WebAIM  - 跳過(guò)導(dǎo)航鏈接

同樣，使用地標(biāo)元素和角色（例如<main>和<aside>）來(lái)劃分頁(yè)面區(qū)域，因?yàn)檩o助技術(shù)允許用戶快速導(dǎo)航到這些部分。

閱讀更多關(guān)于使用這些元素來(lái)增強(qiáng)可訪問(wèn)性的信息：

• Deque University  -  HTML 5和ARIA地標(biāo)以編程方式管理焦點(diǎn)我們的React應(yīng)用程序在運(yùn)行時(shí)不斷修改HTML DOM，有時(shí)會(huì)導(dǎo)致鍵盤焦點(diǎn)丟失或設(shè)置為意外元素。為了修復(fù)這個(gè)問(wèn)題，我們需要以正確的方向以編程方式推動(dòng)鍵盤焦點(diǎn)。例如，通過(guò)將鍵盤焦點(diǎn)重置為在該模式窗口關(guān)閉之后打開(kāi)模式窗口的按鈕.Mozilla開(kāi)發(fā)人員網(wǎng)絡(luò)將查看此內(nèi)容并描述我們?nèi)绾螛?gòu)建鍵盤可導(dǎo)航的JavaScript小部件。為了在React中設(shè)置焦點(diǎn)，我們可以使用Refs到組件。使用這個(gè)，我們首先在組件類的JSX中創(chuàng)建一個(gè)ref元素：render（）{//使用`ref`回調(diào)來(lái)存儲(chǔ)引用文本在實(shí)例字段中輸入DOM //元素（例如，this.textInput）。return（<input type =“text”ref = {（input）=> {this.textInput = input;}} />）; }然后，我們可以在需要時(shí)將其聚焦在我們的組件的其他地方：focus（）{//使用原始DOM API顯式地聚焦文本輸入this.textInput.focus（）; }一個(gè)很好的焦點(diǎn)管理例子就是反應(yīng)式分析模式。這是一個(gè)相當(dāng)罕見(jiàn)的完全無(wú)障礙模式窗口的例子。它不僅將初始焦點(diǎn)設(shè)置為取消按鈕（防止鍵盤用戶意外激活成功操作）并將模式中的鍵盤焦點(diǎn)陷入困境，還將焦點(diǎn)重置回最初觸發(fā)模式的元素。注意：雖然這是非常重要的輔助功能，但它也是一種應(yīng)該謹(jǐn)慎使用的技術(shù)。用它修復(fù)鍵盤焦點(diǎn)流時(shí)，不要試圖預(yù)測(cè)用戶如何使用應(yīng)用程序。更復(fù)雜的小部件更復(fù)雜的用戶體驗(yàn)不應(yīng)該意味著更難訪問(wèn)。盡管通過(guò)盡可能接近HTML進(jìn)行編碼最容易實(shí)現(xiàn)可訪問(wèn)性，但即使是最復(fù)雜的小部件也可以被無(wú)縫地編碼。我們需要知識(shí)ARIA角色以及ARIA國(guó)家和地產(chǎn)。這些工具箱充滿了JSX完全支持的HTML屬性，使我們能夠構(gòu)建完全可訪問(wèn)的，功能強(qiáng)大的React組件。每種類型的小部件都有一個(gè)特定的設(shè)計(jì)模式，并且希望用戶和用戶代理以某種方式運(yùn)行：

• WAI-ARIA創(chuàng)作實(shí)踐 - 設(shè)計(jì)模式和小工具

• Heydon Pickering  -  ARIA示例

• 包容性組件

其他要點(diǎn)

設(shè)置語(yǔ)言

當(dāng)屏幕閱讀器軟件使用它來(lái)選擇正確的語(yǔ)音設(shè)置時(shí)，請(qǐng)指明頁(yè)面文本的人類語(yǔ)言：

• WebAIM  - 文檔語(yǔ)言設(shè)置文檔標(biāo)題設(shè)置文檔<title>以正確描述當(dāng)前頁(yè)面內(nèi)容，因?yàn)檫@可以確保用戶始終了解當(dāng)前頁(yè)面上下文：

• WCAG  - 理解文檔標(biāo)題要求

我們可以使用React Document Title組件在React中進(jìn)行設(shè)置。

色彩對(duì)比

確保您網(wǎng)站上的所有可讀文本都具有足夠的色彩對(duì)比度，以保持低視力用戶的最大可讀性：

• WCAG  - 理解色彩對(duì)比要求

• 關(guān)于色彩對(duì)比的一切以及為什么你應(yīng)該重新思考它

• A11yProject  - 什么是色彩對(duì)比

手動(dòng)計(jì)算網(wǎng)站中所有案例的適當(dāng)顏色組合可能非常繁瑣，因此您可以使用Colorable來(lái)計(jì)算整個(gè)可訪問(wèn)的調(diào)色板。

下面提到的ax和WAVE工具都包括顏色對(duì)比測(cè)試，并將報(bào)告對(duì)比度誤差。

如果你想擴(kuò)展你的對(duì)比測(cè)試能力，你可以使用這些工具：

• WebAIM  - 顏色對(duì)比檢查器

• Paciello Group  - 色彩對(duì)比分析儀

開(kāi)發(fā)和測(cè)試工具

我們可以使用許多工具來(lái)協(xié)助創(chuàng)建可訪問(wèn)的Web應(yīng)用程序。

鍵盤

到目前為止，最簡(jiǎn)單也是最重要的檢查之一是測(cè)試整個(gè)網(wǎng)站是否可以與鍵盤一起使用和使用。做到這一點(diǎn)：

1. 拔出鼠標(biāo)。

2. 使用Tab和Shift+Tab瀏覽。

3. 使用Enter激活的元素。

4. 根據(jù)需要，使用鍵盤上的箭頭鍵與某些元素（如菜單和下拉菜單）進(jìn)行交互。

發(fā)展援助

我們可以直接在我們的JSX代碼中檢查一些輔助功能。智能感知IDE通常會(huì)為ARIA角色，狀態(tài)和屬性提供智能感知檢查。我們也可以訪問(wèn)以下工具：

eslint-plugin-jsx-a11y

eslint-插件- JSX-A11Y為ESLint插件提供了關(guān)于您的JSX訪問(wèn)性問(wèn)題，AST掉毛反饋。許多IDE允許您將這些發(fā)現(xiàn)直接集成到代碼分析和源代碼窗口中。

創(chuàng)建React App包含此插件并激活了一部分規(guī)則。如果您希望啟用更多可訪問(wèn)性規(guī)則，則可以.eslintrc使用以下內(nèi)容在項(xiàng)目的根目錄中創(chuàng)建一個(gè)文件：

{  "extends": ["react-app", "plugin:jsx-a11y/recommended"],  "plugins": ["jsx-a11y"]}

測(cè)試瀏覽器的可訪問(wèn)性

有許多工具可以在瀏覽器的網(wǎng)頁(yè)上運(yùn)行可訪問(wèn)性審計(jì)。請(qǐng)將它們與其他可訪問(wèn)性檢查結(jié)合使用，因?yàn)樗鼈冎荒軠y(cè)試HTML的技術(shù)可訪問(wèn)性。

aXe, aXe-core and react-axe

Deque Systems為您的應(yīng)用程序的自動(dòng)化和端對(duì)端可訪問(wèn)性測(cè)試提供了ax-core。該模塊包含Selenium的集成。

Accessibility Engine或ax，是構(gòu)建于其上的可訪問(wèn)性檢查器瀏覽器擴(kuò)展aXe-core。

您還可以使用react-ax模塊在開(kāi)發(fā)和調(diào)試時(shí)直接向控制臺(tái)報(bào)告這些可訪問(wèn)性結(jié)果。

WebAIM WAVE

網(wǎng)站可訪問(wèn)性評(píng)估工具是另一個(gè)可訪問(wèn)瀏覽器擴(kuò)展。

輔助功能檢查員和輔助功能樹(shù)

輔助功能樹(shù)是DOM樹(shù)的子集，其中包含每個(gè)DOM元素的可訪問(wèn)對(duì)象，這些元素應(yīng)該接觸輔助技術(shù)，例如屏幕閱讀器。

在某些瀏覽器中，我們可以輕松查看輔助功能樹(shù)中每個(gè)元素的輔助功能信息：

• 在Chrome中激活輔助功能檢查器

• 在OS X Safari中使用輔助功能檢查器

屏幕閱讀器

使用屏幕閱讀器進(jìn)行測(cè)試應(yīng)構(gòu)成您的輔助功能測(cè)試的一部分

請(qǐng)注意，瀏覽器/屏幕閱讀器組合很重要。建議您在最適合您選擇的屏幕閱讀器的瀏覽器中測(cè)試您的應(yīng)用程序。

Firefox中的NVDA

NonVisual Desktop Access或NVDA是一款廣泛使用的開(kāi)源Windows屏幕閱讀器。

請(qǐng)參閱以下有關(guān)如何最佳使用NVDA的指南：

• WebAIM  - 使用NVDA評(píng)估Web可訪問(wèn)性

• Deque  -  NVDA鍵盤快捷鍵

Safari中的VoiceOver

VoiceOver是Apple設(shè)備上的集成屏幕閱讀器。

有關(guān)如何激活和使用VoiceOver，請(qǐng)參閱以下指南：

• WebAIM  - 使用VoiceOver評(píng)估Web可訪問(wèn)性

• Deque  - 適用于OS X鍵盤快捷鍵的VoiceOver

• Deque  - 適用于iOS快捷鍵的VoiceOver

JAWS在Internet Explorer中

使用Speech或JAWS進(jìn)行工作訪問(wèn)是Windows上一種多用途的屏幕閱讀器。

請(qǐng)參閱以下關(guān)于如何最佳使用JAWS的指南：

• WebAIM  - 使用JAWS評(píng)估Web可訪問(wèn)性

• Deque  -  JAWS鍵盤快捷鍵

 ? 2013–2017 Facebook Inc.