目次
HTMLのrole属性とはなにか？
role（ロール）はHTML5で追加された新しい属性です。roleを使うことで、「この要素にはこういった役割がある」と明示的に示すことができます。
たとえばナビゲーションを作るときに、どうしてもnavタグが使えない状況があったとします。
navの代わりにdivでナビゲーションを作ることもできますが、これでは機械的にはこの要素がナビゲーションであるということは理解できません。
role属性を追加しておくことでこの要素はナビゲーションであるということをブラウザに教えることができます。img要素のaltに似ているかもしれません。
roleはWAI-ARIAの一種
roleはWAI-ARIAと呼ばれるW3Cによって定められた仕様の一種です。
（Web Accessibility Initiative Accessible Rich Internet Applicationsの略）
高齢者や障害を持った人がWebサイトやWebアプリケーションを利用しやすくするための方法を定義しています。
現在、webサイトの機能の中には、高齢者や障害を持った方、スクリーンリーダーを使用している方には使用できない機能があります。WAI-ARIAはこれらのアクセシビリティの課題に対処するための仕様です。
HTMLにおけるrole属性の使い方
さきほどのナビゲーションの例を参考に実際にHTMLにrole属性を追加してみます。
まずはdivタグを使用して普通にナビゲーションを作ります。
1 2 3 4 5 6 7 | <div> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> |
上記のコードではナビゲーションであることが機械的に認識されないので、下記でrole属性を追加してみましょう。
1 2 3 4 5 6 7 | <div role="navigation"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> |
このようにHTMLにrole属性を追加すればOKです。
WAI-ARIAは必要な場合にだけ使用する
role属性はあくまで補助的な役割をするものです。さきほどの例でいえばnavタグが使えるなら素直にnavタグを使ったほうがよいです。
role属性にはどんなものがある？
役割は大きく以下に分類されます。
- 抽象的ロール
- ウィジェットロール
- 文書構造ロール
- ランドマークロール
抽象的ロール
抽象的ロールは、一般的な役割を定義するロール
| command | input | landmark |
| range | roletype | section |
| sectionhead | select | structure |
| widget | window |
ウィジェットロール
ウィジェットロールは、ユーザーインターフェイスを定義するロール
| alert | alertdialog | button |
| checkbox | dialog | gridcell |
| link | log | marquee |
| menuitem | menuitemcheckbox | menuitemradio |
| option | progressbar | radio |
| scrollbar | slider | spinbutton |
| status | tab | tabpanel |
| textbox | timer | tooltip |
| treeitem | combobox | grid |
| listbox | menu | menubar |
| radiogroup | tablist | tree |
| treegrid |
文書構造ロール
文書構造ロールは、ページのコンテンツの細かい構造を説明するロール
| article | columnheader | definition |
| directory | document | group |
| heading | img | list |
| listitem | math | note |
| presentation | region | row |
| rowgroup | rowheader | separator |
| toolbar |
ランドマークロール
ランドマークロールは、ページのレイアウトに関するロール
| application | banner | complementary |
| contentinfo | form | main |
| navigation | search |
なぜHTMLにrole属性を設定したほうがいいのか
2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されてwebサイトにアクセシビリティ対策を求められることが増えてくると予想されます。
またスクリーンリーダー、webサイトの音声読み上げソフトでrole属性を読み上げてくれるものもあるため、アクセシビリティ対策としてrole属性を設定しておくべきです。
アクセシビリティ対策をしておくことでサイト利用者も増えるのでこれからのweb制作には必須の対応となってきそうです。
HTMLタグにrole属性を追加することでSEOの効果は上がるか
直接的な効果はないと思われますが、アクセシビリティの向上によってサイトの利用さやが増えるという意味では間接的に効果が見込めるとも言えます。
role属性まとめ
- role属性は要素の「役割」を明示的に示すもの
- role属性はアクセシビリティの向上が目的
- role属性は必要な場合にだけ使用する