CSSとアクセシビリティ

Simply AccessibleのDerek Featherstone氏がCSSDevConf 2014で行った講演、CSS, Accessibility and Youの動画を拝見しました。スライドが公開されていますので、英語が苦手な方であっても、比較的理解しやすいのではないかと思います。Featherstone氏といえば、かつてはWeb Standards Projectでご一緒した時期があり、それが縁で2006年にインタビューをしたこともあります。

「CSS, Accessibility and You」のなかでは、アクセシビリティを確保するうえでスタイルシートを作成する際に注意すべきポイントが紹介されていました。CSSの書き方に関するものもあれば、ビジュアルデザインから改善が必要なものまであったのですが、印象的だったものを三つご紹介します。

• 冒頭、フォームのラベルとコントロールが近接していないデザインが、弱視の方には特にアクセシビリティ上の問題を引き起こすという課題が提示されました。関連づけられたもの同士は近接させる、というのがデザインの大原則ではありますが、横並びだった見た目を縦並びにすることで、モバイルデバイスにも対応できるというような言及がありました。
• Windowsのハイコントラストモードでは、CSSで背景画像に指定したものが表示されなくなります。元来、コンテンツとしての意味をもつ画像は、CSSが無効だったり画像が表示できない環境の存在を踏まえ、代替テキストが提供可能なimg要素としてマークアップすべきなわけですが、改めて背景画像の使いどころを誤ってはいけないな、と思いました。
• 擬似要素で生成内容の二辺にボーダーを引き、それをtransformプロパティで回転させて下向き矢印を表現させた場合、transformプロパティに対応していないブラウザではそれが無視されるため、矢印の向きがおかしくなってしまう、というケースが紹介されました。矢印の向きに明確な意図がある以上、transformプロパティに対応していようといまいと、より確実に意図した向きで矢印が表示されるよう実装すべきと感じました（このケースにおいては、階層構造を伴うメニューがサンプルであり、WAI-ARIAのaria-expanded属性にも言及がありました）。

ほかにも、MacのVoiceOverを用いたデモンストレーションも挟まれていますので、普段スクリーン・リーダーなどの音声読み上げ環境に馴染みのない方には参考になる内容ではないかと思います。興味のある方は是非いちど動画をご覧になってみてください。