WAI-ARIAのrole属性一覧

皆さん、WAI-ARIAってきいたことありますか？
聞いたことはあるけど、なんの事かはあんまり知らない、そんな人はいませんか？
実際私がそうだったので、今回はWAI-ARIAについて調べてみました。
（タグ付けしながら、WAI-ARIAタグの記事の少なさに驚愕しました）

WAI-ARIAって何？

まず、WAI-ARIAについての話です。
WAI-ARIAとは、簡単に言うと、ウェブアクセシビリティを良くするためにHTMLに付与する言語です。

• Accessible Rich Internet Applications (WAI-ARIA) 1.1(公式ドキュメント)
• Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

HTML自体にすでにどんな要素かを表す意味がついていますが、
WAI-ARIAではそれだけでは説明ができない要素や構造の説明をすることができます。
基本的にはHTMLのタグにはどれも意味が与えられているため、セマンティクに書く必要があるのですが、ものによってはそれが難しい場合もあります。

例えば、ボタンなのにdivで書かなくてはいけないときがでたとします。
そのようなとき、表示されているWebページを見るのではなく、音声読み上げなどを利用したときそのボタンはきちんとボタンとして認識されるでしょうか？
divにスタイルをあてていくら見た目をボタンにしたからと言って、HTML側ではそれをボタン要素だと認識することはできません。

例えば、あるコンテンツの出し分けにタブを利用したとします。
1つ目のコンテンツはタブがアクティブになっているときしか表示されず、ほかのタブをクリックすると別のコンテンツの内容が表示され、最初に表示されていたコンテンツは隠れます。
そのような状態を、HTML側で認識することはできるでしょうか？
CSSやJavaScriptを利用してそれを実装しているとしたら、HTMLでは表示しているコンテンツと表示されていないコンテンツのマークアップは同じなはずです。

これらをHTML側で認識できるようにし、音声読み上げソフトなどにも対応することができる言語を、WAI-ARIAといいます。

そして、WAI-ARIAには2つの属性があります。
それがrole属性とARIA属性です。

今回はrole属性に焦点をあててまとめてみました。

role属性

role属性は、付与したタグに「役割や意味」を与えます。
たとえば、<nav>というナビゲーションを表す要素があります。
これと同じ意味をrole=‘navigation’によって付与することができます。

ただここでしっかり認識しておかないといけないことがありますが、
あくまでもHTMLの要素を正しく使うことが前提です。HTMLのタグを正しく使えば良い場合はもちろんそちらが優先です。

では、role属性は一体どんなものがあるのか、一覧にしたいと思います。

こちらの日本語訳ページを参考に自分なりに砕きながら書きました。
Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳

ランドマークロール

ページ全体のレイアウトに関連するロール。
一番良く見かけるので覚えておくと役に立つ！

名前	意味
banner	ヘッダー。1回だけ使用ができる。
complementary	補足のコンテンツ。HTMLの要素だと<aside>と対応してる。1回のみの使用が望ましい。
contentinfo	コンテンツ情報。ページやWebサイトについての情報（著作権や連絡先など）1回だけ使用できる。
form	フォーム。<form>に関する属性。
main	メインコンテンツ。1回だけ使用できる。
navigation	ナビゲーション。<nav>のようにサイト内の別のページへのリンクを含む要素。あんまり複数回使うのは望ましくない。
search	検索。サイトコンテンツの検索などで利用する。複数回使ってもOK。

ちなみに、<nav>にはrole=‘navigation’という属性がすでについているので、つけなくても良いですよという暗黙の了解があります。
ほかには<header>にはrole=‘banner’>とか、<main>にはrole=‘mainとかですね。
その他もHTMLタグと対応しているものは、同じようにrole属性をつけなくても意味を含んでいるのでOKです。

文書構造ロール

ランドマークよりは小さい構造を表すロール。
このあたりから細かくなってきてむずかしい。

名前	意味
application	アプリケーションとしてのコンテンツ（bodyにつけることが多い）
article	文書、ページ
cell	テーブルのセル
columnheader	テーブルやグリッドの列のヘッダー情報をもつセル。テーブルの列の見出しとして使用もできる。
definition	用語などの定義
directory	目次のようなグループのリスト
document	コンテンツを含むもの（bodyにつけることが多い。application以外は大体これ）
feed	スクロール可能な記事リスト
figure	参照の図や画像など
group	UI要素やオブジェクトをグループ化したもの
heading	見出し
img	画像
list	listitemを含むリスト
listitem	リストの項目
math	数式を表すコンテンツ
none	意味を持たないことを示す要素
note	補足
presentation	意味を持たないことを示す要素。類義語はnone
row	テーブルにおけるセルの行
rowgroup	1つ以上の行を含む構造
rowheader	行のセルを含むヘッダー
separator	セクションまたはメニューのグループを区切る仕切り
table	テーブル
term	対応する定義をもつ単語
toolbar	機能を持つボタンやセレクタを含む。ツールバー。
tooltip	要素の説明をするポップアップ。ツールチップ。

ウィジェットロール

ユーザーインターフェースを表すことができる属性。
全体の構造よりも見た目で表していることに関係するものが多い印象。

スタンドアロン・ユーザーインターフェイスウィジェット（単独）

名前	意味
button	ボタン。クリックやタップした時にユーザー誘発のアクションを可能にする入力
checkbox	チェックボックス。 true、false、またはmixedを選択できるチェックボックス
gridcell	gridまたはtreegrid内のセル。
link	リンク。
menuitem	menuまたはmenubarの中の選択肢。メニューの中のリストとか。
menuitemcheckbox	チェックボックスをもつmenuitem。
menuitemradio	ラジオボタンをもつmenuitem。
option	selectで選択可能な項目。
progressbar	時間がかかるタスクの進捗状況を表示する要素。
radio	ラジオボタン。
scrollbar	表示コンテンツ内のスクロールを制御する要素。
searchbox	検索テキストボックス。
separator（フォーカス可能な場合）	コンテンツを区切る仕切り
slider	<input type=‘range’>のようなつまみをスライドさせて数値を選択する要素
spinbutton	<input type=‘number’>のようなinput内で数値を選択するフォーム
switch	スイッチ。checkedとは別のon/offを表すチェックボックス
tab	タブ
tabpanel	tabに関連付けられたコンテナ
textbox	自由形式のテキストを入力する型
treeitem	treeのオプション項目

複合ユーザーインターフェースウィジェット（複合）

名前	意味
combobox	入力するtextboxと他の要素を含む複合ウィジェット
grid	1つ以上のセルや行を持つ複合ウィジェット
listbox	選択肢のリストから1つ以上の項目を選択できるようにするウィジェット
menu	選択肢のリストを提供するウィジェット
menubar	水平に表示されるメニュー
radiogroup	radioボタンのグループ
tablist	tabのリスト
tree	折りたたみや展開されるようなネストしているリストを持つ
treegrid	行がtreeと同じように折りたたみや展開されるgrid

基本的なrole属性だけでもこんなにあります！
すべてを覚えるのは難しいですが、コーディングをしながら、HTMLだけではこの意味を伝えられないな、というときなど意識できるといいなと思っています。

参考

Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳
role属性を実装しよう