如果無法存取你的 React 網站,就無法漸進式。在開發期間進行稽核可協助您發現任何問題。
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 提供的預先設定程式碼檢查功能:
- 為程式碼編輯器安裝適當的 ESLint 外掛程式
- 在專案中新增
.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 開發人員工具主控台會顯示問題。
系統也會針對每個違規事項指派嚴重性等級。這些等級包括:
- 輕微
- 中
- 嚴重
- 最高
結語
- 如要使用 React 建構網站,請盡早在工作流程中納入無障礙功能稽核,在建構元件時找出問題。
- 使用
eslint-plugin-jsx-a11y
在 Lint 工作流程中加入無障礙功能檢查CRA 已隨附 CRA,但可以切換為建議或嚴格模式。 - 除了本機開發測試外,請在應用程式中加入
react-axe
,找出最終轉譯 DOM 的任何問題。但不要加入正式版套件中。