WCAG 1.3.1: 情報・関係性がプログラム的に解釈できるようになっているか確認する
見た目の大きさ、太字、配置、色だけに頼らず、見出し、リスト、表、フォームのラベル、注釈やエラーとの関係をHTMLやARIAでプログラム的に伝えます。
意図的な失敗例: 見た目だけで関係性を表現している
ラベルが入力欄に関連付かず、箇条書きも構造化されていません。
持ち物
・本人確認書類
・申請書
氏名
確認観点
- 見出しはh1〜h6を文書構造に沿って使い、文字サイズや装飾目的で見出しレベルを選ばない
- 箇条書きはul、ol、liを使い、中黒や改行だけでリストを表現しない
- 表データはtable、th、td、caption、scopeなどを使い、レイアウト目的のtable利用を避ける
- タブ、アコーディオンなど標準HTMLだけで表現しづらいUIは、必要に応じて適切なARIAで構造を補完する
人の判断が必要な例
- 見出し一覧でページ構成が自然に把握でき、見出しレベルが飛びすぎていないか確認する
- 見た目ではリストや表に見える情報が、HTML上でもリストや表として表現されているか確認する
- レスポンシブ表示で見た目の順序を変えても、HTML構造や読み上げ順が情報の関係性を損ねていないか確認する
補助ツール候補
- heading-order
- landmark-main-missing
- form-structure
- table-structure
- list-structure
- aria-hidden
生成メモ
- 支援技術を用いた実検証が必要