概要
ARIA in HTML で main
のように暗黙的な ARIAセマンティックがある要素では、同じ意味を持つ role
属性が非推奨になったので、ゆくゆくは外していく流れ。だけど、今現在は古いブラウザの対応などがあるので、まだまだ role
属性は外せなさそう。
<main role=”main”> という記述が非推奨に
ミツエーリンクスさんのアクセシビリティBlog で、ARIA in HTML(日本語訳)というものの草案が4月14日に発表されたことを知りました。HTML5.1 において、WAI-ARIA をどのように使っていけばいいかが書かれている文書のようです。で、記事を読み進めていく中で気になった点が一つあったのでメモ。
しかし、ARIA in HTMLでは、制作者は暗黙のARIAセマンティックをrole属性などで指定すべきではない(SHOULD NOT)、また、指定することは推奨されない(NOT RECOMMENDED)ことであるとしています。つまり、<main role=”main”>ではなく<main> と記述することを推奨しています。
お!HTML5.1 では、暗黙的に ARIAセマンティックが規定されている要素に対して、それと同様の意味を持つ role
属性などを付けるのは非推奨になる流れのようです。引用した記事内では main
要素の例が挙げられています。では、<main role="main">
は <main>
と書くという話ですが、header
要素に role="banner"
をつけたり、footer
要素に role="contentinfo"
をつけるのも非推奨になるのでしょうか。
ARIA in HTML で確認
どの要素に対して、どの role属性を使用してもいいか、はたまた使用すべきではないかは ARIA in HTML にちゃんと書いてあるようです。ARIA in HTML の中の 2. Document conformance requirements for use of ARIA attributes in HTML(日本語訳)という項目の中にあります。3列の表組みがあって、1列目は対象となる HTML の要素。2列目が暗黙的に規定されている ARIAセマンティック。これには「SHOULD NOT be used
」と書かれています。使うなと。3列目は、ARIA のロール、ステート、プロパティー。こちらは「MAY be used
」なので、使ってもいいよとのこと。
先ほど例に挙げられていた main
要素を見てみると、2列目には
、3列目には role="main"
No
と書かれています。「暗黙的に role
/ global aria-*
attributesrole="main"
という ARIAセマンティックが規定されているので、使っていいロールは無いよ。aria-label
とかのグローバルなステートやプロパティーは使っていいよ」ということのようです。
では、前の項で挙がった header
だったり footer
だったりはどうなるのか。header
は2列目に If not a descendant of an
、3列目は先ほどの article
or section
element role=banner
, otherwise NONEmain
にもあったように global
と書かれています。「aria-*
attributesarticle
と section
の子孫じゃない場合は暗黙的に role="banner"
。それ以外の場合はデフォルトの ARIAセマンティックを持ちません。グローバルなステートやプロパティーは使っていいよ」ということらしいです。
article
と section
の子孫じゃない場合、つまりサイトのヘッダーとして header
を使うみたいな時は暗黙的に role="banner"
という ARIAセマンティックが規定されるということでしょうか。逆に、article
と section
の子孫の場合、例えば記事タイトルとか投稿日時などのメタ情報を記事内に記載する場合に使う header
は ARIAセマンティックを持たない。暗黙的な ARIAセマンティックを持っている要素に対して、role
属性を付けるのは非推奨ということなので、サイトのヘッダーとして使う時は role="banner"
を付けるのは非推奨になるようです。
footer
の場合も role="banner"
が role="contentinfo"
に変わっただけで同じです。 コピーライトや作者の連絡先を載せているサイトのフッターとしての footer
には暗黙の role="contentinfo"
を付けるのは非推奨になるようです。
role 属性は補助輪
先日買った書籍「コーディングWebアクセシビリティ」の P90からP99「4-2 有名なランドマーク」という節に、role
属性に関することが書かれています。特に重要だと思ったのは、暗黙的なARIAセマンティックを持つ要素に対して role
属性を付けるのは、自転車に補助輪を付けているようなものという箇所です。
role
属性無しの HTML 単体でアクセシブルな状態ならばそれでよいのですが、今現在はそのような状態ではありません。書籍内に補助輪は、補助輪なしで走れるようになるまで自転車のタイヤを支えるためにあるのです。
とあります。ARIA in HTML を参照するように書かれている HTML5.1 はまだ草案段階ですし、古いブラウザのサポートもあるので、今現在はまだまだ role
属性という補助輪なしで走れるような環境ではありません。時期尚早だと思います。
ということで、role
属性という補助輪を今すぐに外せるとは全く思いませんが、後々はこうなっていくということを覚えておきたいがためのメモでした。