今日は、HTML5より正式に採用された「role属性」について書きたいと思います。
role属性とは
role属性は、このように使用します。|
1 2 3 |
<div role="navigation"> ・・・・ </div> |
見ればどういったものかなんとなく分かると思いますが、この場合はdiv要素に対して「ナビゲーション」の意味を付与しています。
では、実装する必要はあるのか
2016年04月に「障害を理由とする差別の解消の推進に関する法律」が施行されました。「障害を理由とする差別」の解消に努めるという主旨の施策なのですが、その中に「情報アクセシビリティ」も含まれているため、今後WEBの現場においても、そういった対策を求められる場合が増えてくると言えるでしょう。一部の音声読み上げソフトでrole属性まで読み上げてくれるものが存在します。公共性の高いサイトであれば積極的に、実装したいですね。
SEOの観点から見た場合の効果は不明です。現状は効果が無いと考えて良いと思います。JIS規格（2016年に更新されましたね）にも記述はありません。
大手企業でもWebアクセシビリティの観点から、実装をしているサイトが増えてきているのが現状です。広く普及するようになればあるいは、といった感じで、今後の展開が期待されています。
しかし、role属性自体は補助的な役割をするので、タグ事態に意味を持つHTML5で構成するのであれば、あまり記述する機会は必要ないかもしれません。多分3種しか使用しません。（後述します）
実装方法
先述と同様、タグにrole属性を付与します。|
1 2 3 |
<div role="navigation"> ・・・・ </div> |
あくまでrole属性は補助的な役割なので、navタグなどの既にナビゲーションの意味を持っているタグへの実装は今後非推奨となっていくようです。divやspanなどの特に意味を持たないタグに対して積極的に実装するとしても、古いブラウザも多く存在するので迷うところですが、HTML5で実装するのであれば外してしまっても良いのではというのが私の見解です。
ちなみにこちらで細かく、つけるべき、つけないべきの定義がリスト化されています。（複雑ですね…）
role属性の種類
計60個のrole属性が存在するのですが、ランドマークロールのカテゴリに分類される8つを押さえておけば良いと思います。※HTML5でマークアップするのであれば、さらに絞って、application／form／search以外は必要ないかと思います。ランドマーク以外の細かい部分も勉強しても良いかもしれませんね。
| application | アプリケーション。 キーボードまたはジェスチャーイベントなどの、ユーザー入力を要求する1つ以上の、との条件があります。 |
|---|---|
| banner | ヘッダ。基本的にページに1つだけ使用。 主にサイト中心のコンテンツが含まれる領域（ページ固有のコンテンツではない部分） |
| complementary | ドキュメントを補助する情報。 mainコンテンツから切り離された箇所に存在する、mainを補足する役割の領域。 |
| contentinfo | copyrightや、プライバシーポリシーへのリンクを含む領域。 |
| form | 検索以外の、フォームを含む領域。 |
| main | メインコンテンツ領域。 |
| navigation | ナビゲーション領域。 |
| search | 検索フォームを含む領域。 |
さらに細かい内容はこちら確認してください。
