1.3.1 情報及び関係性

要件

視覚・聴覚・その他の感覚に依存せず、情報や関係性（構造）をプログラムで認識可能な方法で提供すること。

たとえば

• 見出しやリスト、表の構造
• ラベルやグルーピング
• 入力項目の関連性

などを見た目だけに依存せず、HTMLタグやARIA属性で明示する必要があります。

内容

対象となる情報

階層構造（見出し、リスト）、テーブルの行列関係、フォームのラベルと入力欄の関連性など

目的

支援技術（スクリーンリーダーなど）が情報構造を把握し、利用者に正しく伝えるため

対応方法

HTMLの意味論的マークアップ（例：<h1>〜<h6>、<ul>、<table>、<label>）、ARIA属性の活用など

具体例

良い例

<h2>製品一覧</h2>
<ul>
  <li>肥料A</li>
  <li>肥料B</li>
</ul>

<form>
  <label for="name">お名前</label>
  <input type="text" id="name" name="name">
</form>

• 見出しは<h2>、リストは<ul><li>、フォームラベルは<label>で正しいマークアップがされている

悪い例（NG）

<p style="font-size: 24px; font-weight: bold;">製品一覧</p>
<p>・肥料A</p>
<p>・肥料B</p>

<p>お名前</p>
<input type="text" name="name">

• 見出しやリストが見た目で表現されているだけ
• スクリーンリーダーには構造が伝わらない

利点

視覚障害者支援

スクリーンリーダーが正しい構造を読み上げるため、情報を的確に理解可能

認知・学習障害のある方にも有効

明確な構造により、情報の整理や理解がしやすくなる

レスポンシブ対応が容易に

意味に基づいたマークアップは、CSSで柔軟にスタイル制御できる

メンテナンス性向上

構造が明示されているため、開発や更新時の工数削減や品質向上につながる

SEO対策にも貢献

検索エンジンにも構造が伝わりやすく、構造化データとして活用可能

実装のヒント

• セクションの区切りは<section>, <article>, <aside>, <nav>を適切に使用
• 表形式のデータは<table> + <thead>, <tbody>, <th>で構造化
• ラベルと入力欄の紐づけは<label for=”id”>を使用（ARIA属性aria-labelledbyも有効）
• 装飾目的のdivやspanを多用せず、意味のあるHTMLタグを使用することが重要

一覧に戻る