WCAG 2.2 ガイドライン「1.3.1 情報と関係性」Level A について

はじめに

WCAG 2.2の「1.3.1 情報と関係性」は、情報、構造、関係性が適切にマークアップされ、支援技術（例：スクリーンリーダー）によってプログラムで解釈可能であることを求めています。このガイドラインは、視覚障害を持つユーザーやその他の支援技術を使用する人々にとって、ウェブコンテンツをよりアクセスしやすくするための重要な基準です。

この記事では、HTML、CSS、JavaScriptを学び始めた方でも理解できるよう、具体例を交えてガイドラインの内容と実装方法をわかりやすく解説します。

1. 情報と関係性の重要性

多くのウェブコンテンツでは、情報は以下のような視覚的な方法で表現されます：

• 見出しや段落による構造化
• テーブルやリストによるデータ整理
• 色やフォントスタイルを用いた強調表示

これらが視覚的に伝わるだけでは、支援技術を利用するユーザーには伝わりません。正しいマークアップを使って情報の構造と関係性を明示することで、すべてのユーザーが内容を理解しやすくなります。

2. ガイドラインの要件と基本的な実装方法

a. セマンティックなHTMLの使用

HTMLには、情報の構造を明示するためのセマンティックな要素が用意されています。これらを適切に使うことが重要です。

見出しを正しく使う

見出し（<h1>～<h6>）を用いて文書の構造を階層的に整理します。

HTMLの例

<h1>ウェブアクセシビリティの基本</h1>
<h2>見出しの重要性</h2>
<p>見出しを正しく使うことで、コンテンツの構造が明確になります。</p>

ポイント

• 見出しは順序通りに使用します（例：<h1>の次は<h2>、その次に<h3>）。
• 見出しだけでページ全体の内容が把握できるようにします。

リストの適切な使用

リストは、順序付き（<ol>）と順序なし（<ul>）で適切にマークアップします。

HTMLの例

<h2>順序付きリストの例</h2>
<ol>
  <li>HTMLを学ぶ</li>
  <li>CSSを学ぶ</li>
  <li>JavaScriptを学ぶ</li>
</ol>

データテーブルの適切な使用

データテーブルでは、見出しセル（<th>）とデータセル（<td>）を正しく使い、関係性を明確にします。

HTMLの例

<table>
  <caption>ウェブアクセシビリティの基準</caption>
  <thead>
    <tr>
      <th>基準番号</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1.1</td>
      <td>非テキストコンテンツの代替テキストを提供</td>
    </tr>
    <tr>
      <td>1.3.1</td>
      <td>情報と関係性をプログラムで認識可能にする</td>
    </tr>
  </tbody>
</table>

ポイント

• <caption>を使ってテーブルの目的を明示します。
• 見出しセルには<th>を使用し、scope属性で列や行の関連性を指定します。

b. ARIA属性を使用して情報を補足

HTMLだけで十分に情報を伝えられない場合、ARIA（Accessible Rich Internet Applications）属性を使用します。

フォーム要素にラベルを関連付ける

HTMLの例

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

地域を特定するランドマーク

HTMLの例

<nav aria-label="主要ナビゲーション">
  <ul>
    <li><a href="/home">ホーム</a></li>
    <li><a href="/about">会社情報</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

c. 情報の伝達に色やスタイルに頼らない

情報が色やスタイルだけで伝達されないようにします。

不適切な例

<p style="color: red;">この項目は必須です。</p>

改善例

<p>この項目は<strong>必須</strong>です。</p>

3. 実装の注意点

• 情報の順序を考慮
  読み上げ順序が視覚的な順序と一致するように設計します。
• 視覚的な装飾と構造を分離
  情報の構造はHTMLで、視覚的な装飾はCSSで制御します。

4. アクセシビリティへのメリット

このガイドラインを守ることで、以下のようなユーザーに配慮できます：

• スクリーンリーダーユーザー：情報の構造や関係性が明確になることで、コンテンツの理解が容易になります。
• 認知障害を持つユーザー：適切な構造化により、情報を整理して理解できます。

まとめ

WCAG 2.2の「1.3.1 情報と関係性」は、コンテンツの情報と構造を正確にマークアップし、支援技術で解釈可能にするための重要な基準です。

• セマンティックなHTMLを活用し、情報の構造を明確にします。
• ARIA属性を使用して、補足情報を追加します。
• 色やスタイルに頼らず、テキストや構造で情報を伝えます。

初心者でもこのガイドラインを実践することで、すべてのユーザーに優しいウェブコンテンツを作成できます！

当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。