WCAG 2.0 達成方法集

Skip to Content (Press Enter)

-

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

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

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.0 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.0 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

HTML 及び XHTML

これは、次の達成基準に関連する失敗例である:

解説

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

事例

失敗例 1:

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

例:


<table role="presentation">
   <caption>フルーツとその色</caption>
   <tr>
     <th>名称</th>
     <th>色</th>
   </tr>
   <tr>
    <td scope="row">バナナ</td>
    <td>黄色</td>
   </tr>
   <tr>
    <td scope="row">オレンジ</td>
    <td>オレンジ</td>
   </tr>
  </table>
                            

参考リソース

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

検証

手順

  1. セマンティックなマークアップを通じて情報、構造又は関係性を伝える要素かどうかを確認する

  2. 要素が role="presentation" 属性を持っている

期待される結果