アクセシビリティ修正
対話要素、フォーム、dialog、状態通知を監査し、関係のないUIを作り替えずに修正する。 native HTMLで解決できる場合はARIAを追加しない。
監査の順序
- accessible name
- キーボード操作
- フォーカスとdialog
- HTMLの意味構造
- フォームとエラー
- 状態通知
- コントラストと非色覚的な手がかり
- mediaとmotion
各指摘には対象箇所、利用者への影響、具体的な修正を含める。
名前を付ける
- すべての操作要素へ支援技術が取得できる名前を付ける。
- iconだけのボタンは
aria-labelまたはaria-labelledbyで目的を示す。 input、select、textareaは可視labelと関連づける。- link textは移動先または目的を単独で理解できる文にする。
- decorativeな画像とiconは読み上げ対象から外す。
キーボードとフォーカス
- 操作には
button、移動にはaを使う。 - すべての操作要素をTabで到達可能にする。
tabindexへ1以上を設定しない。- フォーカス表示を削除せず、背景に対して見える形にする。
- hoverでだけ現れる操作には、focusとtouchの経路も用意する。
- overlayは必要に応じてEscapeで閉じる。
dialogを扱う
- 開いている間はフォーカスをdialog内に保つ。
- 初期フォーカスを安全な要素へ移す。
- 閉じたら起点へ戻す。
- 背景を操作対象から外し、予期しないpage scrollを起こさない。
- 複雑なfocus管理は、検証済みのcomponent primitiveへ任せる。
意味構造を直す
- native elementをrole付き
divより優先する。 - 見出しlevelを飛ばさず、画面の構造を表す。
- listは
ulまたはolとliで表す。 - 表形式データにはheader cellとscopeを設定する。
- ARIA roleを使う場合は、そのroleに必須の属性と操作を実装する。
フォームと状態通知
- helper textとerrorをfieldへ関連づける。
- invalidなfieldへ
aria-invalidを設定する。 - error messageには問題と修正方法を書く。
- 重要なerrorは適切なlive regionで通知する。
- loadingには状態文または
aria-busyを使う。 - 展開操作には
aria-expandedと対象の関連を持たせる。 - toastだけを重大な情報の唯一の伝達経路にしない。
視覚とmedia
- 通常文、large text、icon、focus indicatorのcontrastを実画面で確認する。
- error、success、disabledを色だけで示さない。
- 意味を持つ画像には目的に合う代替文を付け、装飾画像は空の代替文にする。
- 発話を含む動画には必要なcaptionを用意する。
- 不要なmotionを減らす利用者設定を尊重する。
完了条件
- mouseを使わず主要flowを完了できる。
- focusの現在地が常に分かる。
- screen readerが操作名、状態、errorを取得できる。
- native semanticsで足りる箇所に重複ARIAがない。
- 変更が対象外のcomponentやUI libraryへ広がっていない。
出典
- [ibelick/ui-skills: fixing-accessibility](https://github.com/ibelick/ui-skills/tree/main/skills/fixing-accessibility)
- MIT License
- 本文は原文を日本語の監査・修正手順へ再構成した派生文書である。