JIS X 8341-3:2016 を読み解く 1.3.1 情報及び関係性の達成基準

JIS X 8341-3:2016 における、「1.3.1 情報及び関係性の達成基準」の原文は下記の通りです。

この達成基準は、視覚的、あるいは聴覚的な体裁によって暗黙的に伝えられている、情報やそれら情報の構造、関係性を、その提示形式が変更された場合でも保つようにすること ーわかりやすく言い換えれば、テキストだけでなくマークアップによっても適切に伝えることー を求めています。

例えば以下のような要件が考えられます。

• 見出しはh1〜h6要素で適切に構造化する
• リストはul要素やol要素、li要素を使用して適切にマークアップする
• テーブルはtable要素を使用し、th要素で見出しセルを表す
• フォーム部品はlabel要素によってラベル付けする

このようなマークアップにより、スクリーンリーダーなどの支援技術を使用している利用者にも、コンテンツの構造や関係性が正しく伝わることが期待されます。

適合レベルは「A」に分類されています。

簡単な解説

例えば、下記のようなリスト（箇条書き）があったとします。

このような記述は、視覚的に認知が可能な利用者にとっては、「・（黒丸）」の存在、それぞれのテキストが改行で区切られていることで、「箇条書きなんだな」ということが理解できると思います。

・ りんご
・ バナナ
・ オレンジ

しかし、視覚的に認知できない利用者にとって、このような記述だけでは箇条書きであることが伝わりにくくなります。そこで、下記のようにul要素を使用してマークアップすることで、支援技術にもこれらテキストが箇条書きであることが明示されます。

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

表組みに関する例もみてみましょう。

下記のような表組みのマークアップがあったとします。しかし、下記の表内の「商品名」「価格」というセルは、表組みにおける見出しとなるセルと考えられますが、これがマークアップ上は正しく伝わりません。

良くない例）表組みのマークアップ

<table>
  <tr>
    <td>商品名</td>
    <td>価格</td>
  </tr>
  <tr>
    <td>商品A</td>
    <td>1,000円</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>2,000円</td>
  </tr>
</table>

そこで、下記のようにマークアップを改善します。

改善例）表組みのマークアップ

<table>
  <tr>
    <th scope="col">商品名</th>
    <th scope="col">価格</th>
  </tr>
  <tr>
    <td>商品A</td>
    <td>1,000円</td>
  </tr>
  <tr>
    <td>商品B</td>
    <td>2,000円</td>
  </tr>
</table>

見出しとなるセルをth要素でマークアップし、さらにその見出しがどちらの方向のデータセルに対する見出しなのかを明示するためscope属性を併用します。

最後に簡単なフォームについての例をみてみましょう。

下記のようなフォームのマークアップがあったとします。しかし、下記のフォームでは、label要素が使用されているものの、入力コントロール（入力欄）との関連付けが行われていないため、支援技術にはラベルと入力コントロールの関係性が正しく伝わりません。また、required属性が付与されていることで入力がない場合はエラーとなりますが、入力が必須であることをテキストとして伝えていないため、わかりにくいことも問題です。

良くない例）フォームのマークアップ

<form>
  <label>氏名:</label>
  <input type="text" name="name" required>

  <label>メールアドレス:</label>
  <input type="email" name="email" required>

  <input type="submit" value="送信">
</form>

そこで、下記のようにマークアップを改善します。

改善例）フォームのマークアップ

<form>
  <p>※「必須」と記載のある項目はすべて入力が必要です。</p>

  <label for="name">氏名（必須）:</label>
  <input type="text" name="name" id="name" required>

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

  <input type="submit" value="送信">
</form>

まずlabel要素をfor属性を使用して入力コントロールと関連付けます。その上で、ラベル内に「必須」というテキストを含め、その入力コントロールが入力必須であることを明示します。

上記の例の様に、冒頭に簡単な文章を追加して、必須項目に関する説明を加えても良いでしょう。

できる限り、そのテキストがもつ意味と合致したHTML要素を選択すること、さらにフォームや表組みについてはラベルと入力コントロール、あるいは見出しセルとデータセルなど、情報同士の関係性が明確になるようにマークアップをすることが、この達成基準においては重要になります。