文字のアクセシビリティとは?ユニバーサルデザインフォントとWCAG基準を解説

文字のアクセシビリティの基本

まずは文字のアクセシビリティとは何か、そして基準になるWCAGがどんなものかを押さえましょう。

文字のアクセシビリティとは何か

文字のアクセシビリティとは、年齢や視力、使っている機器や環境に関係なく、誰もが文字の情報を読み取れるようにすることです。

アクセシビリティ(accessibility)は「近づきやすさ」「利用しやすさ」という意味の英語で、Webでは「誰もが情報やサービスを利用できる状態」を指します。

文字が読めないと、そのページの情報はまったく伝わりません。

たとえば、次のような人にとっては、文字のサイズや間隔、色の差がそのまま「読めるかどうか」を左右します。

• ロービジョン(眼鏡などで矯正しても見えにくさが残る状態)の人
• 小さな文字が見えにくくなってきた高齢の人
• ディスレクシア(文字の読み書きに困難がある学習障害)のある人
• 日差しの強い屋外で、スマートフォンの画面を見ている人

最後の例のように、アクセシビリティは障害のある人だけのものではなく、状況によっては誰にでも関係する問題です。

基準になるWCAGとは

文字のアクセシビリティを考えるときの基準になるのが、WCAG(ダブリューキャグ、Web Content Accessibility Guidelines)です。

WCAGは、Webの標準を決める団体W3Cが作っている、Webコンテンツを利用しやすくするための国際的なガイドラインです。

WCAGには「達成基準」と呼ばれる具体的なチェック項目があり、それぞれにA・AA・AAAの3段階のレベルが付いています(Aが最低限で、AAAが最も厳しいレベルです)。

Webサイトでは、レベルAAまでを目標にすることが多くあります。

WCAGの原文は英語ですが、ウェブアクセシビリティ基盤委員会(WAIC)がWCAG 2.2の日本語訳を公開しているので、この記事でもこちらを引用しながら説明します。

文字に関係する主な達成基準は、次のとおりです。

達成基準	レベル	ひとことで言うと
1.4.1 色の用途	A	色だけで情報を伝えない
1.4.3 コントラスト(最低限)	AA	文字と背景の明るさの差を確保する
1.4.4 テキストのサイズ変更	AA	文字を200%まで拡大しても読める
1.4.5 文字画像	AA	文字は画像ではなくテキストで表示する
1.4.12 テキストの間隔	AA	行間や字間を広げても崩れない

次のグループで、これらを1つずつ見ていきます。

文字のアクセシビリティで押さえるポイント

ここでは、WCAGの達成基準をもとに、文字のアクセシビリティを高めるための具体的なポイントを紹介します。

文字を拡大しても読めるようにする

文字は、利用者が拡大しても内容が欠けたり重なったりしないように作ります。

WCAGの達成基準1.4.4 テキストのサイズ変更では、テキストは「コンテンツ又は機能を損なうことなく、支援技術なしで200%までサイズ変更可能である」ことが求められています(支援技術とは、画面拡大ソフトなど、障害のある人が使う特別なツールのことです)。

つまり、ブラウザに標準で付いている拡大機能や文字サイズの設定だけで、文字を2倍にしても問題なく読めることが目安です。

そのためにWeb制作でできることは、主に2つあります。

1つ目は、文字サイズをremのような相対的な単位で指定することです。

remは、ブラウザの基準の文字サイズに対する倍率で大きさを決める単位なので、利用者がブラウザの設定で標準の文字サイズを大きくすると、それに合わせてページの文字も大きくなります。

これに対してpx(ピクセル)は、画面上の決まった大きさで指定する「絶対的な単位」です。

font-size: 16pxのように指定すると、利用者がブラウザの設定で標準の文字サイズを大きくしても、その文字は16pxのまま変わりません(ページ全体を拡大するズーム機能ならpxの文字も大きくなりますが、文字サイズの設定には追従しません)。

一方、1.5remと指定した文字は、標準の文字サイズが16pxなら24px、利用者が20pxに設定していれば30pxというように、設定に連動して大きさが変わります。

次のCSSは、本文を基準の文字サイズ(1rem)、見出しをその1.5倍にする例です。

body {
  font-size: 1rem;
}

h2 {
  font-size: 1.5rem;
}

このように指定しておけば、利用者の設定に合わせて本文も見出しも同じ比率で大きくなります(remとemの違いはrem em 違いで解説しています)。

画面幅に合わせて文字サイズを変える場合も、vwだけで指定すると利用者が文字を大きくしにくくなるので注意が必要です(レスポンシブタイポグラフィとは?)。

2つ目は、スマートフォンでの拡大(ピンチ操作)を禁止しないことです。

HTMLの<meta name="viewport">にuser-scalable=noなどを書くと拡大できなくなりますが、MDNの解説でも、弱視の人がページを読めなくなるとして注意が呼びかけられています。

行間や字間を広げても崩れないようにする

利用者が読みやすいように行間や字間を広げても、文字が切れたり重なったりしないレイアウトにします。

ディスレクシアのある人などは、ブラウザの拡張機能などで行間・字間を広げて読むことがあるからです。

WCAGの達成基準1.4.12 テキストの間隔では、次の4つをすべて設定しても、コンテンツや機能が失われないことが求められています。

項目	設定する値	CSSでいうと
行の高さ(行送り)	フォントサイズの少なくとも1.5倍	line-height: 1.5
段落に続く間隔	フォントサイズの少なくとも2倍	段落の下に2emの余白
文字の間隔(字間)	フォントサイズの少なくとも0.12倍	letter-spacing: 0.12em
単語の間隔	フォントサイズの少なくとも0.16倍	word-spacing: 0.16em

ここで大事なのは、制作者が最初からこの値で文字を組む必要はない、という点です。

WCAGの注記にもあるとおり、求められているのは「利用者がこの値に上書きしたときに、内容や機能が失われないこと」です。

なお、表のemは、その文字自体のサイズに対する倍率を表す単位で、たとえば16pxの文字なら0.12emは約2pxになります。

制作時にこれらの値を自分で計算して設定する必要はなく、「利用者が間隔を広げても崩れない作りになっているか」を意識しておけば大丈夫です。

よくある失敗は、ボタンやカードの高さを固定してしまうことです。

左の見本では、ボタンの高さを固定しているため、行間と字間を広げた結果、はみ出した2行目が隠れて読めなくなっています。

右の見本のように高さを固定せず、文字の量に合わせて箱が伸びるようにしておけば、間隔を広げても内容が失われません。

CSSでいうと、heightで高さを決めるのではなく、上下の余白(padding)で高さを作るのがコツです。

/* NG:高さを固定している */
.button {
  height: 50px;
}

/* OK:上下の余白で高さを作る */
.button {
  padding: 0.75em 1.5em;
}

こうしておけば、文字が大きくなったり2行に折り返したりしても、ボタンが中身に合わせて縦に伸びます(ボタンの最低限の高さをそろえたいときは、heightの代わりにmin-heightを使います)。

ふだんの本文の文字サイズ・行間・行長の考え方は読みやすい本文とは?、行間・字間の細かな決め方は、行間と行長やカーニングとトラッキングで解説しています。

文字は画像ではなくテキストで表示する

見出しや説明文などの文字は、画像に埋め込まず、HTMLのテキストとして表示するのが基本です。

画像になった文字は、拡大すると粗くなったり、行間や色を利用者の見やすい設定に変えられなかったりするからです。

WCAGの達成基準1.4.5 文字画像でも、技術的に可能な場合は、文字画像ではなくテキストで情報を伝えることが求められています。

なお、ロゴやブランド名の一部である文字(ロゴタイプ)は、この基準では例外として扱われています。

バナー画像のように文字を画像に含めるしかない場合は、画像の代わりに読み上げられる説明文(alt属性)に、画像内の文字と同じ内容を入れておきましょう。

文字と背景のコントラストを確保する

文字の色と背景の色には、はっきりとした明るさの差(コントラスト)をつけます。

サイズや書体をどれだけ工夫しても、背景に溶け込む色では文字が読めないからです。

WCAGの達成基準1.4.3 コントラスト(最低限)では、通常の文字は4.5:1以上、サイズの大きな文字は3:1以上のコントラスト比が求められています。

コントラスト比とは、文字の色と背景の色の明るさの差を「〇:1」という比率で表したもので、同じ色どうしの1:1から、白い背景に黒い文字の21:1までの範囲になります。

数字が大きいほど差がはっきりしていて読みやすい、と覚えておけば十分です。

また「サイズの大きな文字」は、目安として24px以上、太字なら約18.7px以上の文字を指します。

比率を自分で計算する必要はなく、色コードを入力するだけで判定してくれる無料のチェックツールで確認できます。

左の薄いグレーの文字は基準に届かず読みにくく、右の濃いグレーの文字は白い背景の上でもはっきり読めます。

コントラスト比の意味や測り方は、コントラスト比とは?で詳しく解説しています。

色だけで情報を伝えない

リンクや注意書きなどは、文字の色だけで区別せず、下線や太字、記号などもあわせて使います。

色の見え方は人によって違い、色の違いだけでは区別がつかない人もいるからです。

WCAGの達成基準1.4.1 色の用途でも、色が情報を伝える唯一の手段にならないことが求められています。

左の見本は色の違いが分かりにくい人にはリンクだと気づきにくく、右の見本は下線があるので色が分からなくてもリンクだと分かります。

この基準の詳しい考え方は、色だけに頼らないデザインとは?で解説しています。

読み間違えにくい書体を選ぶ(ユニバーサルデザインフォント)

書体(文字のデザイン)を選ぶときは、形が似ている文字を読み間違えにくいものを選ぶと、アクセシビリティが高まります。

書体によっては、小さなサイズで「1(数字のいち)」「l(小文字のエル)」「I(大文字のアイ)」のような文字の区別がつきにくいことがあるからです(数字の読み間違いを防ぐ書体の選び方は数字・記号の扱いとは?で解説しています)。

欧文の書体は、大きく「セリフ体」と「サンセリフ体」に分けられます。

セリフ体は、文字の線の端に「セリフ」と呼ばれる小さな飾りが付いた書体で、日本語でいえば明朝体のウロコ(線の端にある三角形の部分)に近いものです。

サンセリフ体は、フランス語で「〜がない」という意味の「sans」が付いているとおり飾りのない書体で、日本語のゴシック体に近い見た目です。

どちらも左から I(大文字のアイ)、l(小文字のエル)、1(数字のいち)、O(大文字のオー)、0(数字のゼロ)。表示される書体は閲覧環境によって変わります。

左の見本では縦棒のような文字が並んで区別しにくく、右の見本では文字の端の飾りの違いで見分けやすくなっています。

こうした読み間違いを減らすために作られているのが、UD(ユニバーサルデザイン)フォントです。

ユニバーサルデザインとは、年齢や障害の有無などにかかわらず、できるだけ多くの人が使いやすいように最初から設計する考え方のことです。

たとえばフォントメーカーのモリサワは、UDフォントの紹介ページで「文字の形がわかりやすい」「文章が読みやすい」「読みまちがえにくい」の3つをコンセプトに掲げています。

特にサンセリフ体(ゴシック体)はすっきりして画面で読みやすい反面、似た形の文字が見分けにくくなりがちなので、UDフォントでは文字の形に違いをつけて区別しやすくする工夫がされています。

Webで試すなら、Google Fontsで公開されているBIZ UDPゴシックのように、無料で使えるUDフォントもあります。

UDフォントにはゴシック体だけでなく明朝体もあり、Google FontsではBIZ UDP明朝も公開されています。

ただし、UDフォントを使えばそれだけで十分というわけではなく、ここまで紹介したサイズ・間隔・コントラストへの配慮とあわせて考えることが大切です。

似た文字の見分けやすさ(判読性)の考え方は視認性・可読性・判読性の違い、目的に合った書体の選び方は見やすいフォントの選び方で解説しています。

実践のポイント

文字のアクセシビリティで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

• デザインの見た目を優先して、注釈や補足の文字を極端に小さく、薄い色にしてしまうことがあります。
  注釈にも大切な条件が書かれていることが多いので、読める大きさとコントラストを確保しましょう。
• ボタンや見出しの枠の高さを固定し、文字を拡大したり間隔を広げたりすると文字が切れてしまうことがあります。
  高さは固定せず、中の文字に合わせて広がるようにしておきましょう。
• キャッチコピーや説明文を、デザインを崩さないために画像にしてしまうことがあります。
  画像の文字は拡大や読み上げに対応しにくいため、可能な限りテキストで表示しましょう。
• 自分のパソコンの大きな画面だけで確認してしまうことがあります。
  スマートフォンでの表示や、ブラウザで200%に拡大したときの表示も確認しましょう。

よくある質問

• Q. 本文の文字サイズは何px以上にすればいい?
  A. WCAGには「本文は何px以上」という決まった数値はありません。
  求められているのは、利用者が拡大しても内容が失われないことです。
  そのうえで、Webの本文はブラウザの標準である16px前後を目安にすると、多くの人にとって読みやすくなります。
  役割ごとの文字サイズの決め方は文字サイズとは?、PCとスマホそれぞれの目安はPC・スマホの文字サイズとは?で解説しています。
• Q. 自分のページが基準を満たしているか、簡単に確認する方法は?
  A. まずはブラウザの拡大機能で200%に拡大し、文字が切れたり重なったりしないかを見てみましょう。
  コントラストなど一部の項目は、Googleの無料ツール「Lighthouse」でも自動でチェックできます。
  使い方はGoogle Lighthouseとは?で紹介しています。
• Q. UDフォントを使えば、アクセシビリティは十分?
  A. 十分とはいえません。
  UDフォントは読み間違いを減らすのに役立ちますが、文字が小さすぎたり、背景とのコントラストが低かったりすれば読みにくいままです。
  書体選びは、サイズ・間隔・コントラストへの配慮とセットで考えましょう。

まとめ

文字のアクセシビリティとは、年齢や視力、利用環境に関係なく、誰もが文字の情報を読み取れるようにすることです。

WCAGを目安に、拡大しても崩れない、行間・字間を広げても欠けない、文字は画像にしない、コントラストを確保する、色だけに頼らない、という点を押さえ、必要に応じて読み間違えにくいユニバーサルデザインフォントを選びましょう。

まずは自分が作ったページをブラウザで200%に拡大して、文字が切れたり重なったりしている箇所がないか確認してみてください。