サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「1.3.1 情報と関係性」Level Aの実装例と確認ポイント

greeden

WCAG 2.2の達成基準「1.3.1 情報と関係性」は、見た目で伝えている情報、構造、要素同士の関係を、支援技術でも把握できる形にするための基準です。
適合レベルはAです。

たとえば、文字を大きく太くしただけの見出しは、見た目では見出しだと分かっても、HTML上では通常の文章と区別できません。
見出し、リスト、データ表、フォームのラベルなどを役割に合うHTMLで表すと、スクリーンリーダーなどがページの構造を判断しやすくなります。

達成基準1.3.1が求めること

プログラムで解釈できるとは、情報の意味や要素同士の関係を、見た目だけでなくHTMLなどのコードから判別できる状態です。
見た目で示した関係をコードで表せない場合は、同じ内容をテキストで伝えます。

見た目で伝わる情報とHTMLで示す関係
対象 見た目だけに頼った状態 HTMLで示す内容
見出し 大きさや太字だけで区切る <h2>や<h3>で階層を示す
リスト 記号や改行だけで項目を並べる <ul>、<ol>、<li>でまとまりを示す
データ表 位置や罫線だけで行と列を対応させる 見出しセルとデータセルの関係を示す
フォーム 入力欄の近くに項目名を置くだけにする <label>と入力欄を関連付ける

セマンティックHTMLで構造を伝える

セマンティックHTMLは、見た目ではなく意味や役割に合うHTML要素を選ぶ書き方です。
基本的な考え方は、セマンティックHTMLの実装ポイントでも整理しています。

見出しは内容の階層に合わせる

見出しには<h1>から<h6>を使い、話題の親子関係を示します。
WordPressでは投稿タイトルがページの主見出しになるため、本文は<h2>から始めます。

<h2>ウェブアクセシビリティの基本</h2>
<p>ウェブアクセシビリティの目的を説明します。</p>
<h3>見出しの役割</h3>
<p>見出しが文書構造を伝える仕組みを説明します。</p>

見出しレベルは文字の大きさで選ばず、現在の節がどの見出しに属するかで選びます。
見た目の調整はCSSに任せます。

箇条書きはリスト要素で表す

手順のように順番に意味がある項目には<ol>、順番を問わない項目には<ul>を使います。
各項目は<li>で囲みます。

<ol>
  <li>HTMLの構造を確認する</li>
  <li>支援技術で内容を確認する</li>
  <li>見つかった問題を修正する</li>
</ol>

データ表は行と列の関係を示す

データ表では、<caption>で表の目的を示し、見出しセルに<th>を使います。
単純な表では、scope='col'またはscope='row'によって見出しが対応する方向を明確にできます。

<table>
  <caption>達成基準の例</caption>
  <thead>
    <tr>
      <th scope='col'>基準番号</th>
      <th scope='col'>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.3.1</td>
      <td>情報と関係性をプログラムで解釈できるようにする</td>
    </tr>
  </tbody>
</table>

フォームの項目名と入力欄を結び付ける

項目名が入力欄の近くに表示されているだけでは、コード上の関係は明確になりません。
<label>のfor属性と入力欄のid属性に同じ値を指定します。

<label for='name'>名前</label>
<input type='text' id='name' name='name'>

補足説明を含むフォームの設計は、フォームのラベルと説明を実装する方法で詳しく確認できます。

ARIAはHTMLの意味を補うために使う

ARIAは、HTMLだけでは十分に表しにくい役割や状態などを支援技術へ伝えるための属性群です。
まず役割に合うHTML要素を使い、それでも不足する情報をARIAで補います。

たとえば、ナビゲーションの目的を名前で区別したい場合は、<nav>にaria-labelを追加できます。

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

<label>で関連付けられるフォーム項目に、理由なくARIAだけを足す必要はありません。
標準のHTMLで表せる関係は、標準の要素と属性で示します。

色や見た目だけに情報を任せない

達成基準1.3.1の中心は、情報の構造と関係性をコードまたはテキストで伝えることです。
その確認と併せて、色、位置、文字装飾だけで意味を伝えていないかも点検します。

たとえば「赤字の項目は必須」とだけ説明すると、色の違いを利用できない状況では必須項目を判断できません。
ラベルに「必須」と明記し、入力欄にも対応する属性を指定します。

<label for='email'>メールアドレス（必須）</label>
<input type='email' id='email' name='email' required>

実装後の確認ポイント

  1. 見出しだけを順に読んでも、ページの話題と階層を把握できるか。
  2. 箇条書きが、記号や改行ではなくリスト要素で表されているか。
  3. データ表に目的を示す説明があり、見出しセルとデータセルの関係が分かるか。
  4. フォームの各入力欄に、コード上で関連付けられた項目名があるか。
  5. HTMLの並び順で読んだときも、内容のつながりが自然か。
  6. 標準のHTMLで表せる役割を、不要なARIAで置き換えていないか。
  7. 色、位置、文字の大きさを取り除いても、必要な意味がテキストまたは構造から分かるか。

コードの確認だけで終わらせず、キーボード操作やスクリーンリーダーによる確認も組み合わせると、見た目では気付きにくい関係の不足を見つけやすくなります。

情報と関係性を伝える実装の要点

達成基準1.3.1への対応は、画面を見たときに分かる関係を、見た目を利用しない人にも同じように伝える作業です。
まず見出し、リスト、表、フォームを点検すると、修正箇所を具体的に洗い出せます。

当社では、ウェブアクセシビリティの導入を支援するUUU ウェブアクセシビリティを提供しています。
サイト全体のアクセシビリティ改善を検討している方は、サービスの詳細をご覧ください。

モバイルバージョンを終了