CSUN 2015 『Accessible Graphics for High Pixel Density Era』セッションのご紹介
CSUN 2015では、当社もセッション発表を行いましたので、この記事では当社のセッション内容を紹介します。今年はAccessible Graphics for High Pixel Density Eraと題して、アイコンフォントのアクセシビリティに関する内容を発表しました。講演資料はSlideshareで公開しています。
このセッションでは、アイコンフォントを利用する場合に発生しがちなアクセシビリティ上の問題を2つ取り上げています。
1つはアイコンフォントの代替テキストの問題です。アイコンフォントを使うと高解像度ディスプレイに対応したアイコンを簡単に提供できますが、代替テキストが提供されていない事例が見受けられます。せっかく綺麗なアイコンを設定しても、ユーザーに情報が届かなければ意味がありません。
TechCrunchの記事「The Smart Home Is Going To Be A Huge Boon To Accessibility 」のスクリーンショット。TechCrunchではFacebookやGoogle+のロゴがアイコンフォントを利用して表現されている。
TechCrunchの記事を、サイトの指定したフォントを無効にしOpenDyslexicフォントを利用して閲覧した場合のスクリーンショット。FacebookやGoogle+のロゴが表示されていた場所に代替となるテキストが表示されない。また、このような問題に対する「対応策」として、画面上に見えないテキストを追加する手法が紹介されることがあります。しかし、この「対応策」もスクリーン・リーダーには有効でも、テキストの情報が伝わらない環境があります。具体的には、ユーザーがサイトの指定したフォントを無効にしている場合やアイコンフォントのダウンロードに失敗した場合に、アイコンが表示されず、かつ、代替となるテキストが画面に表示されません。
2つ目の問題は、サイトの意図とは全く異なるアイコン（文字）が画面上に表示される、という問題です。この問題も、ユーザーがサイトの指定したフォントを無効にしている場合やアイコンフォントのダウンロードに失敗した場合に発生しえます。全く異なるアイコンが表示されれば、ユーザーはコンテンツを理解できなかったり誤解してしまうでしょう。
TechCrunchの記事を、サイトの指定したフォントを無効にしLinux Libertineフォント（Linux Biolinum）を利用して閲覧した場合のスクリーンショット。FacebookやGoogle+のロゴが表示されていた場所にLinux Libertineフォントのロゴが表示されており、内容を正しく理解することができない。さて、これらの問題はアイコンフォントの中でもPUAアイコンフォントと呼ばれるUnicodeのPrivate Use Areas（私用領域）を使ったアイコンフォントで発生しがちです。しかし、リガチャ―アイコンフォントでは、使い方に気をつければこれらの問題は発生しません。高解像度ディスプレイへの対応が必須の今、アクセシブルなグラフィックスを提供していきましょう、という内容を発表しました。
さて、セッションの質疑応答では、「アイコンフォントは、SVG（Scalable Vector Graphics）のように画面幅などに応じて画像の見た目を変える、ということは可能か」といった質問もありました。画面幅に応じて見た目を変えることは通常のアイコンフォントでは無理ですので、そのような場合にはSVGを使う必要があるでしょう。当ブログでも今後はSVGも紹介していきたいと考えています。