アクセシビリティテスト: color-contrastとfocus

CSSは、色のコントラスト、フォーカスインジケーターの可視性、要素の表示（display:noneはアクセシビリティツリーから要素を削除します）、読み上げ順序（flexboxのorderによる視覚的な並べ替えとDOMの順序の違い）を制御します。CSSの選択は、障害のあるユーザーがインターフェースを利用できるかどうかに直接影響します。

WCAG 2.1 AAでは、通常のテキストに4.5:1、大きなテキスト（太字で18px以上、または通常の太さで24px以上）に3:1のコントラスト比が必要です。AAAでは、それぞれ7:1と4.5:1が必要です。これらの比率は、前景のテキストカラーの輝度と背景色の輝度を比較したものです。

DevToolsで任意のテキスト要素をクリックし、Stylesパネルを開きます。カラースウォッチにコントラスト比のバッジが表示されます。チェックマークは合格、Xは不合格を示します。カラーピッカーには、色のグラデーション上にAA/AAAのしきい値の線が表示されます。

axe-core、Lighthouse、Pa11yは、すべてのテキスト要素のコントラスト比を自動的に監査します。開発中に@axe-core/reactとともにaxe-coreを実行すると、ブラウザのコンソールでリアルタイムにコントラストの警告を確認できます。

:focusに対するCSSのoutline: noneやoutline: 0は、ブラウザのデフォルトのフォーカスリングを削除し、キーボード操作を見えなくします。これは重大なアクセシビリティ上の問題です。フォーカスインジケーターを完全に削除するのではなく、カスタムの視認できるフォーカススタイルに置き換えてください。

:focusは、マウスクリックを含むすべてのフォーカスイベントに適用されます。そのため、クリック時にも目立つリングが表示され、デザイナーに好まれないことがあります。:focus-visibleは、ブラウザがキーボード操作中であると判断した場合にのみ適用されます。これにより、マウスクリック時には表示せず、キーボードユーザーにはフォーカスリングを表示できます。

WCAG 2.2では、達成基準2.4.11（フォーカスの外観AA）が導入されています。フォーカスインジケーターには、隣接する色に対して少なくとも3:1のコントラストがあり、コンポーネントの外周を囲んでいる必要があります。カスタムフォーカススタイルは、存在するだけでなく、これらの要件を満たす必要があります。

Windowsのハイコントラストモードでは、CSSの色がユーザー定義のシステムカラーで上書きされます。@media (forced-colors: active)を使って、ハイコントラストモードでも機能する代替スタイルを提供してください。Windowsの設定 → アクセシビリティ → ハイコントラストでテストします。

WCAG 1.4.1では、情報を伝える唯一の手段として色を使用することが禁止されています。赤色に変わるだけのエラー状態は、この基準に違反します。アイコン、テキストラベル、パターン、下線などを色と組み合わせ、色に依存しない情報が常に存在するようにしてください。

WCAG 1.4.4では、コンテンツを失わずにテキストを200%まで拡大できることが求められます。WCAG 1.4.12では、テキスト間隔の上書き（letter-spacingやline-heightの増加）によってレイアウトが崩れないことが求められます。両方の要件を満たすため、タイポグラフィには相対単位（rem、em）を使用してください。

包括的なアクセシビリティCSSテストには、開発用のaxe DevToolsブラウザ拡張機能、自動パイプラインチェック用のLighthouse CI、コマンドラインによるページ監査用のPa11y、そしてフォーカスインジケーターの可視性と順序を確認するTab/Shift+Tabによる手動のキーボード操作テストが含まれます。

要素の:focus状態に対する最終的なCSSとしてoutline: noneを使ってはいけないのはなぜですか。

CSSのアクセシビリティテストでは、色のコントラスト比（AAでは最低4.5:1）、:focus-visibleを使った視認可能でWCAG 2.2に準拠したフォーカスインジケーター、情報を伝える唯一の手段として色を使わないこと、forced-colorsモードへの対応、拡大要件に対応する相対的なタイポグラフィ単位を確認します。自動ツールと手動のキーボードテストを組み合わせることで、包括的に検証できます。