Adobe社のアクセシブルなMega Menuを使ってみました
5月31日付けでAdobe Accessibilityに同社のアクセシビリティ・エンジニアのMatt May氏が投稿した記事、Mega menu accessibility on adobe.comによりますと、Adobe社のWebサイトのナビゲーションで使用されているMega Menu (メガドロップダウンメニューと呼ばれることもあります) がアクセシビリティ対応したとのことです。
そこで、スクリーン・リーダーや音声ブラウザーではどのように表現されるのかをチェックすべく、以下の組み合わせでAdobe社のページにアクセスしてみました。
- JAWS for Windows Professional Ver.14.0 日本語版 (Release2)+ Mozilla Firefox 21.0及びMicrosoft Internet Explorer 9.0
- NVDA 2013.1+Firefox 21.0及びMicrosoft Internet Explorer 9.0
- PC-Talker 7 バージョン2.12+Microsoft Internet Explorer 9.0及びNetReader バージョン1.42
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アクセシビリティ関連サービスをご提供しています。是非アクセシビリティのページをご覧いただき、お気軽にお問い合わせください。