ナビゲーションメニューが複数ある場合のスクリーンリーダーでの識別

Web ページの中にナビゲーションメニューが複数あるというケースは珍しくありません。多くのサイトが、グローバルナビゲーション、ローカルナビゲーション、といった具合に、複数のナビゲーションメニューを持っていることでしょう。

これら複数のナビゲーションメニューは、ページレイアウトを見渡すことで、それぞれの役割を類推することができます。ページ最上部の共通ヘッダー内に並んでいるメニューはサイト全体のグローバルナビゲーション、メインコンテンツの横にもう少し細かな粒度で並んでいるメニューは (そのメインコンテンツが属するカテゴリーの) ローカルナビゲーション...といった感じです。

スクリーンリーダーユーザーにとっての課題 (ナビゲーションメニューの種類を推測する手間)

ところが、Web ページ内の情報をシリアルな形で取得するスクリーンリーダーユーザー (視覚障害者) の場合、ページレイアウトを見渡すことが難しく、「順番に音声読み上げのフォーカスを移動させて、そのフォーカスがナビゲーションメニューのエリアに差し掛かったとき、さらにそのエリア内の細目 (個々のメニュー項目) を読み上げることで、そのナビゲーションメニューの種類 (役割) を推測する」という、やや手間のかかる手続きをすることになります。

さらに最近は、ビッグフッターがあったり (つまりグローバルナビゲーション機能がページの最下部にもある)、モバイルデバイス向けにデザインされたサイトでいわゆる「ハンバーガーアイコン」による折り畳みメニューが採用されていたり (つまり細目を読み取るのに、都度、メニューを開く手続きを踏まなければならない) ...と、ナビゲーションメニューの様相も複雑化しています。「シリアルに読み進めて行って、上のほうにメニュー項目が並んでいるのがグローバルナビゲーション、下のほうに並んでいるのがローカルナビゲーション」と単純に類推するだけではサイトを十分に使いこなせない可能性があるのです。

ナビゲーションメニューに aria-label を記述する

この課題を解決するアクセシビリティのテクニックとして今後有効になりそうなのは、個々のナビゲーションメニューに対して、支援技術 (スクリーンリーダー) が識別できるラベルを付けることです。ナビゲーションメニューのエリアを <nav role=“navigation”> 要素でマークアップすると、今どきのスクリーンリーダーはナビゲーションエリア間でフォーカスを移動させることができます。そこに aria-label 属性を記述することで、個々のナビゲーションエリアにフォーカスが当たった際、そのナビゲーションの種類 (役割) が何であるかも同時に読み上げられるようになります。たとえば、以下のように記述します。

aria-label の属性値は、日本語で記述しても大丈夫です。Windows の NVDA (Internet Explorer 9 および Firefox と併用)、Mac OS X の VoiceOver (Safai と併用)、iOS の VoiceOver (Safari と併用)、Android の Talkback (Chrome と併用)、で試してみましたが、いずれも、ナビゲーションエリアにフォーカスが当たった際、同時に aria-label 属性値も読み上げられ、ナビゲーションメニューの種類 (役割) を容易に把握することができました。

とても簡単に実装できるので、ぜひトライしてみていただけたら幸いです。