Smart Communication Design Company
ホーム > ナレッジ > Blog > アクセシビリティBlog > 2013年6月 > Adobe社のアクセシブルなMega Menuを使ってみました

Adobe社のアクセシブルなMega Menuを使ってみました

2013年6月7日
アクセシビリティ・エンジニア 辻

5月31日付けでAdobe Accessibilityに同社のアクセシビリティ・エンジニアのMatt May氏が投稿した記事、Mega menu accessibility on adobe.comによりますと、Adobe社のWebサイトのナビゲーションで使用されているMega Menu (メガドロップダウンメニューと呼ばれることもあります) がアクセシビリティ対応したとのことです。

そこで、スクリーン・リーダーや音声ブラウザーではどのように表現されるのかをチェックすべく、以下の組み合わせでAdobe社のページにアクセスしてみました。

JAWS

JAWSとFirefox及びInternet Explorerの組み合わせでページにアクセスし、ページの先頭から下矢印キーを使って読み進めていくと、『折りたたみ ポップアップがあります 製品』と読まれる部分があります。

ここでJAWSキー (テンキー0やInsertキーなど) + Zを押して仮想PCカーソルをオフにして下矢印キーを押すと、製品メニューが開いて『Adobe Creative Cloud』などのメニュー項目が読み上げられます。

上矢印キーを押すと前のメニュー項目に戻りますし、左右の矢印キーを押せば『ビジネスソリューション』や『ご購入』などのメニューに移動できます。なお、開いているMega Menuを閉じるにはESCキーを押します。

Mega Menuにフォーカスがある状態で任意の文字キーを押すと、その文字から始まるメニュー項目にジャンプできます。たとえば、『製品』メニューのところでWを押すと、『Webエクスペリエンスマネジメント』というメニュー項目に移動して読み上げます。

NVDA

NVDAを使ってFirefoxまたはInternet Explorerで同じMega Menuにアクセスすると、『製品 サブメニュー クローズ』のように読み上げます。NVDAキー (テンキー0やInsertキーなど) +Spaceキーを押してフォーカスモードに切り替えると、JAWSと同じように上下左右の矢印キーでメニューを操作することができます。

JAWSの読み上げとの相違点は、Mega Menuが開いたときに『オープン』と読み上げ、ESCキーで閉じたときには『クローズ』と読み上げるところです。

PC-Talker

PC-TalkerとInternet ExplorerでAdobe社のページにアクセスし、下矢印キーで読み進めたところ、『製品』等のMega Menuも、それぞれに含まれている個別の項目も、通常のリンクとして読み上げられました。すべてのMega Menuが開いた開いた状態のものを読み進めていくような感じで、本文を読み始めるまでにはかなり時間がかかりそうでした。

一方、PC-Talkerとともに動作する音声ブラウザーのNetReaderでは、ページの先頭にあるはずのMega Menuが読み上げられませんでした。

このように、アクセシブルなMega Menuも利用するスクリーン・リーダーによって便利に活用できたり、かえって不便に感じることもあることが分かりました。なお、今回JAWSでMega Menuを操作する際にオフにした仮想PCカーソルや、NVDAで利用したフォーカスモードにつきましては、スクリーン・リーダーの仮想バッファーという記事の中で紹介しておりますので、合わせてご参照いただければと思います。

ミツエーリンクスでは、WCAG準拠やJIS X 8341-3対応をはじめ、さまざまなWebアクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。

Pick Up