ウェブアクセシビリティにおけるフォントや文字サイズの重要性｜具体的な改善ポイント

ウェブアクセシビリティにおけるフォントや文字サイズの重要性

ウェブアクセシビリティに配慮されたウェブサイトを作成する上で、テキストに関する配慮は最重要と言えます。

フォントと文字サイズの二つに分けて考えてみましょう。

フォント

フォントを自由に選ぶと、テキストの形やスタイルの選択肢が広がり、デザイン性豊かなウェブサイトになります。

昨今では、テクノロジーやデザインツールのアップデートにより、数多くのフォントの選択肢があります。さらに、独自のフォントをアップロードして使用することすらもできます。

しかし、ウェブサイトで使用するフォントは、多くの人が認識しやすいよう、簡単に読めることが重要です。

明確で読みやすいフォントは、視覚障がい者・高齢者、または、ディスレクシアという読字障害者にとって非常に助かるものなのです。

文字サイズ

主に高齢者にとって、小さな文字は見えづらくなってしまいます。

可能な限り小さいフォントサイズは避けましょう。多くのウェブサイト制作業者は、テキストは 14ピクセル以上（18ピクセル以上の場合も有）にするように指示しています。

文字サイズを小さくしてしまうと、見えない人も出てしまうのです。

フォントに関する世界的な基準

ウェブアクセシビリティを語る上では、世界的な基準であるWeb Content Accessibility Guidelines (WCAG) 2.0が重要です。

しかし、実は、フォントに関する世界的な基準はありません。

というのも、世界各国により言語が違う以上、フォントも各国で異なっており、それを世界的にひとくくりにして語ることができないからです。

一方で、国ごとに各言語指定することもできず、結果的に世界的な基準ができていない現状があります。

このため、世界的な基準であるWeb Content Accessibility Guidelines (WCAG) 2.0においても、フォントに関してはほぼ記述がなく、文字サイズに関しての記述がほとんどです。

しかしながら、例えば、目安として以下などに注意すると良いでしょう。

・曖昧さのないフォントにする

・複雑さのないフォントにする

・バランスが取れたフォントを選択する

・文字は並んでいてもお互いに識別しやすい（文字間が空きやすい）ものを選択する

・サイトで使用できるフォントの数を多くしない

・同じテキストブロックに複数の書体を含めない

文字サイズに関する世界的な基準

Web Content Accessibility Guidelines (WCAG) 2.0という世界的な基準によると、指定のピクセル数だけではなく、ユーザーによって文字サイズの変更を2倍にまで大きくできるようにしましょう、と書かれています。

ウェブサイトのフォントサイズを自由に変更できるボタンを作るのなども良いでしょう。しかし、サイズ変更できる機能を搭載したらOKではありません。

拡大200%までのサイズ変更ができれば、Web Content Accessibility Guidelines (WCAG) 2.0達成基準はクリアです。

ちなみに、少し専門的な知識になりますが、文字サイズの大きさをピクセル指定してしまうと、ユーザー側でフォントサイズは変更しづらくなります。

絶対的な単位で指定してしまった場合に、ブラウザによってはサイトの閲覧者側で文字の大きさを変更することができないという仕組みがあるからです。

これを技術的に解決できるウェブサイトにしているのであればよいですが、そうではない場合には、ピクセル指定していると、文字の拡大・縮小ができないケースもありそうです。

文字サイズは%やem指定などが扱いやすく、相対値で指定することでアクセシビリティに対応しやすくなります。

しかし、技術者側もアクセシビリティの勉強が不足しているとこれらの事象を知らないことも多いです。

このため、自社のサイトは大丈夫かチェックしてみるといいでしょう。

なお、Web Content Accessibility Guidelines (WCAG) 2.0では、文字サイズを指定ではemを使うことをおすすめされているので、現状はこれに従うのが無難です。

NG例	OK例
pt（ポイント） px（ピクセル） in（インチ） cm（センチ）	em %

これらは、サイトが重くなりすぎないためにも、スタイルシートを用いるのが良いでしょう。

フォントや文字サイズについて例外はあるか？

上記の基準以外に例外があるかという質問がよくありますので、回答していきます。

行の高さも変更するべき？

行の高さは、最低でもフォントサイズの125％以上必要です。

もし文字が詰まって見にくい場合には、行の高さも変更しましょう。

UDフォントが推奨されている？

UDフォントとは、ユニバーサルデザインフォントです。

「ユニバーサルデザイン」の概念に基づいて作成されており、つまり、誰にとっても見やすく読みやすくなっているのです。

特に遠くから見ても読みやすいなどいろいろなシーンを前提にされています。

もともと判読性が高くなるようにデザインされているため、アクセシビリティの観点からすると非常に良いフォントです。

IDフォントとは何？

IDフォントとは、インクルーシブデザインフォントです。

インクルーシブデザインというのは、これまでサービス開発のターゲットから除外されてしまっていた障害者などと一緒に企画を進めることで、より多様な人たちに配慮されているデザインを意味します。

UDフォントよりも後発であることから、UDフォント以上に可読性が高いとされています。

例えば、横画が従来の線よりも太くなりましたが、これは日本の漢字特有の対策です。

これまでは漢字のデザインやレイアウトの関係上、縦が太く、横が狭くなっていたものの、横も太くすることでより見やすくなっているのです。

それ以外にも、カタカナや濁音を中心に細かい点がより見えやすくなって調整されています。

アクセシビリティに配慮されたフォントサイズの最小は？

基本的には、16ピクセルを限界にしましょう。

どうしても文字数が多いサイトは14ピクセルでも構いません。

ウェブデザインの作成において、最小のフォントサイズは10ピクセルなのですが、可読性があまりに低いため、使うのは避けましょう。

スクリーンリーダーで読まれないフォントサイズはある？

スクリーン リーダーでは、アクセシビリティの標準と技法に準拠していれば、機能するようになっています。

もし10ピクセルなどで記載してしまった場合、スクリーンリーダーに認識されない可能性があり、読み上げソフトウェアでウェブサイトを認識している人には情報が届かなくなってしまいます。

まとめ

ウェブアクセシビリティに配慮されたウェブサイトを作成するためには、フォントの種類やフォントサイズを変更する必要があります。

特にピクセル指定してしまっているウェブサイトはチェック項目が多岐にわたります。

emや％に一点ずつ書き換えるのも大変でしょう。

そこで、ウェブアクセシビリティAIを活用するのがおすすめです。ウェブアクセシビリティAIはアドオン機能なので、既存のウェブサイトはそのまま活用できます。

細やかな対応なしで、すぐにウェブアクセシビリティの基準をクリアしたサイトを作成できるのでまずは詳細を見てみてください！