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

Advertisement

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の情報

日本語環境だと関係ない

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

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

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

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

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

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

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

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

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。

“アイコンフォントとアクセシビリティ: ディスレクシア(失読症)向けフォントでの表示問題について” への1件のコメント