はじめに
現在開発中のWebアプリが、アクセシビリティ基準に準拠しているのか気になったので、実際にチェックしてみました。
利用ツール
今回は、ブラウザ拡張ツールの axe DevTools（アックス）を追加します。
ほかにもFigmaプラグインやE2Eテストがありますが、お手軽ですぐに利用できるブラウザ拡張ツールを使います。
axe DevToolsの使い方
DevTools を開き、[>>] をクリックします。
[axe DevTools] をクリックすると、ツールが表示されます。
試してみた
早速実行してみます。
深刻なエラーが15件も表示されました。
要素のコントラスト比（4.5 : 1）で指摘を受けています。
自分では「見やすい」と思っていても、基準から外れていることになります。
綺麗な色使いよりも、以下の点を考慮する必要があります。
- ✅ 色弱の人でも区別できるか
- ✅ 屋外など眩しい環境でも読めるか
- ✅ 小さい画面・小さい文字でも潰れないか
修正後、再度チェック
「ログアウト」文字の色を、text-red-500 から text-red-700 に変更しました。
axe DevToolsを再実行します。
結果、問題の合計が15件から14件に減少し、ログアウトボタンの指摘は解消できました。
さいごに
アプリの要件次第では、アクセシビリティをどこまで担保するかは変わります。
ただしユーザーの多様な利用環境を考えると、設計段階から意識しておくことが大切だと感じました。
関連記事
実装の様子はこちら
