Webアクセシビリティの基本｜色のコントラストと代替テキストから始める
アクセシビリティは特別な対応ではなく、誰にとっても使いやすいサイトの土台です。色のコントラスト、代替テキスト、文字やリンクの表現など、中小企業でもすぐに取り組める基本と確認手順を解説します。
Webアクセシビリティとは、年齢や障害の有無、利用環境にかかわらず、誰もがWebサイトの情報を得て操作できるようにすることです。「うちのサイトには関係ない」「対応には専門知識が必要」と感じている方も多いかもしれません。
しかし、薄いグレーの小さな文字が読みにくい、画像の中にしか書かれていない情報がある、といった問題は、高齢の方や屋外でスマホを見る人など、多くの訪問者にとっての使いにくさでもあります。アクセシビリティへの配慮は、結果としてすべての人の使いやすさにつながります。
この記事では、中小企業のサイトでもすぐに取り組める基本として、色のコントラストと代替テキストを中心に、確認の手順とAIの活用方法を解説します。
アクセシビリティの基準を知っておく
Webアクセシビリティには、国際的なガイドラインとしてWCAG（ウェブコンテンツ・アクセシビリティ・ガイドライン）があり、日本ではこれと整合する日本産業規格JIS X 8341-3が定められています。達成基準にはA・AA・AAAの3段階があり、一般的にはAAが目標とされることが多いです。
また、2024年4月から改正障害者差別解消法が施行され、民間事業者にも障害のある人への「合理的配慮の提供」が義務化されました。Webサイトのアクセシビリティ対応がこの法律で直接義務づけられているわけではありませんが、環境の整備として取り組むことが望ましいとされています。自社にどこまでの対応が求められるかなど、個別の判断は専門家に確認してください。
すべての基準を一度に満たすのは大変です。まずは影響が大きく、取り組みやすい項目から始めましょう。特にAIやテンプレートで作ったデザインは、見た目の雰囲気を優先して淡い色の組み合わせが使われていることがあります。デザインの段階で確認しておけば、公開後に作り直すよりはるかに少ない手間で済みます。制作を外注する場合は、発注時に「文字のコントラストはAA基準を目安に」などと伝えておくと、確認の手間を減らせます。
色のコントラストを確保する
コントラストとは、文字の色と背景の色の明るさの差のことです。差が小さいと、視力が弱い人や色の見え方が異なる人、明るい屋外でスマホを見ている人にとって読みにくくなります。
WCAGのAA基準では、通常の文字で4.5対1以上、大きな文字で3対1以上のコントラスト比が目安とされています。コントラスト比は、無料で使える確認ツールに文字色と背景色の色コードを入れれば計算できます。
よくある問題と対策
| よくある問題 | 対策 |
|---|---|
| おしゃれに見せるため、本文を薄いグレーにしている | 本文は濃いグレーか黒に近い色にする |
| 写真の上に白い文字を直接載せている | 写真を暗くする、文字の背景に帯を敷く |
| ブランドカラーの明るい黄色や水色の上に白文字を置いている | 文字色を濃くするか、背景を濃い色に変える |
| エラーや必須項目を赤い色だけで示している | 「必須」などの文字やアイコンを併記する |
| リンクを色だけで区別している | 下線をつけるなど、色以外の手がかりも添える |
最後の2つは「色だけに頼らない」という原則に関わります。色の見え方には個人差があるため、色以外の手段でも情報が伝わるようにしておくことが大切です。ブランドカラーがコントラスト不足になる場合は、文字用に少し濃くした色をガイドラインに追加しておくと運用しやすくなります。
代替テキストを正しく書く
代替テキスト（alt属性）とは、画像の内容を文字で説明したものです。画面を読み上げるソフト（スクリーンリーダー）を使う人は、この代替テキストを通じて画像の内容を知ります。画像が表示されない環境でも代わりに表示されます。
書き方の基本
- 画像が伝えている情報を書く：「写真」ではなく、「工場で金属部品を検品するスタッフ」のように、その画像がページで果たす役割を書きます。
- 文字を含む画像はその文字を書く：バナーや図に書かれている文字は、代替テキストにも同じ内容を入れます。
- リンクやボタンの画像は行き先や機能を書く：「矢印」ではなく「次のページへ」のように書きます。
- 飾りの画像は空にする：内容に関係ない装飾画像は、代替テキストを空にして読み上げ対象から外します。
- 長すぎない：グラフなど情報量の多い画像は、要点を代替テキストに書き、詳細は本文で説明します。
そもそも、重要な情報を画像の中だけに入れないことも大切です。営業時間や料金などを画像の文字で載せると、読み上げられないだけでなく、検索エンジンやAIにも内容が伝わりにくくなります。
確認の手順とAIの活用
専門的な検査の前に、担当者が自分でできる確認の手順は次のとおりです。
- 主な色の組み合わせを洗い出す：本文、見出し、ボタン、リンク、写真上の文字など、使っている文字色と背景色の組み合わせを一覧にします。
- コントラスト比を確認する：確認ツールで各組み合わせを計算し、基準を下回るものに印をつけます。
- 画像の一覧を作る：サイト内の画像と、現在の代替テキストを一覧にします。CMS（ページを更新するための管理画面）から確認できることが多いです。
- 代替テキストを見直す：空欄、ファイル名のまま、内容と合っていないものを直します。
- 文字を拡大して見る：スマホやブラウザで文字を大きくしたとき、表示が崩れないかを確認します。
- キーボードだけで操作してみる：パソコンでTabキーを押して、リンクやボタンを順番に移動できるか、今どこにいるかが分かるかを確認します。
生成AIは、代替テキストの下書きづくりに便利です。例えば「この画像は会社案内ページで、スタッフの仕事ぶりを伝えるために使います。代替テキストを40字程度で3案出してください」と頼むと、たたき台が得られます。ただし、AIは写っている人物の役職や作業内容を推測で書くことがあります。事実と合っているかは必ず人が確認し、ページの文脈に合わせて修正してください。
まとめ
アクセシビリティは、一部の人のための特別な対応ではなく、すべての訪問者にとっての読みやすさ・使いやすさの土台です。まずは色のコントラストと代替テキストという、影響が大きく取り組みやすい2つから始めましょう。
次にやることとして、自社サイトのトップページで、本文・ボタン・写真の上の文字の3か所について、コントラスト比を確認ツールで測ってみてください。あわせて、トップページの画像の代替テキストが空欄になっていないかを確認すれば、改善の第一歩になります。