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

アクセシビリティBlog

Webサイトのアクセシビリティを高めるための方法や国内外の関連情報など、さまざまな角度からWebアクセシビリティに関する話題をご提供していきたいと思います。

当Blogの更新情報は、Twitter経由でも配信しています。興味のある方はぜひ、@mlca11yをフォローしてください。当Blogへのご意見・ご質問は、Twitter経由でも受け付けております。

2013年6月7日

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

アクセシビリティ・エンジニア 辻

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