role="presentation"の役割は凄い。【WAI-ARIA】

WAI-ARIAのロールのモデルに文書構造があります。その文書構造の中にpresentationというのがあります。ちょこっとこのpresentationについて書かせていただきます。

role="presentation"

role="presentation"の意味は、仕様書からの引用ですが、下記のようになっています。

表現的なロール(role)を持ち、アクセシビリティAPIにマッピングする必要がない要素。このロール(role)の用途としては、要素がページの見た目を変えるために使われているが、その要素タイプによって示唆される機能的、構造的、またインタラクション上の重要な意味はない場合が挙げられる。

要するに、見ためのために設置している要素が対象ということになります。例えば、装飾目的の画像などです。下記に仕様書に載っていた使用事例を記述します。

  • 表現的なコンテンツの要素(スペーサーの画像、装飾的なグラフィック、クリアリングのための要素など)
  • CSSの"フック"となる付加的なマークアップとして使われている要素
  • レイアウトテーブル

表現的なコンテンツの要素

これは、すぐに理解できると思います。メインビジュアルなど装飾目的の画像等です。装飾目的の画像には、alt="" として、空の代替テキストを指定をしますが、こういう画像等が対象です。

<img src="image.png" role="presentation" alt="" />

CSSの"フック"となる付加的なマークアップとして使われている要素

「CSSの"フック"となる」というちょっと分かりづらい表現で書かれていますが、僕は、こういう解釈としています。

Web Designer Wallという非常に有名なブログがあります。多くの方が一度は見た事があると思います。このブログで数年前に、以下のようなエントリーがありました。

CSS Gradient Text Effect

今では、CSS3によってCSSだけでグラデーションを表現できるようになっていますが、当時は、グラデーションを表現するためには、画像を用意する必要があり、それをタイポグラフィで使うためには、完全に画像でやるしかありませんでした。

それをCSSのみでグラデーションの効果のあるテキストができるというテクニックが紹介され、当時は色んなブログで紹介されていました。

その表現のためのマークアップが下記のようになります。

<h1><span></span>CSS Gradient Text</h1>

グラデーションを表現するために、空のspan要素を入れているのが分かると思いますが、表現のために、文章構造上に意味の無いHTML要素を記述しています。これが「CSSの"フック"となる付加的なマークアップ」という解釈に近いと思っています。

この解釈が合っていれば、こういった場合にrole="presentation"を使います。

<h1><span role="presentation"></span>CSS Gradient Text</h1>

レイアウトテーブル

テーブルレイアウトのほうが馴染みがあるかもしれませんが、レイアウトテーブルはtable要素をレイアウトとして使う手法です。

今では、多くのデザイナーが忌み嫌うものですが、role="presentation"は、レイアウトテーブルに非常に効果を発揮すると感じました。レイアウトテーブルの場合には、下記のようにrole="presentation"を追加します。

<table role="presentation">
<tr>
<td>ヘッダー</td>
</tr>
<tr>
<td>メイン</td>
</tr>
<tr>
<td>フッター</td>
</tr>
</table>

レイアウトテーブルは、SEOやアクセシビリティを考えた時にマイナス要因だと言われていることから使われなくなってきたことでもあり、 また、複雑に入れ子になったようなレイアウトだとアクセシビリティの低下になるのは事実です。

レイアウトテーブルを使ってデザインをすることは無くなってきていると思いますが、まだレイアウトテーブルで作成するという案件はあったりすると思います。 しかし、レイアウトテーブルにrole="presentation"を追加することによって、アクセシビリティを低下させることがなくなります。role="presentation"は、以下のような効果があるとのことです。仕様書からの引用です。

テーブルがpresentationとマークされている場合、ユーザーエージェントは、table、td、th、trなどの要素をアクセシビリティAPIマッピングから取り除き、そのなかに入っている個々のテキスト要素だけを残すことができる。これにより、テーブルで示唆された構造的側面を無視してもよいことがユーザーエージェントに分かるようになるため、レイアウト目的でテーブルを使っても害がなくなる。

上記のことから複雑な入れ子になったレイアウトでもアクセシビリティの低下が防げるということになります。

案件によって、レイアウトテーブルでやらなければならない場合があったりするかと思いますが、こういった場合にtable要素にrole="presentation"を追加することによって、フルCSSで作成されたのと同じ効果をスクリーンリーダーを使っているユーザーは、得れるということになります。

最後に

これまでrole="presentation"は、装飾目的の要素が対象と思っていたのですが、レイアウトテーブルがこのような効果があるのかと、これがWAI-ARIAの力なのかと凄く感動した次第です。

レイアウトはCSSでやることにこしたことはありません。しかし、レイアウトテーブルで行う事になった場合には、role="presentation"を使うことによってアクセシビリティを低下させることがなくWebサイトができるということは非常に大きなことだと思いました。