鴨のいいカモです

ここでアヒルの話題は出てきません。予めご了承下さい。

止むを得ずテーブルレイアウトするときはrole="presentation"

html5

止むを得ずテーブルレイアウトをすることになり、罪悪感でいっぱいだったところを、この一言が救ってくれました、というお話。

(もんどさん、いつもありがとうございます)

role="presentation"って何？

W3CのHTML5仕様 4.9 Tabular data — HTML5 によると、

Tables should not be used as layout aids. Historically, many Web authors have tables in HTML as a way to control their page layout making it difficult to extract tabular data from such documents. In particular, users of accessibility tools, like screen readers, are likely to find it very difficult to navigate pages with tables used for layout. If a table is to be used for layout it must be marked with the attribute role="presentation" for a user agent to properly represent the table to an assistive technology and to properly convey the intent of the author to tools that wish to extract tabular data from the document.

table要素はレイアウト目的で使うべきじゃないけども、仕方なく使う場合は、レイアウト目的ということをユーザエージェントヘ伝えるために、role="presentation"をつけてあげましょうね、ということです。

こんなのあったの…

ということでWAI-ARIAを見てみる。

Accessible Rich Internet Applications (WAI-ARIA) 1.1

An element whose implicit native role semantics will not be mapped to the accessibility API.

要素が持ってるアクセシビリティAPIにマッピングされなくなるんだそうです。

ユースケースを見てみると、

  • An element whose content is completely presentational (like a spacer image, decorative graphic, or clearing element);
  • An image that is in a container with the img role and where the full text alternative is available and is marked up with aria-labelledby and (if needed) aria-describedby;
  • An element used as an additional markup "hook" for CSS; or
  • A layout table and/or any of its associated rows, cells, etc.

あった、4つめ！

ということで、そんな行為を余儀なくされるときは、role="presentation"のことを思い出すと少し楽になりますよ、というお話でした。