コーディング

HTMLのrole属性について解説!概要と使い方

htmlのroleを解説

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タグを使用して普通にナビゲーションを作ります。

上記のコードではナビゲーションであることが機械的に認識されないので、下記でrole属性を追加してみましょう。

このようにHTMLにrole属性を追加すればOKです。

WAI-ARIAは必要な場合にだけ使用する
role属性はあくまで補助的な役割をするものです。さきほどの例でいえばnavタグが使えるなら素直にnavタグを使ったほうがよいです。

role属性にはどんなものがある?

役割は大きく以下に分類されます。

  • 抽象的ロール
  • ウィジェットロール
  • 文書構造ロール
  • ランドマークロール

抽象的ロール

抽象的ロールは、一般的な役割を定義するロール

commandinputlandmark
rangeroletypesection
sectionheadselectstructure
widgetwindow

ウィジェットロール

ウィジェットロールは、ユーザーインターフェイスを定義するロール

alertalertdialogbutton
checkboxdialoggridcell
linklogmarquee
menuitemmenuitemcheckboxmenuitemradio
optionprogressbarradio
scrollbarsliderspinbutton
statustabtabpanel
textboxtimertooltip
treeitemcomboboxgrid
listboxmenumenubar
radiogrouptablisttree
treegrid

文書構造ロール

文書構造ロールは、ページのコンテンツの細かい構造を説明するロール

articlecolumnheaderdefinition
directorydocumentgroup
headingimglist
listitemmathnote
presentationregionrow
rowgrouprowheaderseparator
toolbar

ランドマークロール

ランドマークロールは、ページのレイアウトに関するロール

applicationbannercomplementary
contentinfoformmain
navigationsearch

なぜHTMLにrole属性を設定したほうがいいのか

2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されてwebサイトにアクセシビリティ対策を求められることが増えてくると予想されます。

またスクリーンリーダー、webサイトの音声読み上げソフトでrole属性を読み上げてくれるものもあるため、アクセシビリティ対策としてrole属性を設定しておくべきです。

アクセシビリティ対策をしておくことでサイト利用者も増えるのでこれからのweb制作には必須の対応となってきそうです。

HTMLタグにrole属性を追加することでSEOの効果は上がるか

直接的な効果はないと思われますが、アクセシビリティの向上によってサイトの利用さやが増えるという意味では間接的に効果が見込めるとも言えます。

role属性まとめ

  • role属性は要素の「役割」を明示的に示すもの
  • role属性はアクセシビリティの向上が目的
  • role属性は必要な場合にだけ使用する

スポンサーリンク

-コーディング

© 2020 まめしばweb Powered by AFFINGER5