WAI-ARIAのrole属性一覧

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

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

- [Accessible Rich Internet Applications (WAI-ARIA) 1.1(公式ドキュメント)](https://www.w3.org/TR/wai-aria-1.1/)
- [Accessible Rich Internet Applications (WAI-ARIA) 1.1 日本語訳](https://momdo.github.io/wai-aria-1.1/#intro_ria_accessibility)

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 日本語訳](https://momdo.github.io/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 日本語訳](https://momdo.github.io/wai-aria-1.1/#intro_ria_accessibility)
[role属性を実装しよう](https://w3g.jp/blog/lets_role_fit)