達成基準 1.3.1 の失敗例 - セマンティックな情報を伝えるコンテンツに presentation ロールを使用している

達成方法に関する重要な情報

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

HTML 及び XHTML

これは達成基準 1.3.1: 情報及び関係性 (失敗) に関する達成方法である。

解説

この失敗例は、presentation の役割 (role) が情報又はコンテンツの関係性を伝達することを目的とする要素に適用されるときに起こる。table のような要素はセマンティックなマークアップによってコンテンツがもつ情報を伝達することができる。一方 WAI-ARIA の presentation のロールは、アクセシビリティ API からコンテンツのセマンティックな情報を抑制し、利用者への情報の伝達をユーザエージェントが行わないよう意図されている。presentation ロールをセマンティックな情報を伝達するべきコンテンツに用いるのは利用者のコンテンツの理解を妨げるだろう。

事例

例 1

この例では、表のデータは role=presentation でマークアップされている。そのようなレイアウトテーブルのデザインのマークアップに関わらず、データテーブルはセマンティックな情報を維持する必要がありそれゆえ role=presentation でマークアップされるべきではない。

コード例:

<table role="presentation">
   <caption>Fruits and their colors</caption>
   <tr>
     <th>Name</th>
     <th>Color</th>
   </tr>
   <tr>
    <td scope="row">banana</td>
    <td>yellow</td>
   </tr>
   <tr>
    <td scope="row">orange</td>
    <td>orange</td>
   </tr>
  </table>
                            

参考リソース

参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。

検証

手順

  1. セマンティックなマークアップを通じて情報、構造又は関係性を伝える要素かどうかを確認する。
  2. 要素が role="presentation" 属性を持っている。

期待される結果

  • #2 の結果が真である場合、この失敗条件は適用され、コンテンツは達成基準の失敗となる。