アイコンフォントとアクセシビリティ： ディスレクシア（失読症）向けフォントでの表示問題について

「Death to Icon Fonts（アイコンフォントに死を） 」というSeren D さんのスライドプレゼンテーションで、アイコンフォントではディスレクシア向けのフォントで問題が起こるし、他にも課題があるので使用は控えたほうが良いですよ、ということを訴えています。A List Apartブログ で紹介されていて気になったので、どんな問題が起こるのか確認してみました。

どんな問題が起こるのか

「Death to Icon Fonts 」では、ディスレクシア（日本では失読症、難読症、読字障害などと呼ばれている）向けに作られたフォント「OpenDyslexic 」で問題が起こることが紹介されていて、アイコンフォントにはその他にもアクセシビリティ上の問題がいくつかあるため、使わないほうが良いと勧めています。

これはフォントを強制的にOpenDyslexicなどのディスレクシア対応のもので表示させる際に、UnicodeのPUA（Private Use Area）を使ったアイコンフォントだと、「□」で表示される場合があるという問題です。

Font Changerを使った場合

たとえば、Chromeの拡張機能の「Font Changer 」を使ってディスレキシア向けのフォント「OpenDyslexic3 Regular」でこのブログを表示させると、以下のようにアイコンフォントが使われているブログのタイトルの「R」やソーシャル・アイコンの部分が「□」で表示されてしまいます。

通常は以下のように表示されています：

OpenDyslexicを使った場合

他にも「OpenDyslexic 」というChrome拡張機能があって、これを利用するとアイコンフォントまでは入れ替えられないらしく、このブログも問題なく表示されました。アイコンフォントはそのまま表示され、英字部分だけディスレクシア向けのフォントで表示されました。

ディスレクシアの方でも、それぞれの好みでツールを選択していると思うので、すべてのケースでアイコンフォントの問題が起こるとは言えなさそうです。

ディスレクシアとは？

せっかくの機会なので、ディスレクシアについて、ざっくり調べてみました。要点を簡単にまとめると以下のとおりです：

• 文字の並びが逆に見えてしまうなどの症状があり、読み書きが困難になる
• 日本では「失読症」「難読症」「読字障害」と呼ばれる
• 日本人の失読症には2つタイプがあって、1つはカナが読めない、もう1つは漢字が読めないタイプ（参考： 失読症（Dyslexia, alexia） ）
• 英語圏では人口の10%、日本では5%がディスレクシアだと言われている
• 原因は不明だが、知的能力には問題がない
• 上述した「OpenDyslexic」のようなフォントがすべてのディスレクシアの方に有効であるわけではない。Comic SansやVerdanaを好んで使う方もいる（参考： OpenDyslexic FAQ ）
• 日本ではあまり研究が進んでいない（参考： Wikipediaの情報 ）

日本語環境だと関係ない

日本語のディスレクシア向けのフォントはないようですし、言語によってディスレクシアの症状は異なるらしいので、今回指摘されていたフォントの問題に限定すると、日本語環境ではこの問題は関係ないと言えそうです。日本語のサイトのみなら問題ないですが、昨今ではグローバル向けに情報を発信している企業や組織も多いでしょうから、英語サイトの場合はアイコンフォントを使うとこういった問題が起こりうることは知っておいて良さそうです。

ディスレクシアについて参考にしたサイト

ディスレクシアについては、以下のようなサイトを参考にさせていただきました。

• ディスレクシア — Wikipedia
• ディスレクシアとは — 大阪大学大学院 生命機能研究化
• Understanding Dyslexia — Papero
• Dyslexie というフォントもあるらしい。このGigazineの記事では、ディスレクシアの症状と、それを緩和するためのフォントのデザインについて詳しく書かれています。
• ディスレクシアのチェックテスト

アイコンフォントとアクセシビリティについて

最後にアイコンフォントとアクセシビリティについて、少しだけ書いておきます。アイコンフォントには、以下の3つの課題があるのですが、アクセシブルな実装が不可能ではないようです。

1. 音声リーダーで、意図しないように読み上げられる可能性がある
2. UnicodeのPUAを使ったアイコンフォントで、フォントが読み込まれない場合のフォールバックが難しい
3. 2を回避するために「リガチャー」を使った方法があるが、リガチャー機能のブラウザサポートが不十分

アイコンフォントの3つの課題の詳細とアクセシブルな実装方法は、filament groupのブログ記事「Bulletproof Accessible Icon Fonts — filament group 」で詳しく紹介されているので、そちらを参照いただければと思います。ありがたいことに、hail2uさんが日本語訳 をしてくれています。

アイコンフォントについて参考にしたサイト

• Bulletproof Accessible Icon Fonts — filament group
• 安全でアクセシブルなアイコン・フォント （上記記事の日本語訳）
• アイコンフォントに aria-label でラベルを付ける — Website Usability Info
• アイコンフォントのアクセシビリティと適切な利用方法 — digiper
• Icon System with SVG Sprites — CSS-Tricks （やっぱり、アイコンの実装もSVGが主流になっていくんでしょうか）
• アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう — Webクリエイターボックス

2015年7月20日に公開され、2016年1月30日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存