この記事は、Web Accessibility Advent Calendar 2013の9日目の記事です。
フロントエンド・エンジニアの私ですが、今年はPHPでサーバーサイドのプログラミングをすることが多い一年でした。とはいえ、Webアクセシビリティにもできる限り取り組もうと思いながら日々コードを書いてきました。この記事では、そのような中で実践したこと、考えたことを4つ取り上げてみたいと思います。
次に書くの4つの他に「みんなが使える10のアクセシビリティTips | アクセシビリティBlog | ミツエーリンクス」に記載されている項目も実践してきました。そちらも参考にしてみてください。
アクセシブルなモーダルウインドウを実現するjQueryプラグイン
あるコンテンツを表示する際にモーダルウインドウを利用することになりました。最近ではjQueryプラグインを利用すれば簡単に実現可能ですが、スクリーンリーダーなどでアクセスできるのかと疑問に思い調査を行いました。結果としては、1日目に@neotagさんが「モーダルダイアログを視覚表現だけで終わらせない - Web Accessibility Advent Calendar 2013 - neotagの雑文」に書かれているように、tabindex（値は-1にしました）を付与しモーダルウインドウにフォーカスを与える手法でした。加えて、WAI-ARIAでrole="dialog"を付与してやると良さそうです。
そこで、上記を満たすjQueryプラグインはないかと探してみたところ、「Colorbox - a jQuery lightbox - Jack Moore」が見つかりました。モーダルウインドウを閉じた際もフォーカスが元のところに戻ります。モーダルウインドウを使われる際はぜひお試し下さい。
WAI-ARIA ライブリージョンの利用
施設を検索するフォームを実装する機会があったのですが、その画面では条件を指定していく途中においても、該当する施設が何件存在するかを表示する仕様になりました（HOME'Sのサイトにも似たような実装がありますので、参考にしてみて下さい）。検索条件は多数あるので、検索結果画面に移るまでに何度かJavaScriptで該当する施設数を書き換えます。この実装もそのままだとスクリーンリーダーが読み上げられないだろうと思い、WAI-ARIAのライブリージョンを利用することにしました。
マークアップは次のようになりました。aria-live="polite"を指定するのがポイントです。
<p id="presearch" aria-live="polite" aria-relevant="text" aria-atomic="true">該当する施設数 <span class="volume">0</span>件</p>
オープンソースのスクリーンリーダー「NVDA」で確認すると、検索条件を変える度にチェックボックスのラベルが読み上げられた後、施設数が読み上げられました。ただ、数字だけ読み上げられて、文章全体が読み上げられないのが疑問になっています。YouTubeで「ARIA Live Regions Screen Reader Demo」を見ると、段落全体が読み上げられているのですが（4:00付近からご覧下さい）、スクリーンリーダーによって違うのでしょうか（動画ではJAWSが利用されています）。
追記：@24motzさんのツイートによると、NVDAがaria-atomicにまだ対応していないことが原因のようです。
ハイコントラストモードとCSSスプライト
個人的にはHTTPリクエストを減少させるとパフォーマンスが向上することは分かっていつつも、なかなか利用に踏み切れないCSSスプライトですが...、CSSスプライトについて調べていると「Notes on accessible CSS image sprites | The Paciello Group BlogThe Paciello Group Blog」という記事を見つけました。
記事には次のような一文がありました。
When high contrast mode is enabled in the Windows OS, the sprite is not displayed (CSS background images are not displayed in high contrast mode).
実際にハイコントラストモードに設定して厚生労働省のサイトにアクセスしたところ、CSSスプライトで実装されているグローバルナビゲーションが全く見えませんでした。Tabキーで辿っていくとフォーカスは当たるのですが、どういったメニュー項目にフォーカスしているか全く分かりません。
パフォーマンスも確かに重要ですが、さまざまな環境からアクセスできるという側面にも十分注意したいと感じました。
地図について
最近悩んでいるのが「地図」の実装です。最近よく見かけるのが、（第8回アクセシビリティキャンプ東京でも取り上げられた）Cookpadさんのコーポレートサイトにある「所在地・地図」のようなGoogle マップを利用した実装ではないでしょうか。
このような実装のほとんどに、代替コンテンツが入っていないように思います。また、PCのマウスやiPhoneなどのスマートフォンでタッチ操作ができなければ、地図を操作することができないと思われます。果たしてこれで閲覧されている全ての方が地図で示されている場所にたどり着くことができるでしょうか...？
富士通さんのサイトでは別ページに、ミツエーリンクスさんや米国のアップルさんのサイトでは同一ページに、会社（店舗）までの道順がテキストで掲載されています。もしかしたらこの他にも手法があるかもしれません。どういった手法を採用すれば目的を達成できるのか、今後も研究してみたいと考えています。