structure

支援技術向けの構造

支援技術が解析、ナビゲートし、意味のある形で提示できるコンテンツ構造を構築します。設計した構造を、すべてのユーザーが体験できるようにします。

プロセス

ステップ 1：ドキュメントのアウトラインを定義する

heading-structure を使って、見出し階層を設計します。

• ページの目的を説明する H1 を 1 つ
• 主要なセクションには H2
• そのセクション内の小見出しには H3
• 確認：見出しだけを読めば、全体の内容が伝わりますか？

ステップ 2：ランドマークを特定する

支援技術がナビゲーションに使用するページ領域を割り当てます。

• banner — サイトのヘッダーとブランディング
• navigation — 主要および副次的なナビゲーション
• main — 主なコンテンツ領域
• complementary — サイドバーと関連コンテンツ
• contentinfo — フッター
• search — 検索機能
• form — 重要なフォーム（複数ある場合は aria-label で区別）

すべてのページに最低限、banner、navigation、main、contentinfo を含めます。

ステップ 3：画像とメディアを構造化する

alt-text-design を使って、すべての画像に代替テキストの方針を割り当てます。

• 装飾的：空の代替テキスト
• 機能的：操作内容を説明する代替テキスト
• 情報提供：情報を説明する代替テキスト
• 複雑：短い代替テキストと詳細な説明

ステップ 4：データを構造化する

table-accessibility を使って、すべてのテーブルについて以下を行います。

• 適切な scope を指定して見出しを割り当てる
• テーブルの内容を説明するキャプションを追加する
• 小さな画面でのレスポンシブ動作を計画する

ステップ 5：フォームを構造化する

form-labelling を使って、すべてのフォームについて以下を行います。

• すべての入力欄を表示されるラベルに関連付ける
• 関連するフィールドを fieldset/legend でグループ化する
• エラーメッセージの関連付けを計画する
• 必須フィールドの表示方針を定める

ステップ 6：読み上げ順を定義する

• DOM の順序が視覚的な順序と一致していることを確認する
• コンテンツは、上から下へ直線的に読み上げても意味が通るようにする
• コンテンツを DOM の順序から視覚的に並べ替える CSS は避ける
• Tab キーの移動順は読み上げ順に従うようにする

出力

以下を含む構造仕様を作成します。

• ドキュメントのアウトライン（見出し階層）
• ランドマークのマップ
• 画像の種類ごとの代替テキスト方針
• テーブル構造の仕様
• フォームのラベル付け仕様
• 読み上げ順の確認