文章の可読性

『文字の形状』『文字間隔（カーニング）や行間』『サイズ』に気を配ることで可読性が高まるので、長文を扱う際に重要な役割を果たします。また、アクセシビリティの観点からは、以下のような理由で可読性の向上が求められます。

視覚に障害がある人

視覚に障害がある人たち、特に低視力や視力障害を持つ人たちにとって、適切なフォント選びやフォントサイズ、行間の調整は、テキストをスムーズに読み進めるために不可欠です。文字間隔や行間が適切でない場合、文字がつながったり重なったりして読みづらくなるため、可読性の高いデザイン、文章レイアウトが重要です。

学習障害を持つ人

学習障害を持つ人は知的な発達に大きな問題がなくても、『読む・書く・計算する』といった特定の学びがとても難しく感じることがあります。例えば、ディスレクシア（読み書きの困難）はそのひとつで、文字を読むのに時間がかかったり、文章を理解することがむずかしいと感じたりすることがあります。アクセシビリティ対応では、こうした人たちが情報にアクセスしやするために、フォントやレイアウトを工夫して誰にとっても見やすく使いやすいデザインになるように心がけます。

文章の視認性

『文字の太さとコントラスト』『フォントの簡潔さ』『大文字と小文字の形』などに気を使い視認性を高めれば、ボタンなどのUI（ユーザーインターフェイス）やラベルなどの情報を素早くキャッチすることが出来できます。

視覚に障害がある人

低視力や色覚異常のある人たちがコンテンツを認識しやすくするために、デザイン要素に十分なコントラストが求められます。視認性の高いフォント採用すれば、これらの人たちが情報を識別するための手助けとなります。

高齢者や低視力者

視認性が高いフォントは、視力の低下した人たちは、視覚的な手がかり（フォントの太さ、文字の形状など）を頼りにして情報を識別します。大きくて明確なフォントや、シンプルで飾りが少ないフォントを採用することでこれらの人びとの手助けとなります。

• 可読性：長文を読んで理解しやすいかという点にフォーカス
• 視認性：文字をすばやく認識できるかという点にフォーカス

『可読性』と『視認性』両方を高めることが、最終的により良いアクセシビリティ対応の鍵となります。

標準フォントとWEBフォント使い分け

WEBサイトで使われるフォントには初期状態からデバイスに搭載されている標準フォントと、Google Fontsなどのサービスからダウンロードして使うWEBフォントがあります。どのフォントを採用するにしても、WEBサイトの特徴に沿て慎重にフォントを選定することをおすすめいたします。

ユニバーサルデザインパターン

font-family:   "BIZ UDPGothic",   "Noto Sans JP",   Meiryo,   "Yu Gothic",   sans-serif;

BIZ UDPGothicがメインとなり、アクセシビリティ対応を重視（特に視認性）で高齢者・弱視ユーザー・学習障害など幅広いニーズに対応したユニバーサルデザインパターンです。アクセシビリティ最優先のWEBサイト（福祉系、病院、行政サイトなど）や、高齢者や障害を持つユーザーが多い対象のWEBサービスに向いています。

適切なフォントサイズ、行間、文字間の調整ポイント

アクセシビリティ対応においては『誰にとっても読みやすい』、つまり視力の弱い人・読み書きに困難があるなどなんらかの障害を持つ人や高齢者に『誤読・疲労が起きにくい文字設計』をすることが重要です。

デジタル庁では本文のサイズは16px(1rem)以上、見出し含めて45pxまでのサイズを構成する文章の文字サイズと定めています。また、14pxの小さい文字はフッター要素などの付随する要素やUIやコンテンツを構成する際の領域的な制約がある場合のみに使用を限定していて、14px未満の文字は原則使用しないと定められています。

html {
	font-size: 100%;
}
body {
	font-size: 1rem;//16px相当
	font-family: "Noto Sans JP",    Meiryo,   "BIZ UDPGothic",   "Yu Gothic",   sans-serif;
	font-weight: 400;
	line-height: 1.5;
	color: #000000;
}

行の長さ：1行の文字数

情報が取得しにくいデザインは、1行の文字数が長く視線移動が大きくなるレイアウトです。このようなレイアウトは『素早く情報を得られない』『読み疲れて情報が頭に入りにい』など情報取得が難しいケースが多く、優れたUX体験を提供するデザインとはいえません。理想は日本語で35～45文字程度、英語で60～75文字程度で、レスポンシブ対応時もこの文字数を意識ながらレイアウトを設計していきます。

文章の配置

一般的なWEBサイトのテキストは左揃えが基本となっています。テキストの両端揃えは紙媒体では整って見えることもありますが、WEBサイトでは単語間のスペースが不自然に空いてしまい、可読性が落ちることがあります。

段落の長さと余白の使い方

文章の1段落は2～5行以内に収めると、視認性と集中力の持続に効果的です。段落間には適度なマージン（余白）を設けることで、文章のまとまりが明確になります。『詰めすぎない』『空けすぎない』がWEBサイトの文章作成のポイントとなります。

コントラスト比と背景色

テキストと背景のコントラスト比が十分でないと、視力多様性を持つ人たちにとって読みにいコンテンツとなってしまいます。WCAGでは、通常のテキストは 4.5:1以上、大きな文字（18pt以上または14pt太字）は 3:1以上が推奨されています。テーマカラーを基準に、背景色にも気をつけながらまぶしすぎない中間色を採用するなどデザインとアクセシビリティのバランスを意識しましょう。

文字拡大時の考慮ポイント

emやremを使用

font-size: 1rem; // 基準が16pxの場合は16pxになる
padding: 1.5em;

フォントサイズやマージン、パディングなどを相対的な単位で設計することで、ズームしても自然に拡大されます。

フレックスレイアウトを使用

.container {
  max-width: 60ch; // 文字数ベースの幅指定もおすすめ
}

width: 500px; のように固定幅にしていると、拡大時に横スクロールが発生しやすくなるので、% や max-width を使ったレスポンシブなレイアウトを心がけましょう。

レイアウトの崩れ

文字サイズを200%にした際、display:flexなどでレイアウトしていると段落ちしてしまうことがあります。WCAG 2.1（1.4.4 Resize text）で提示されている「崩れない」は、情報が欠落しない／操作ができなくならないという意味合いが強くて、視覚的に「段組みが崩れる」「折り返しが変わる」みたいなものはユーザーの視線移動やリズムを整える助けになり、むしろ良い変化の場合もあります。なので、デザイン観点での「崩れる」を再定義する必要があります。

Before / Afterで「読みづらさ」を可視化

読みづらいページは、実は見慣れてしまって気づきにくいものです。そこで役立つのが「Before / After」の視覚的な比較です。

読みやすい例のCSS設定例

body {
	font-size: 16px;
	line-height: 1.6;
	max-width: 600px;
}

情報を「構造化」して視認性をアップ

アクセシビリティ対応においては、ただ文章を整えるだけでなく情報の『構造』をきちんと設計することも重要です。見た目だけでなく情報の構造まできちんとデザインすることで、視覚多様性の人たちが読み上げソフトを使う手助けになるなど、よりアクセシブルで質の高いWEBサイトとなります。

ツールを使って「読みやすさ」をチェック

完成したWEBページは見た目や感覚だけではなく、ツールで客観的にきちんとアクセシビリティ対応されているかを確認することも大切です。

文章の読みやすさチェックツール

アクセシビリティチェック表

またアクセシビリティのチェック表はエクセルデータなどで一覧で用意しておくのもおすすめします。情報通信アクセス協議会・ウェブアクセシビリティ基盤委員会が独自に定めたウェブコンテンツの JIS X 8341-3:2016 対応度表記ガイドラインを用意しています。現在、このガイドラインが一般的なチェック基準となっていますので一読することをおすすめいたします。

また、私たちケイツー・インタラクティブでも、『ウェブコンテンツの JIS X 8341-3:2016 対応度表記ガイドライン』を基に『ウェブアクセシビリティ試験』を実施しました。こちらのページにチェック表も掲載していますので是非参考にしてみてください。