Webアクセシビリティ改善の基本｜企業サイトで見直すべきポイント
2026/09/01
リニューアル・運用ノウハウWebアクセシビリティとは？誰でも情報を利用しやすくする考え方
Webアクセシビリティとは、年齢や障害の有無、利用している端末や操作方法などにかかわらず、できるだけ多くの人がWebサイトの情報や機能を利用できる状態にすることです。
例えば、Webサイトを見る人の中には、
- 視覚に障害があり、画面読み上げソフトを利用している人
- マウスを使わずキーボードで操作する人
- 色の違いを判別しにくい人
- 小さな文字が読みづらい人
- 動画の音声を聞くことができない環境にいる人
- スマートフォンの小さな画面を利用している人
など、さまざまなユーザーがいます。
W3Cが策定するWCAG（Web Content Accessibility Guidelines）は、Webコンテンツを障害のある人を含め、より利用しやすくするための国際的なガイドラインです。WCAG 2.2は、W3C Recommendationとして公開されています。
アクセシビリティ改善は、「一部の人だけのための特別対応」ではありません。
文字を読みやすくする
ボタンを押しやすくする
フォームの入力方法を分かりやすくする
ページ構造を整理する
といった改善は、多くのユーザーにとって使いやすいサイトづくりにもつながります。
なぜ企業サイトでもアクセシビリティが重要なのか
Webアクセシビリティというと、行政機関や大企業だけが取り組むものと思われることがあります。
しかし、企業サイトでも、
- 問い合わせ
- 資料請求
- 採用応募
- 予約
- 商品・サービス情報の確認
など、Webサイトが事業と直接つながる場面が増えています。
もし「文字が読めない」「キーボードでフォームを操作できない」「ボタンがどこにあるか分からない」という理由で利用できなければ、ユーザーに必要な情報を届けられません。
デジタル庁も、行政機関だけでなく事業者を含む初心者向けに「ウェブアクセシビリティ導入ガイドブック」を公開し、アクセシビリティ改善の考え方や実践方法を案内しています。
また、日本では2024年4月1日から、障害者差別解消法に基づく事業者による合理的配慮の提供が義務化されています。
ただし、これは「すべての民間Webサイトが直ちに特定のWCAG適合レベルを満たさなければならない」という意味ではありません。
個別の場面や状況、事業者への負担などを踏まえながら、必要な対応を検討することが求められます。
WCAG・JIS X 8341-3とは？最低限知っておきたい基準
Webアクセシビリティを調べると、
WCAG
JIS X 8341-3
という言葉がよく出てきます。
WCAGはW3Cが策定する国際的なWebアクセシビリティガイドラインで、達成基準には主にA・AA・AAAという適合レベルがあります。
日本では、Webコンテンツのアクセシビリティに関する規格としてJIS X 8341-3:2016が利用されています。
デジタル庁のアクセシビリティ方針や検証でも同規格が参照されており、WAIC（ウェブアクセシビリティ基盤委員会）も対応度表記や試験などに関するガイドラインを公開しています。
企業サイトを改善する際に、最初からすべての基準を完璧に理解する必要はありません。
まずは、ユーザーが利用できなくなる可能性の高い問題から改善することが現実的です。
改善ポイント①：文字と背景のコントラストを確保する
デザイン性を重視するあまり、
- 薄いグレーの文字
- 淡い背景色＋白文字
- 写真の上に細い白文字
などを使用すると、文字が読みにくくなることがあります。
WCAG 2.2の達成基準1.4.3では、通常サイズのテキストについて、背景とのコントラスト比を原則4.5：1以上とする基準が設けられています。大きな文字には別の基準があります。
特に確認したいのは、
- 本文
- グローバルメニュー
- CTAボタン
- フォームラベル
- リンク文字
- 画像上のコピー
です。
「ブランドカラーだから変えられない」と考えるのではなく、ロゴなどのブランド表現と、実際に操作・閲覧するUIの色を分けて考える方法もあります。
おしゃれに見えるかだけでなく、きちんと読めるかまで確認することが重要です。
改善ポイント②：画像に適切な代替テキスト（alt）を設定する
画像には、必要に応じて代替テキスト（alt属性）を設定します。
代替テキストは、画像を見ることができないユーザーに対して、画像が伝えている情報をテキストとして補う役割があります。
例えば施工事例の画像であれば、
×「写真」
×「施工事例」
だけではなく、
「相模原市の工場で施工したステンレス配管」
など、画像から伝える必要がある情報を簡潔に記述します。
一方で、単なる背景装飾や意味を持たない画像まで、すべて詳しく説明する必要はありません。
ポイントは、
「その画像が表示されなかった場合、ユーザーへどの情報を補う必要があるか」
で判断することです。
画像やアイコンなどの視覚情報について、適切なテキスト代替を用意することは、Webアクセシビリティの基本的な考え方の一つです。
改善ポイント③：キーボードだけでも操作できるようにする
Webサイトは、マウスだけで利用されているわけではありません。
Tabキーなどを使い、キーボードだけでWebサイトを操作するユーザーもいます。
確認したいのは、
- グローバルメニューを開けるか
- リンクへ移動できるか
- フォームへ入力できるか
- モーダルを閉じられるか
- CTAボタンを操作できるか
です。
実際にマウスを使わず、
「Tabキーだけでトップページから問い合わせフォームまで移動できるか」
を確認すると、問題を発見しやすくなります。
また、キーボードで現在どこを選択しているのか分かるフォーカス表示も重要です。
デザイン上の理由だけでフォーカス表示を消してしまうと、キーボード利用者が現在位置を把握できなくなる可能性があります。
ブランドイメージに合った形で、見やすいフォーカス表示を用意しましょう。
改善ポイント④：ボタン・リンクを押しやすく、意味が伝わる設計にする
スマートフォンでは、ボタンが小さかったり、間隔が狭かったりすると押し間違いが発生します。
WCAG 2.2では、一定の例外を除き、操作対象について24×24 CSSピクセル以上、または同等の間隔を確保することを求める「Target Size (Minimum)」というAAレベルの達成基準が追加されています。
ただし、
「すべて24pxにすれば対応完了」
と機械的に考えるのではなく、
- 十分に押しやすいか
- 隣のボタンを誤って押さないか
- スマートフォンで操作しやすいか
を実機で確認することが重要です。
また、リンクテキストも、
×「詳しくはこちら」
だけではなく、
「ホームページ制作サービスについて詳しく見る」
のように、移動先が分かる表現にすると理解しやすくなります。
改善ポイント⑤：見出し構造を正しく設計する
Webページの見出しには、
- h1
- h2
- h3
- h4
などのHTML見出しがあります。
これらは文字を大きくするためだけの機能ではなく、ページの情報構造を表すものです。
例えば、
h1：Webアクセシビリティ改善の基本
h2：企業サイトで改善すべきポイント
h3：文字色のコントラスト
のように、内容の階層に合わせて設定します。
見出し構造を整えることで、
- ページを拾い読みする人
- スクリーンリーダーを利用する人
- サイトを更新する担当者
にとっても、内容を理解しやすくなります。
見出しの見た目だけを変えるのではなく、情報の意味に合わせて適切なHTML要素を使うことが重要です。
改善ポイント⑥：問い合わせフォームを使いやすくする
企業サイトでは、問い合わせフォームのアクセシビリティが特に重要です。
どれだけサービス情報が分かりやすくても、最後のフォームを利用できなければ問い合わせにつながりません。
確認したいポイントは、
- 各入力欄に何を入力するか分かるラベルがある
- 必須・任意が分かる
- エラーの原因が具体的に分かる
- 色だけでエラーを表現していない
- キーボードだけでも入力・送信できる
- 入力欄の順番が自然になっている
ことです。
例えば、
×「入力内容にエラーがあります」
だけでは、ユーザーはどこを修正すればよいか分かりません。
「メールアドレスを正しい形式で入力してください。例：info@example.com」
など、問題と修正方法が分かる表現にします。
アクセシビリティ改善は、結果的に問い合わせフォームの入力離脱を減らす改善とも共通する部分が多くあります。
改善ポイント⑦：動画・音声コンテンツにも情報を補う
企業サイトでも、
- 会社紹介動画
- 採用インタビュー
- 施工動画
- サービス説明動画
などを掲載するケースが増えています。
動画で重要な情報を伝えている場合は、音声を聞けないユーザーにも内容が伝わるように、字幕やテキスト情報を用意することを検討します。
一方、音声だけでは伝わらない重要な視覚情報がある場合には、その情報をどのように補うかも考える必要があります。
重要なのは、
「動画を再生できること」ではなく、「動画の中にある情報へアクセスできること」
です。
動画だけに重要情報を閉じ込めず、必要に応じてテキストでも確認できる状態を整えましょう。
改善ポイント⑧：スマートフォン・拡大表示でも崩れないか確認する
アクセシビリティ確認では、PCの標準サイズだけを見るのでは不十分です。
例えば、
- 文字を拡大する
- スマートフォンを使う
- 画面幅を狭くする
といった環境でも、情報を利用できるか確認します。
レスポンシブ対応していても、
- ボタンが重なる
- テキストが切れる
- メニューが押せない
- 横スクロールしないと読めない
といった問題が残っている場合があります。
リニューアル時には、デザインカンプ上の確認だけでなく、実際のスマートフォンやブラウザで操作するところまで確認することが大切です。
企業サイトでアクセシビリティを確認する方法
アクセシビリティは、自動チェックツールだけですべて確認できるものではありません。
おすすめは、
① 自動チェック
↓
② 手動チェック
↓
③ 実際の操作確認
を組み合わせる方法です。
例えば、
- コントラストチェックツール
- ブラウザのアクセシビリティ機能
- HTML・altの確認
- キーボード操作
- 画面拡大
- スマートフォン実機確認
- 必要に応じてスクリーンリーダーでの確認
などを組み合わせます。
特に、
「リンクの意味が分かるか」
「操作する順番が自然か」
「エラーが起きたときに修正方法が分かるか」
といった内容は、自動チェックだけでは十分に判断できません。
また、JIS X 8341-3への「準拠」など正式な対応度を表明する場合は、単なる自動チェックだけでなく、対象範囲を定めた試験や結果の公開など、必要な手順を確認することが重要です。
リニューアル時にアクセシビリティを組み込むメリット
既存サイトへ後からアクセシビリティ対応を追加するより、リニューアルの設計段階から考える方が効率的です。
例えば、
- ブランドカラーを決める時にコントラストを確認する
- ワイヤーフレームで見出し階層を整理する
- ボタン設計時にサイズやフォーカスを確認する
- CMS設計時に画像altを入力できるようにする
- フォーム開発時にラベル・エラー表示を設計する
といった形で最初から組み込めます。
完成後に、
「このブランドカラーでは文字が読みにくい」
「このメニューはキーボード操作できない」
「CMSからaltを設定できない」
と判明すると、修正範囲が大きくなります。
そのためアクセシビリティは、公開前だけ確認する項目ではなく、要件定義・デザイン・実装・運用のすべてに関係する品質要件として考えるのがおすすめです。
アクセシビリティ対応でよくある誤解・失敗
「高齢者向けサイトだけ対応すればよい」と考える
アクセシビリティは特定のユーザーだけを対象にしたものではありません。
スマートフォン利用、一時的なけが、騒音環境、明るい屋外での閲覧など、さまざまな状況で使いやすさにつながります。
デザイン性が下がると思い込む
コントラストや文字サイズを確保しながら、ブランドイメージを表現することは可能です。
アクセシビリティを制約として後から加えるのではなく、デザイン要件として最初から組み込むことが重要です。
altをすべての画像に長文で入れる
重要なのは量ではなく、その画像が持つ意味を適切に補うことです。
装飾画像まで長い説明を読み上げさせると、かえって利用しにくくなる場合があります。
自動チェックツールでエラー0なら完了と考える
自動ツールだけでは、
- リンク文言が分かりやすいか
- 操作順序が自然か
- コンテンツの意味が伝わるか
といった文脈までは十分に判断できません。
手動確認も必要です。
「法律対応済み」と安易に表現する
障害者差別解消法による合理的配慮の義務化と、特定のWCAG・JIS適合レベルは同じものではありません。
個別の法的義務や適合表明については、対象となる事業・サービス・状況に応じた確認が必要です。
Webアクセシビリティ改善チェックリスト
文字・色
- 本文の文字サイズが小さすぎない
- 文字と背景のコントラストを確認している
- 色だけで「エラー」「必須」などを伝えていない
- 画像内文字が読みにくくなっていない
画像・動画
- 意味のある画像に適切なaltがある
- 装飾画像を不要に読み上げさせていない
- 動画の重要情報を字幕・テキストでも確認できる
- 画像だけで重要事項を伝えていない
操作
- キーボードだけで主要機能を利用できる
- フォーカス位置が分かる
- 固定ヘッダーなどでフォーカス部分が隠れない
- スマートフォンでボタンを押しやすい
- リンク・ボタンの役割が分かる
コンテンツ
- h1・h2・h3の階層が整理されている
- 見出しだけ読んでもページ構造が分かる
- 「こちら」だけの曖昧なリンクが多くない
- 専門用語を必要以上に多用していない
フォーム
- 各入力項目にラベルがある
- 必須・任意が分かる
- エラー箇所と修正方法が分かる
- キーボードで入力・送信できる
- 入力途中で意図せず内容が消えない
運用
- 記事投稿時にaltを確認している
- 画像・動画追加時のルールがある
- サイト更新後にもアクセシビリティを確認する
- 定期的にキーボード・スマートフォンで実操作確認している
- 必要に応じてJIS・WCAGに沿った検証を行っている
まとめ：完璧を目指すより、重要な問題から継続的に改善する
Webアクセシビリティは、チェック項目を一度クリアして終わるものではありません。
企業サイトでは、
文字が読める
画像の意味が伝わる
キーボードでも操作できる
ボタンを押しやすい
フォームから問い合わせできる
スマートフォンや拡大表示でも利用できる
といった、ユーザーが情報や機能へアクセスするうえで重要な部分から改善していくことが大切です。
WCAG 2.2には幅広い達成基準があり、日本ではJIS X 8341-3:2016もWebアクセシビリティを考えるうえで参照されています。
最初からすべてを完璧にしようとして動けなくなるより、
現状を確認する
↓
利用できなくなる重大な問題から改善する
↓
更新時にも確認する
↓
定期的に検証する
という運用を作る方が現実的です。
アクセシビリティを「特別な対応」ではなく、使いやすく、伝わりやすく、企業として信頼されるWebサイトを維持するための品質管理として取り組んでいきましょう。
Webアクセシビリティを意識したホームページ改善ならRefuへ
Refuでは、ホームページリニューアル時のデザイン・情報設計だけでなく、文字コントラスト、画像alt、見出し構造、フォーム、キーボード操作、スマートフォン表示など、アクセシビリティを意識したサイト改善にも対応しています。
「今のサイトが使いにくくなっていないか確認したい」
「リニューアルを機にアクセシビリティも見直したい」
「どこから改善すればいいのか分からない」
といった場合も、お気軽にご相談ください。
その他おすすめ記事はこちら
ワイヤーフレームで失敗が減る｜作り方・レビュー観点・よくある落とし穴
運用で差がつく！Webサイトの更新ルール（品質・表記・画像・承認フロー）
E-E-A-Tを強化するサイト改修ポイント｜信頼を積み上げる情報設計
