透過 response-axe 和 eslint-plugin-jsx-a11y 進行無障礙稽核

如果無法存取你的 React 網站，就無法漸進式。在開發期間進行稽核可協助您發現任何問題。

Houssein Djirdeh

react-axe 是可稽核 React 應用程式的程式庫，會將任何無障礙功能問題記錄到 Chrome 開發人員工具控制台。這項工具會使用開放原始碼 axe 測試程式庫來標記任何問題和嚴重性。

eslint-plugin-jsx-a11y 是 ESLint 外掛程式，可直接在 JSX 中識別並強制執行多項無障礙規則。將這個 API 與可測試最終轉譯 DOM 的工具 (例如 react-axe) 搭配使用，可協助您找出並修正網站上的無障礙功能問題。

這種報表有哪些優點？

請務必建構一個網站，提供每位使用者存取內容的能力，不受使用者身心障礙或限制影響。在開發 React 應用程式的過程中，使用稽核程式庫 (例如 react-axe 和 eslint-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 適用的 eslint-plugin-jsx-a11y 外掛程式。

如何啟用 CRA 提供的預先設定程式碼檢查功能：

1. 為程式碼編輯器安裝適當的 ESLint 外掛程式
2. 在專案中新增 .eslintrc.json 檔案

{
  "extends": "react-app"
}

系統將顯示一些常見的無障礙功能問題。

如要檢查更多無障礙規則，請修改檔案，自動納入外掛程式的所有建議規則：

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

如果您希望獲得更嚴格的規則子集，請改用嚴格模式：

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

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

使用「Response-axe」(回應軸)

eslint-plugin-jsx-a11y 可協助您輕鬆找出 JSX 中的任何無障礙功能問題，但不會測試任何最終的 HTML 輸出。react-axe 是一個程式庫，藉由為 Deque Labs 的 axe-core 測試工具提供 React 包裝函式。

開始以開發依附元件的形式安裝程式庫：

npm install --save-dev react-axe

現在只需要初始化 index.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 開發人員工具主控台會顯示問題。

系統也會針對每個違規事項指派嚴重性等級。這些等級包括：

• 輕微
• 中
• 嚴重
• 最高

結語

1. 如要使用 React 建構網站，請盡早在工作流程中納入無障礙功能稽核，在建構元件時找出問題。
2. 使用 eslint-plugin-jsx-a11y 在 Lint 工作流程中加入無障礙功能檢查CRA 已隨附 CRA，但可以切換為建議或嚴格模式。
3. 除了本機開發測試外，請在應用程式中加入 react-axe，找出最終轉譯 DOM 的任何問題。但不要加入正式版套件中。