名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

デジタル庁では、「誰一人取り残されない、人に優しいデジタル化を。」というミッションを掲げており、例えば視覚に障害のある方や怪我で一時的に手が使えない方、高齢の方なども含めた全ての方がホームページ上から情報を正しく取得できるようアクセシビリティを考慮したホームページ制作を推奨しています。アクセシビリティを考慮することにより、ホームページの順位や問い合わせなどのCV数の向上にも関わるため、最新版のアクセシビリティに関してしっかりと理解を深めておきましょう。
そこで今回は、ホームページ制作で気を付けるべきアクセシビリティの中でも、テキストの表示方法に関してお伝えします。
※この記事は、2022年12月23日時点のウェブアクセシビリティ導入ガイドブックをもとに作成しています。最新の情報は、デジタル庁のウェブアクセシビリティ導入ガイドブックよりご確認ください。

画像や動画には代替テキストを設定しましょう

ホームページ上には、テキストの他にも写真やグラフ、イラストなどの画像や動画を掲載することができます。しかし、例えば視覚に障害のある方は画像のイメージを確認することが難しい場合があるため、「代替テキスト」として画像や動画の説明を設定してスクリーンリーダーでの読み上げに対応させる必要があります。代替テキストでは、画像や動画のタイトルのみを記載するのではなく、その画像や動画の内容が正しく想像できるよう詳細な説明を記載することが重要です。
なお、ロゴマークや画像化した見出しにおいては、ロゴマークや画像と同様のテキストを代替テキストとして設定しましょう。また、装飾目的で入れた図に代替テキストを設定すると意味のない情報まで読み上げられてしまうため、代替テキストは空白の状態にしておくと良いでしょう。

テキストの装飾だけで情報を伝えないようにしましょう

赤字や下線、太字などでテキストを強調するとその部分の重要性が伝わりますが、スクリーンリーダーでの読み上げにおいてはテキストの強調が表現されません。そのため、装飾ではなくテキストでその重要性を表現することが大切です。
例えば、お問い合わせフォームの項目が一部赤字などで強調されている場合、視覚に異常がない方は「必須項目」と認識してくれますが、視覚障害のある方や色覚特性がある方は必須項目であることに気づかない可能性があります。このように、テキストの強調だけで情報に意味を持たせることはウェブアクセシビリティ導入ガイドブックに反します。

スクリーンリーダーの読み上げ順を考慮しましょう

スクリーンリーダーは、ページの先頭から一つひとつのコンテンツを左上から右下に向かって内容を読み上げます。そのため、強調したい内容を上の方に持ってきたい気持ちは分かりますが、スクリーンリーダーでの読み上げを行った際に生合成を保つことができる順序でコンテンツを配置することが大切です。
なお、正しくはHTMLのソースコードに記載されている順に読み上げられるため、CSSなどでコンテンツの順序を入れ替えることで情報の意味が分からなくなってしまわないよう注意しましょう。

テキスト間にスペースや記号を含めないよう注意しましょう

文字間を調整するためにテキストとテキストの間にスペースを入れたり、「×」「-」「>」「★」などの記号をテキストとして入れるとスクリーンリーダーが正しく読み上げることができません。例えば、「日時」という言葉は「にちじ」と読まれますが、「日　時」とスペースを入れて記載された場合は「ひ、とき」と発音されるため注意する必要があります。

テキストと背景の色のコントラスト比に配慮しましょう

文字色と背景色の間のコントラスト比は、誰もが読みやすいよう配慮する必要があります。例えば、白い背景に薄い黄色の文字で書かれたテキストは可読性が低いと考えられるため注意する必要があります。
なお、テキストの大きさによって可読性の高いコントラスト比が異なるため、見出しや本文の大きさなどを考慮した上で細かく調整することが理想的です。

ブラウザでのテキストサイズの変更に対応しましょう

テキストサイズは、ブラウザの文字拡大機能を使用することにより200%まで大きくすることができます。この文字拡大機能は、HTMLタグで使用できないよう設定することもできますが、ユーザーが自身の視力などに応じて調整することができるように固定サイズのテキストを設定しないようにしましょう。
また、文字拡大機能によりテキストの大きさを変更した結果、隣同士で文字が重なり合ってしまうと可読性が低くなるため、テキストの大きさ変更による崩れが生じないよう注意することも重要です。

ホームページ上への支援機能の実装は意味がある？

文字拡大機能やテキストの読み上げ機能、背景色・テキスト色の変更機能などの支援機能をホームページ上に実装することでアクセシビリティの向上に繋がるとお考えの方もいらっしゃると思います。しかし、支援機能が必要なユーザーは既にOSやブラウザの拡張機能を利用していることが多く、ホームページ上に支援機能を追加することで過剰対応となって返ってユーザビリティを下げる可能性があるため、ウェブアクセシビリティ導入ガイドブックにおいては非推奨とされています。

アクセシビリティに配慮し時には情報を削ぎ落とすことも重要です

その他にも、例えばコンテンツの構造や図表の内容が複雑すぎる場合はアクセシビリティを低下させる要因となります。ホームページ制作を行っていると、あれもこれもと情報を詰め込みたくなってしまいますが、どんなユーザーにも情報が伝わりやすいようコンテンツを整理整頓いたり、図表を簡略化することが大切です。
また、どうしても言葉で補足しなければ分からないような内容であれば、時には情報を掲載しないという選択が正しい場合もあります。情報社会であるからこそ、ユーザーが最も理解度を高めやすいコンテンツとは何か考え抜き、全ての人に分かりやすいと思ってもらえるようなホームページを目指しましょう。

今回のまとめ

今回は、ホームページ制作で気を付けるべきアクセシビリティの中でも、テキストの表示方法に関してお伝えしました。テキストにおいては、スクリーンリーダーでの読み上げられ方や可読性の高いテキストサイズ・色、配置などに配慮しながらホームページを制作することが重要です。
なお、スクリーンリーダーは、前後の文脈からテキストを正しく読み上げてくれますが、固有名詞などにおいては読み間違える可能性があります。そのため、固有名詞にはカッコ書きで読み仮名をふるなど、工夫すると良いでしょう。
※この記事は、2022年12月23日時点のウェブアクセシビリティ導入ガイドブックをもとに作成しています。最新の情報は、デジタル庁のウェブアクセシビリティ導入ガイドブックよりご確認ください。