為什么可達性？

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

React完全支持構建可訪問的網(wǎng)站，通常使用標準的HTML技術。

標準和準則

WCAG

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

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

• 來自Wuhcag的WCAG清單

• 來自WebAIM的WCAG清單

• A11Y項目的清單

WAI-ARIA

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

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

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

可訪問表單

Labeling

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

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

• W3C向我們展示了如何標注元素

• WebAIM向我們展示了如何給元素添加標簽

• Paciello集團解釋可訪問的名稱

雖然這些標準的HTML實踐可以直接在React中使用，但請注意，該for屬性是按照htmlForJSX 編寫的：

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

通知用戶錯誤

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

• W3C演示用戶通知

• WebAIM查看表單驗證

焦點控制

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

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

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

• WebAIM  - 跳過導航鏈接

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

閱讀更多關于使用這些元素來增強可訪問性的信息：

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

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

• Heydon Pickering  -  ARIA示例

• 包容性組件

其他要點

設置語言

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

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

• WCAG  - 理解文檔標題要求

我們可以使用React Document Title組件在React中進行設置。

色彩對比

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

• WCAG  - 理解色彩對比要求

• 關于色彩對比的一切以及為什么你應該重新思考它

• A11yProject  - 什么是色彩對比

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

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

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

• WebAIM  - 顏色對比檢查器

• Paciello Group  - 色彩對比分析儀

開發(fā)和測試工具

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

鍵盤

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

1. 拔出鼠標。

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

3. 使用Enter激活的元素。

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

發(fā)展援助

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

eslint-plugin-jsx-a11y

eslint-插件- JSX-A11Y為ESLint插件提供了關于您的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)頁上運行可訪問性審計。請將它們與其他可訪問性檢查結合使用，因為它們只能測試HTML的技術可訪問性。

aXe, aXe-core and react-axe

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

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

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

WebAIM WAVE

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

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

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

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

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

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

屏幕閱讀器

使用屏幕閱讀器進行測試應構成您的輔助功能測試的一部分

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

Firefox中的NVDA

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

請參閱以下有關如何最佳使用NVDA的指南：

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

• Deque  -  NVDA鍵盤快捷鍵

Safari中的VoiceOver

VoiceOver是Apple設備上的集成屏幕閱讀器。

有關如何激活和使用VoiceOver，請參閱以下指南：

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

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

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

JAWS在Internet Explorer中

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

請參閱以下關于如何最佳使用JAWS的指南：

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

• Deque  -  JAWS鍵盤快捷鍵

 ? 2013–2017 Facebook Inc.