為什么可達(dá)性？

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

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

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

WCAG

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

以下WCAG清單提供了一個概述：

• 來自Wuhcag的WCAG清單

• 來自WebAIM的WCAG清單

• A11Y項目的清單

WAI-ARIA

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

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

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

可訪問表單

Labeling

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

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

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

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

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

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

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

通知用戶錯誤

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

• W3C演示用戶通知

• WebAIM查看表單驗證

焦點(diǎn)控制

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

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

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

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

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

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

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

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

• Heydon Pickering  -  ARIA示例

• 包容性組件

其他要點(diǎn)

設(shè)置語言

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

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

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

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

色彩對比

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

• WCAG  - 理解色彩對比要求

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

• A11yProject  - 什么是色彩對比

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

下面提到的ax和WAVE工具都包括顏色對比測試，并將報告對比度誤差。

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

• WebAIM  - 顏色對比檢查器

• Paciello Group  - 色彩對比分析儀

開發(fā)和測試工具

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

鍵盤

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

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

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

3. 使用Enter激活的元素。

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

發(fā)展援助

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

eslint-plugin-jsx-a11y

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

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

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

測試瀏覽器的可訪問性

有許多工具可以在瀏覽器的網(wǎng)頁上運(yùn)行可訪問性審計。請將它們與其他可訪問性檢查結(jié)合使用，因為它們只能測試HTML的技術(shù)可訪問性。

aXe, aXe-core and react-axe

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

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

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

WebAIM WAVE

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

輔助功能檢查員和輔助功能樹

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

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

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

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

屏幕閱讀器

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

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

Firefox中的NVDA

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

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

• WebAIM  - 使用NVDA評估Web可訪問性

• Deque  -  NVDA鍵盤快捷鍵

Safari中的VoiceOver

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

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

• WebAIM  - 使用VoiceOver評估Web可訪問性

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

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

JAWS在Internet Explorer中

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

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

• WebAIM  - 使用JAWS評估Web可訪問性

• Deque  -  JAWS鍵盤快捷鍵

 ? 2013–2017 Facebook Inc.