「うちのサイト、スマホの読み上げ機能で使えないんですけど」——ある日、営業先のお客様からこんな指摘を受けた担当者がいました。社内のWeb担当は1人。制作会社に任せきりのサイトに、読み上げ対応なんて考えたこともない。そもそも「Webアクセシビリティ」という言葉自体、聞いたことはあるけれど、何から手をつければいいのかさっぱりわからない。

この状況、実は珍しくありません。従業員50〜300名規模の企業サイトでは、アクセシビリティ対応はまだまだ手つかずのケースが大半です。しかし、2024年4月の障害者差別解消法の改正で、民間事業者にも合理的配慮の提供が法的義務となりました。Webサイトも例外ではありません。

とはいえ、難しく考える必要はありません。アクセシビリティ対応は「特別な技術」ではなく、「すべての人が情報にたどり着ける設計」です。この記事では、専門のエンジニアがいなくても着手できる5つの改善ポイントを、具体的な手順とともに紹介します。

Webアクセシビリティとは「使える人を増やす」こと

Webアクセシビリティとは、年齢や障害の有無にかかわらず、誰もがWebサイトの情報やサービスを利用できる状態を指します。W3C（Web技術の国際標準化団体）が策定したWCAG（Web Content Accessibility Guidelines）2.2が、世界的な基準として広く採用されています。

「障害者向けの対応でしょ？」と思われがちですが、実際にはもっと幅広い話です。

たとえば、こんな場面を想像してみてください。

  • 営業先で直射日光の下、スマホで自社サイトの事例ページを見せたい。でもコントラストが低くて文字が読めない
  • 50代の経営者が老眼鏡なしで資料請求フォームを入力しようとしたが、入力欄のラベルが小さすぎて何を入れればいいかわからない
  • 腕を骨折中の社員がマウスを使えず、キーボードだけでグループウェアを操作したい

これらはすべて、アクセシビリティの問題です。障害のある方だけでなく、一時的に身体が不自由な人、高齢者、あるいは利用環境に制約がある人も含めて、「使える人を増やす」のがアクセシビリティの本質です。

ビジネス上のメリットは想像以上に大きい

アクセシビリティ対応は「コスト」ではなく「投資」です。具体的には次のような効果が期待できます。

顧客層の拡大: 日本の65歳以上人口は約3,600万人（総人口の約29%）。視力や聴力に制約がある方を含めると、アクセシビリティの恩恵を受ける潜在顧客は非常に多い層です。

SEOへの好影響: Googleの検索エンジンは「ユーザーにとって使いやすいサイト」を高く評価します。代替テキストの適切な設定、見出し構造の整理、ページの読み込み速度の改善は、アクセシビリティ対応とSEO施策が重なるポイントです。

法的リスクの回避: 前述の障害者差別解消法の改正により、合理的配慮を怠ると行政からの指導や企業イメージの低下につながる可能性があります。デジタル庁のウェブアクセシビリティ導入ガイドブックでは、民間事業者が取り組むべき具体的な内容が解説されています。

ブランド信頼性の向上: アクセシビリティに配慮したサイトは、「この会社はすべてのお客様を大切にしている」という印象を与えます。BtoB取引でも、取引先のWebサイトの品質は企業評価の一部です。

改善ポイント1：画像の代替テキスト（alt属性）を見直す

最も基本的で、最も効果が大きいのが画像の代替テキスト（alt属性）の見直しです。

alt属性とは、HTMLの <img> タグに設定する「画像の説明文」のことです。スクリーンリーダー（画面読み上げソフト）は、この説明文を読み上げることで、視覚に障害がある方に画像の内容を伝えます。また、画像が表示されない環境（通信速度が遅い場合など）でも、alt属性のテキストが代わりに表示されます。

よくある問題パターン

ありがちなのが、すべての画像に「画像」「img」「photo」といった意味のないalt属性が設定されているケース。あるいは、alt属性自体が空のまま放置されている場合も多いです。

制作会社に「全部の画像にaltを入れてください」と依頼した結果、ファイル名がそのまま入っている（alt="DSC_0032.jpg"）というケースも見かけます。これではスクリーンリーダーが「DSC_0032.jpg」と読み上げるだけで、何の画像かまったくわかりません。

改善の具体的な手順

alt属性は「この画像が見えない人に、何を伝えたいか」を基準に書きます。

製品写真の場合: 「ステンレス製の業務用棚（幅120cm、5段）。工場の作業場に設置された状態」のように、形状・素材・サイズ・使用シーンがわかる記述にします。

グラフや図解の場合: 「2025年度の月別売上推移グラフ。4月の120万円から12月の310万円へ右肩上がり」のように、グラフが伝えたいメッセージを文章で要約します。

装飾画像の場合: 区切り線やデザイン上の飾り画像など、情報を持たない画像は alt="" と空にします。これはスクリーンリーダーに「この画像は読み上げ不要」と伝える正しい方法です。

まずは自社サイトのトップページと、問い合わせに直結する主要ページの画像altを棚卸ししてみてください。CMSの管理画面から「メディアライブラリ」を開けば、一覧で確認できることが多いです。

改善ポイント2：色のコントラスト比を確保する

文字色と背景色のコントラスト（明暗の差）が不十分だと、高齢者や色覚に特性のある方はもちろん、屋外の明るい環境でスマホを見ている人にも文字が読みにくくなります。

WCAGでは、通常のテキストに対して4.5:1以上のコントラスト比を推奨しています。大きな文字（18pt以上、または14pt以上の太字）は3:1以上が基準です。

意外と多い「おしゃれだけど読めない」デザイン

デザインを優先するあまり、薄いグレーの文字を白背景に配置するケースは非常に多いです。フッターの注釈文やプレースホルダー（入力欄のヒント文字）が典型例です。デザイナーは大きな画面で見ているので気にならなくても、スマホの小さな画面では致命的に読みづらくなります。

また、ブランドカラーが背景色と近い明度の場合も要注意です。たとえば水色の背景に白い文字、黄色の背景にオレンジの文字などは、デザイン的には成立しているように見えても、コントラスト比が不足していることがあります。

無料ツールでチェックする

WebAIM Contrast Checkerは、文字色と背景色のカラーコードを入力するだけでコントラスト比を計算してくれるツールです。WCAGのレベルAA（最低基準）とAAA（推奨基準）の両方で合否を表示します。

チェック手順はシンプルです。

  1. 自社サイトを開き、ブラウザのデベロッパーツール（F12キー）を起動
  2. 気になるテキスト要素をクリックし、color と background-color の値を確認
  3. Contrast Checkerにそれぞれの値を入力
  4. 「Fail」と表示されたら、文字色を少し濃くするか、背景色を調整する

特に注意すべきポイントは、ボタンのテキスト、フォームのラベル、エラーメッセージ、フッターの連絡先情報です。これらは「ユーザーが行動を起こす場面」で読まれるテキストなので、コントラスト不足の影響が直接コンバージョンに響きます。

改善ポイント3：フォームのラベルとエラー表示を整える

問い合わせフォームや資料請求フォームは、事業サイトのゴールに最も近い場所です。ここのアクセシビリティが低いと、せっかくサイトに来てくれた見込み客を逃すことになります。

当ポータルのフォームUI設計の記事でも詳しく解説していますが、アクセシビリティの観点で特に重要なのは、ラベルの紐づけとエラーメッセージの伝え方です。

ラベルの紐づけ

HTMLの <label> タグと入力欄を正しく紐づけることで、スクリーンリーダーが「この入力欄は名前を入力する場所です」と正確に読み上げられるようになります。また、ラベルをクリックすると対応する入力欄にフォーカスが移るので、マウス操作が不自由な方の利便性も向上します。

プレースホルダー（入力欄内にうっすら表示されるヒント文字）をラベルの代わりにしているフォームがよくありますが、これはアクセシビリティ上の問題があります。プレースホルダーは入力を始めると消えてしまい、「何を入力すればよかったか」がわからなくなります。高齢者や認知に特性のある方にとって、これは大きなストレスです。

ラベルは入力欄の外側に常時表示してください。プレースホルダーは補助的なヒント（「例：山田太郎」など）に限定して使うのが正しい設計です。

エラーメッセージの伝え方

「入力内容に誤りがあります」というエラーメッセージだけ表示されても、どこを直せばいいかわかりません。これは晴眼者でもストレスですが、スクリーンリーダーのユーザーにとっては、ページ内のどこにエラーがあるかを探す作業が加わるため、さらに困難です。

改善策として、以下の3点を実装してください。

  • エラーが発生した入力欄のすぐ横（または直下）に、具体的なエラー内容を表示する（「メールアドレスの形式が正しくありません」）
  • エラーメッセージの色を赤だけに頼らず、アイコンやテキストで「これはエラーです」と伝える（色覚特性への配慮）
  • フォーム送信後にエラーがある場合、最初のエラー箇所に自動的にフォーカスを移動させる

改善ポイント4：キーボード操作だけでサイトを使えるようにする

マウスやタッチパッドが使えない環境でも、Tabキー・Enterキー・矢印キーだけでサイトの主要な操作ができるかどうかは、アクセシビリティの重要な指標です。

手指に障害がある方、一時的に片手が使えない方、そしてスクリーンリーダーを使う方は、基本的にキーボードで操作します。また、パワーユーザー（ショートカットを多用する上級者）もキーボード操作を好むため、使い勝手の向上はすべてのユーザーに恩恵があります。

チェック方法

自社サイトでTabキーを連打してみてください。以下の点を確認します。

フォーカスの可視性: 今どの要素が選択されているか、視覚的にわかりますか？ ブラウザの標準フォーカス（青い枠線）を outline: none で消してしまっているサイトがあります。デザイン上の理由で消すなら、代わりの視覚的なフィードバック（背景色の変化、下線の追加など）を必ず実装してください。

操作順序: Tabキーを押したとき、要素が左上から右下へ自然な順序で移動しますか？ CSSでレイアウトを変えている場合、視覚的な順序とHTMLの順序がズレていることがあります。

キーボードトラップ: モーダルウィンドウ（ポップアップ）やドロップダウンメニュー内にフォーカスが入ると、Tabキーで抜け出せない「トラップ」が発生することがあります。Escキーで閉じられるようにするのが基本です。

スキップリンク: ページ上部にナビゲーションメニューが20項目もある場合、キーボードユーザーはメインコンテンツにたどり着くまでTabキーを20回以上押す必要があります。「本文へジャンプ」というスキップリンクをページ先頭に配置すると、この問題を解決できます。

改善ポイント5：見出し構造を正しく設計する

見出し構造の整理は、アクセシビリティとSEOの両方に効く施策です。

スクリーンリーダーには「見出しだけを一覧表示して移動する」機能があります。正しい見出し構造のページは、この機能で全体の構成を把握し、読みたいセクションに直接ジャンプできます。逆に、見出し構造が崩れているページは、最初から最後まで全文を聞かないと、どこに何が書いてあるかわかりません。

よくある問題

見出しレベルの飛び: h1のすぐ下にh3があったり、h2を使わずにh4が登場したりするケース。文字サイズを調整するために見出しタグを使い分けているのが原因で、これはCSSで解決すべき問題です。

見出しタグの不使用: 文字を大きく太くしているだけで、HTMLの見出しタグ（h1〜h6）を使っていないケース。視覚的には見出しに見えても、スクリーンリーダーは通常のテキストとして読み上げます。

1ページに複数のh1: トップページでよく見かけますが、h1タグはページに1つが原則です。ロゴとページタイトルの両方にh1を設定しているサイトが少なくありません。

正しい見出し設計の例

h1: サービス紹介（ページタイトル）
  h2: 私たちが解決する課題
    h3: 課題1 紙の帳票による非効率
    h3: 課題2 拠点間の情報共有の遅れ
  h2: 提供サービス
    h3: クラウド帳票管理
    h3: リアルタイム在庫共有
  h2: 導入の流れ
  h2: お問い合わせ

この構造なら、スクリーンリーダーで見出し一覧を開いたときに「サービス紹介ページの中に、課題、提供サービス、導入の流れ、お問い合わせの4セクションがある」と即座に理解できます。

まずはLighthouseでサイトの現状を把握する

ここまで5つの改善ポイントを紹介しましたが、「うちのサイトは今どの程度のレベルなのか」がわからないと、何から着手すべきか判断できません。

Google Chromeに標準搭載されているLighthouseは、アクセシビリティスコアを100点満点で計測してくれるツールです。使い方は簡単です。

  1. Chromeで自社サイトを開く
  2. F12キーでデベロッパーツールを開く
  3. 上部のタブから「Lighthouse」を選択
  4. 「Accessibility」にチェックを入れて「Analyze page load」をクリック

数十秒で結果が表示され、減点項目ごとに「何を直せばいいか」の具体的なガイダンスが提示されます。まずはトップページと問い合わせページの2ページだけ計測してみてください。

SEOナレッジベースのPageSpeed記事でも触れていますが、LighthouseはパフォーマンスとSEOのスコアも同時に計測できるので、一石三鳥の効果があります。

完璧を目指さない。できるところから始める

WCAGの全項目を一度に満たそうとすると、膨大な工数がかかります。しかし、アクセシビリティ対応は「0か100か」ではありません。

ウェブアクセシビリティ基盤委員会（WAIC）のWCAG 2.2日本語訳を通読する必要はありません。今日紹介した5つのポイントだけでも、サイトの使いやすさは大きく変わります。

優先度の目安として、以下の順番をおすすめします。

  1. フォーム周り（改善ポイント3）— 売上に直結するため、費用対効果が最も高い
  2. コントラスト比（改善ポイント2）— ツールで定量的にチェックでき、改善判断がしやすい
  3. 代替テキスト（改善ポイント1）— CMS上で担当者だけで対応でき、外注コストがかからない
  4. 見出し構造（改善ポイント5）— SEO改善と同時に進められる
  5. キーボード操作（改善ポイント4）— 実装にはエンジニアの関与が必要なため最後に

まずは来週、Lighthouseで自社サイトのアクセシビリティスコアを計測し、スコアが最も低いページの画像alt属性を棚卸しするところから始めてみてください。「全部の画像のaltを正しく書き直す」だけでも、スコアは目に見えて改善します。小さな一歩が、すべてのお客様に届くサイトへの第一歩です。