WAI-ARIA

次に紹介するのはWAI-ARIAです。

WAI-ARIAというのは、HTMLドキュメントにより詳細な情報を付加するもので、特に動的なコンテンツを形成するHTMLにおいて効果を発揮します。すなわち、どちらかというとWebアプリケーションなんかで威力を発揮できるということですね。

WAI-ARIAが主に行なうのは、HTML要素にその役割情報を付加するということです。これにより、ブラウザがそのページの意味をより正確に理解できるようになります。

ブラウザは日本語や英語などで書かれた文を読んでページを理解するわけではありません。ブラウザが読むのは、HTMLの場合はタグなどですよね。それを読んで文書の構成を理解して表示しているにすぎないのです。

そこで、HTMLにWAI-ARIAの情報を加えてやれば、ブラウザからもより詳細にHTMLを理解することができ、ブラウジングがより快適になります（多分）。

role属性

そこで、それでは具体的にどうやってWAI-ARIAの属性を付加すればいいのかということですが、role属性を使います。roleとは、日本語でいうところの「役割」のことですね。すなわち、その要素がどんな役割を持っているかをこれで示すことができるのです。

それでは、role属性にはどんな役割を指定することができるのか見ていきます。

alert

最初に登場するのがalertです。これは「警告」などという意味ですね。つまり、ユーザーに何かメッセージを伝えたいときなどにこれを使えばいいわけです。

例えば、何かにログインしようとして失敗したときに、次のようなメッセージを表示したとします。


<p>パスワードが違います。</p>

これだと、ユーザーには「ああ、自分に向けて警告しているのだな」と伝わるのですが、ブラウザにはなぜこのメッセージが出たのか伝わりません。前述の通りWAI-ARIAとはブラウザに理解させるためのものですから、role属性をつけてやることで適切にブラウザにも伝わります。


<p role="alert">パスワードが違います。</p>

こうすることで、これがユーザーに対する警告であるということがブラウザにとっても明らかになるのです。もしかすると、気を利かせた動作をしてくれるかもしれません。

status

statusは、alertと似ていてユーザーに対するメッセージを表します。しかし、alertほど強くはなく、もっと控えめです。

ちょうどステータスバーに出てそうな感じとされています。

dialog, alertdialog

dialogは、よく見る一般的なダイアログのことで、「処理を一時的に中断してユーザーに入力や応答を求めるためのもの」とされています。例えば、あるページを見ようとして、実はログインが必要だった場合に、ページを開く前に（開く処理を中断して）ユーザーに入力を求める場合が考えられるでしょう。つまり大まかにいうとこうです。


<form action="/login" role="dialog">
  <p> ユーザーID: <input> パスワード:<input></p>
  <p><input type="submit" value="ログイン"></p>
</form>

さらに派生として、alertdialogは、dialogとしての意味（ユーザーに入力や応答を求める）を持ちながら、ユーザーに対して警告を与えるalertとしての意味ももつ場合に使われます。

application, document

applicationはいわゆる動的なWebアプリケーション、それに対してdocumentはどちらかというと読み物としての性質が強い文書であることを表します。

わりとページ全体に適用されることが多いでしょうから、例えばWebアプリケーションの場合はbodyにこう書きます。


<body role="application">
  …
</body>

banner

バナーというとWebサイトを表す画像を思い浮かべる人も多いとおもいますが、ここでのbannerはサイト全体に関連付けられた情報という意味を持ちます。

例えば、このサイトの場合、上のサイトのタイトルとかあるいはメニューは、どのページに行っても変わりません。このように、ページごとに変化がなく、サイト全体で一貫しているような情報に対してrole="banner"が付けられます。

逆にそうでないのは、例えばページの内容とか、同じサイトの中でも変化があるものです。

complementary

complementaryは補足的な情報を表します。補足的ですから文章の本筋とは関わっているのですが、それ単体でもやっていけそうな情報です。

aside要素と似た雰囲気がありますので、aside要素によく付けられるかもしれません。

contentinfo

contentinfoは、現在のドキュメント（文書）についての情報を表します。

具体例として著作権表示などが挙げられますので、footer要素なんかに付けるといいかもしれません。

img

imgは、その名の通り画像を表します。しかし、そうかといってHTML中でimg要素を使うときは毎回role="img"とすべきかというと、そうではありません（後述）。

つまり、img要素以外でもこのimgというroleを使えるときがあるのです。例えばどういうときかというとアスキーアート（AA）です。

AAというのは、文字の集合でありながら、本質的には表すものは絵・画像です。ですから画像として扱われるべきだということで、アスキーアートに対してrole="img"を指定するべきです。

これについては分かりやすい実用的な利点があります。それは、スクリーンリーダー（画面読み上げソフト）を使う場合です。

もしこのimgというroleが指定されていないと、アスキーアートが出現したときに、スクリーンリーダーはその支離滅裂なテキストを読み始め、聞いているほうは訳がわからなくなります。ところが、ここにimgというroleが指定されていると、読む側はこれは画像扱いだと理解でき、読み上げることはしないでしょう。

log

logは、次々と新しい情報が追加されていくであろう領域につけられるroleです。

典型的な例はチャットのログです。つまりこういう感じですね。


<div role="log">
  <p>Aさん: やあ</p>
  <p>Bさん: こんにちは</p>
  <p>Aさん: さようなら</p>
</div>

ただ、このように動的に変化するものというものはいくつかあるのですが、その中でもこのlogの特徴は、順序が決められているという点です。

つまり、何か新しい情報が来たら、それは適当ではなく必ず一番最後（とはいっても、画面上ではそれは一番上かもしれないし一番下かもしれません）に追加されるであろうということです。

marquee

marqueeも、logと似た意味で、次々と情報が変化していく領域につけられます。

logとの違いは、順番が関係ないという点や、変化が流動的であり、個々のひとつひとつの変化の重要性がlogよりも薄いという点です。です。例として挙げられるのは、例えば株の動向とか、あるいは変化する広告などです。

これらはいずれも、順番までは重要ではないですね。そもそも、情報が追加されていくというイメージがあるlogよりも、ある情報がどんどん変化していくというイメージがあります。

main

mainは、名前通り、ある文書において中心的な意味を持つ部分に付けられるものです。

これは、article要素と相性がよく、article要素に付けられることが多いかもしれません。

math

mathは、その名の通り数学的な式を表します。HTMLで数式を表す方法については、math要素を紹介してあります。このときに使えるでしょう。

またその他に、TeXを使う方法もあります。例えば、次のような感じです。


<p role="math"> \frac{6}{4}=1.5</p>

このようにrole="math"としておいて中にTeXをベタ書きしておくと、6/4=1.5というように表示してくれる日が来るかも知れません。

navigation

navigationは、その名の通り、ナビゲーション、つまり関連した文書や情報へのリンクなどを表します。もちろん、これを聞いてnav要素が思い浮かぶことでしょう。

note

noteは、complementaryと似た感じの意味で、挿入的な感じで補足情報を表します。これもaside要素な感じですね。

presentation

presentationは、またクセのあるroleです。これは「表示」とか「表示用」みたいな意味です。つまり、見た目に関する役割をもつ要素の場合presentationをつけろということです。

つまり、「見た目以外にとくに意味はないよ」ということです。しかし、勘のいい人は気がつくかも知れません。マークアップとHTMLの理念において、「HTMLは見た目を記述するものではない」と書いてあるのです。

でも敢えて見た目を記述してしまう場合に使うのがこのpresentationなのです。つまり、role="presentation"の要素は、見た目は変わらないけれど、意味がなくなるのです。


<h1 role="presentation">見出しじゃないよ</h1>
<p>段落</p>

このような場合、このh1要素は見出しとしての役割は持っていません。

用法としては、例えばimg要素のところで、alt=""の場合について「補助的でなくてもいい画像」と説明しましたが、それはつまり見た目しか必要としていないということですから、role="presentation"にも当てはまることでしょう。

ほかにはCSS用に必要な要素とかにもこれを付けることができます。

search

searchは、その名の通り検索フォームに付けられるroleです。


<aside role="search">
  <h1>サイト検索</h1>
  <form action="/search">
    <p><input type="search"></p>
  </form>
</aside>

timer

timerは、その名の通り、時間の経過とともに数値が変化する感じのものにつきます。

といってもHTML単体ではそんなものは作れないので、JavaScriptなどと組み合わせて作ることになるでしょう。

HTML要素との兼ね合い

さて、ここまでrole属性がとりうる値の一部を紹介しましたが、どうでしょうか。

そもそもHTMLも意味を記述するものであるというのは前述の通りですが、このWAI-ARIAのroleと被っているものも結構あるのではないでしょうか。

といっても、そもそも明らかに被っているものはあまり紹介していないのです。例えばinput要素用には、type="button"ならbuttonというroleがあったりとか、type="text"とか入力ボックス系ならtextboxというroleがあったりします。また、hr要素にはseparatorというroleになっています。

ほかにnav要素も、上で紹介したnavigationになっています。

このように、HTML要素というのも意味を持っていますから、もともとWAI-ARIAのあるroleに割り当てられている場合があります。

また、もともとroleを持っているものの、場合によってほかのroleに変えることができるものもあります。

a要素,button要素

aはhref属性がある場合リンクになりますから、実はlinkというroleを持っています。同様にbutton要素はbuttonです。しかし実は、link,button,checkbox,menuitem,...といったroleをもたせる事ができるのです。これは少しメニューと関係してきます。

address要素, footer要素

これらの中には著者の連絡先情報や、その他の著作権情報などを入れることができますが、デフォルトでは特にroleは持っていません。しかし、上で紹介したcontentinfoを持つことができます。

article要素

article要素は、articleというそのままなroleを持っていますが、ほかにもdocument,application,mainが許可されています。

aside要素

aside要素はデフォルトではnoteですが、上で紹介したcomplementaryやsearchもOKです。

h1～h6要素

これらはデフォルトでheading（見出し）というそのままのroleを持っていますが、なぜかlink,menuitemなどのroleを持つことができるそうです。ちなみにhgroup要素はheading固定です。hgroupの中にあるh1～h6は、hgroupが見出しの役目を持っているので単体では特にroleは持ちません。

ul要素,ol要素 と li要素

ul要素、ol要素はデフォルトでlistというそのままのroleを持っていますが、ほかにdirectory（静的リスト）、listbox（メニューの中で使うかも）、menu（それ自体がメニューになるときなどに）などになれます。

li要素は、listitemというそのままのroleです。

output要素

output要素はstatusです。

ここで特に紹介していない要素は、特にroleに制限はありません。

また、実はrole属性のほかにも、roleと関連してより詳細な情報を表現できるaria-*属性（aria-から始まるいくつもの属性）があるのですが、ここでは紹介しません。興味があれば調べてみましょう。