やらねば.com

ARIA Landmark Roles とネイティブ HTML

WAI-ARIA Role 属性はその要素に意味と役割を与え、スクリーンリーダーが構造を理解するのに役立ちます。
ランドマークロールは大きな区分・セクションをランドマークとして分割し、HTML の構造と役割をより明確なものにします。

スクリーンリーダーは通常、次の見出しやボタン、ランドマークへジャンプするコマンドを備え、キーボードフォーカスが要素へ進入するとその情報を読み上げます。
そういった事から role 属性を付加するとアクセシビリティの向上が見込める様にも思えますがそうとは限りません。

スクリーンリーダーによるランドマークへのアクセス

HTML4 では確かにランドマークロールは有用ですが、HTML5 ではネイティブな HTML タグで role 属性の役割を果たしています。
例えば HTML4 では
<div role="main"> ... </div>
HTML5 では
<main> ... </main>
と、<main>タグが role="main" の役割を担っています。

又、両方使用して
<main role="main"> ... </main>
とするのは同じ事を2回言っているだけですし、連続してランドマークを記述するとスクリーンリーダーも連続で読み上げるといった弊害が起こる可能性が有ります。

ランドマークロールはネイティブな HTML タグが使えない場合、<div>要素等の使用に限り、そうでない場合はネイティブな HTML タグを使用する事を薦めます。

ランドマークロールと対応するネイティブ HTML

role
HTML
banner
<header>
complementary
<aside>
contentinfo
<footer>
form
<form>
main
<main>
navigation
<nav>
region
<section>
search
無し

role="search" には対応する HTML タグが無い為、HTML5 においても有用かと思います。
検索フォームを作る場合等に
<form role="search"> ... </form>
とすると、スクリーンリーダーはこれを「検索ランドマーク」といった様に読み上げ、これが検索する為のフォームである事が理解出来ます。

又、ランドマークが多過ぎると却って構造が分かりにくくなる為、必要なマークアップを必要な分だけ行う事がアクセシビリティの観点からも重要です。