アクセシブルUIの10実装パターン

モーダルダイアログ

モーダルダイアログを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

アコーディオンを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

タブを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

メニューボタンを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

コンボボックスを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

カルーセルを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

ディスクロージャーを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

ツールチップを、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

フォーム検証を、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

データ表を、必須HTML・ARIA、キーボード操作、focus lifecycle、mobile、motion、実装後QAまで一続きで確認するパターンです。

How to read

Checkは検出条件と根拠、Patternは複合UIの操作契約、WCAGは達成基準との対応、Outputは引き継ぎ時に保持する情報、Guideは人が再現できる確認手順を担当します。似た検索意図を分け、各詳細ページから対応する基準と監査画面へ戻れる構造にしています。