Web Accessibility Advent Calendar 2014 15日目の記事です。
今年3月にスマートフォンサイトの開閉するメニューとアクセシビリティという記事を書ました。iOSのVoiceOverでは、スマートフォンサイトによくある3本のバー（Font Awesomeだとfa-barsですね）があって項目がドロップダウンしたりするメニューにアクセスできない場合がある問題について書いたものです。
私のブログ記事の中ではかなり多くの方に読んで頂けました。ただ、その後も時々スマートフォンサイトを詳しく見ると、たびたびメニューにアクセスできないサイトを見かけました。
また先日のHTML5Experts.jpの「ミツエーリンクスのCTOに「UXとWebアクセシビリティ」について聞いてきた─木達一仁ロングインタビュー」に、次のような一節がありました。
もし画面がなくなってしまったら、Webを視覚以外で利用することが一般化するはず。ぱっと思い浮かぶのは、Webコンテンツ音声で読み上げてもらうことでしょう。そうなった場合、Webコンテンツがマシンリーダブルであることが（スクリーンリーダーなどのプログラムがWebコンテンツを読み取る必要があるので）非常に重要です。
以上のことから、Web Accessibility Advent Calendar 2014を機会に、環境によってはメニューにアクセスできない問題を再度取り上げ、多くの方に知って頂きたいなと思った次第です。
適切な要素を使ってマークアップを行い、セマンティクスを正しく伝え、（記事で扱ったiOSのVoiceOverに限らず）どのような環境においてもコンテンツにアクセスできるようにしていきたいですね。
読んで頂きたい記事
参考 - Font Awesome等のアイコンフォントを使う場合
記事には書いていないのですが、Font Awesomeのfa-barsのみを使ってメニューを表現すると、「発音不能」と読み上げられます。解決法の一つには、WAI-ARIAを利用してaria-label="メニュー"を追加で記述する方法があります（ただ、それで本当に良いのかが最近の私の疑問になっています）。