使用 react-axe 和 eslint-plugin-jsx-a11y 進行無障礙功能稽核

React 網站必須可供存取,才能採用漸進式網頁。在開發期間進行無障礙性稽核,找出並解決任何問題,再將應用程式推送至正式環境。

react-axe 是一個程式庫,可稽核 React 應用程式,並將任何無障礙問題記錄到 Chrome 開發人員工具主控台。這項工具會使用開放原始碼的 axe 測試程式庫,標示任何問題及其嚴重程度。

eslint-plugin-jsx-a11y 是 ESLint 外掛程式,可直接在 JSX 中識別並強制執行多項無障礙規則。搭配使用可測試最終算繪 DOM 的工具 (例如 react-axe),即可找出並修正網站上的無障礙問題。

這種報表有哪些優點?

您必須建立所有使用者 (包括身障人士) 都能存取的網站。使用 react-axeeslint-plugin-jsx-a11y 等無障礙稽核程式庫,您就能在建構應用程式時找出無障礙問題,並在正式發布前加以修正。

使用 eslint-plugin-jsx-a11y

React 已支援在 JSX 語法中編寫可存取的 HTML 元素。舉例來說,請使用 htmlFor 屬性 (而非 for),為 React 元件中的表單元素新增標籤。

<input id="promo" type="checkbox">
<label htmlFor="promo">Receive promotional offers?</label>

React 無障礙功能說明文件涵蓋在 React 元件中處理無障礙功能問題的細微差異。為方便您找出這些問題,Create React App (CRA) 包含 eslint-plugin-jsx-a11y 外掛程式。

如要啟用 CRA 提供的預先設定 linting,請按照下列步驟操作:

  1. 為程式碼編輯器安裝 ESLint 外掛程式
  2. 在專案中新增 .eslintrc.json 檔案
{
 
"extends": "react-app"
}

設定完成後,您就能找出常見的無障礙問題。

Linter 中的圖片無障礙警告

如要檢查更多無障礙規則,請修改 .eslintrc.json 以納入所有外掛程式建議的規則:

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

如要套用更嚴格的規則子集,請切換至嚴格模式:

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

Linter 中的標籤無障礙錯誤

專案說明文件提供建議模式和嚴格模式的差異資訊。

使用 react-axe

eslint-plugin-jsx-a11y 可協助您找出 JSX 中的任何無障礙存取問題,但不會測試任何最終 HTML 輸出內容。react-axe 程式庫會在 Deque Labs 的 axe-core 測試工具周圍新增 React 包裝函式,以便進行測試。

  1. 將程式庫安裝為開發依附元件: bash npm install --save-dev react-axe
  2. index.js 中初始化模組: js if (process.env.NODE_ENV !== 'production') { import('react-axe').then(axe => { axe.default(React, ReactDOM, 1000); ReactDOM.render(<App />, document.getElementById('root')); }); } else { ReactDOM.render(<App />, document.getElementById('root')); }

動態匯入會在轉譯及啟動根 App 元件前,載入程式庫 (只要該程式庫未在實際運作環境中)。這可確保在不需要時,不會將其納入最終的正式版套件。

在開發期間執行應用程式時,問題會直接顯示在 Chrome 開發人員工具控制台上。

Chrome 開發人員工具中的 React Axe

每項違規也會指派嚴重性等級。這些層級如下:

  • 未成年人
  • 嚴重
  • 最高

結論

在工作流程的早期納入無障礙性稽核,以便在建構 React 應用程式時找出問題。請使用 eslint-plugin-jsx-a11y 在檢查工作流程中加入無障礙性檢查。CRA 已包含這項功能,但您可以切換至建議或嚴格模式。

除了本機開發測試之外,您也可以在應用程式中加入 react-axe,以便找出最終轉譯 DOM 的任何問題。請勿將其納入正式版套件。