ウェブアクセシビリティとは?今すぐできるチェック方法と対応の進め方【具体例つき】

meta description案: ウェブアクセシビリティとは何かをゼロから解説。義務化の現状、良い例とダメな例、5分でできるセルフチェック7項目、対応の進め方4ステップまで、Webサイト担当者が知りたい情報をまとめました。


「自社サイトはウェブアクセシビリティに対応できていますか」と聞かれて、はいと即答できるWeb担当者は多くありません。2024年4月の法改正で「合理的配慮」が民間企業にも義務化されて以降、対応の必要性は知っていても、何をどこまでやればいいのか分からないままになっている。それがほとんどの企業の実情です。

この記事では、ウェブアクセシビリティの意味と4原則、義務化の現在地、具体例、そして自社サイトを今すぐ確認できるセルフチェック7項目まで、順を追って解説します。読み終えたときに「うちのサイトの現状と、次にやること」が分かる状態を目指します。

Contents

ウェブアクセシビリティとは

ウェブアクセシビリティとは、障害の有無や年齢、利用環境にかかわらず、誰もがウェブサイトの情報やサービスを支障なく利用できることを指します。英語のaccessibilityは「近づきやすさ」「利用のしやすさ」を意味する言葉です。

具体的には、次のような人と状況を含みます。

  • 視覚障害があり、スクリーンリーダー(音声読み上げソフト)でページを利用する人
  • 聴覚障害があり、動画の音声情報を字幕で得る人
  • 加齢で視力が低下し、小さな文字が読みづらい高齢者
  • 腱鞘炎や麻痺でマウスが使えず、キーボードだけで操作する人
  • 強い日差しの下でスマートフォンの画面が見えにくい状態の人
  • 回線が遅い環境で画像が表示されない状態の人

最後の2つが示すとおり、ウェブアクセシビリティは障害者だけのものではありません。誰でも、状況しだいで「情報にアクセスしづらい状態」になります。あらゆる利用者と利用状況を想定して情報への到達手段を確保しておくことが、ウェブアクセシビリティの本質です。

アクセシビリティとユーザビリティの違い

混同されやすい言葉にユーザビリティがあります。両者の違いは対象の広さです。

  • アクセシビリティ: そもそも利用できるかどうか。情報への到達可能性
  • ユーザビリティ: 特定の利用者が、目的をどれだけ快適に達成できるか。使いやすさの度合い

ユーザビリティは「使える人にとっての使いやすさ」を高める考え方であり、アクセシビリティは「使える人の範囲」そのものを広げる考え方です。アクセシビリティが確保されていなければ、ユーザビリティの議論は始まりません。土台と上物の関係にあります。

ウェブアクセシビリティの4原則

国際的なガイドラインであるWCAG(Web Content Accessibility Guidelines)は、アクセシブルなウェブコンテンツの条件を4つの原則に整理しています。

  1. 知覚可能(Perceivable): 情報が、視覚・聴覚など何らかの手段で知覚できること。画像に代替テキストを付ける、動画に字幕を付けるなど
  2. 操作可能(Operable): すべての機能が、マウス以外の手段でも操作できること。キーボード操作への対応、十分な操作時間の確保など
  3. 理解可能(Understandable): 情報と操作方法が理解できること。平易な言葉づかい、予測できる動作、分かりやすいエラー表示など
  4. 堅牢(Robust): スクリーンリーダーなどの支援技術を含む、さまざまな環境で正しく解釈できること。正しいHTMLで記述することが土台になります

自社サイトの課題を整理するときも、この4原則で分類すると全体像がつかみやすくなります。

なぜ今、対応が求められているのか

背景は3つあります。第一に、後述する法改正で企業の責任範囲が明確になったこと。第二に、高齢化により「見えづらい・操作しづらい」利用者が増え続けていること。第三に、スマートフォンや音声読み上げなど利用環境の多様化が進んだことです。今後もこの流れが逆行することは考えにくく、ウェブサイトに求められる水準は上がり続けます。

加えて、アクセシビリティの向上はSEO(検索エンジン最適化)とも重なります。代替テキストや正しい見出し構造は、検索エンジンのクローラーがページ内容を理解する手がかりでもあるためです。アクセシビリティ対応は、障害者対応という枠を超えて、サイトの情報がすべての読み手(人とプログラムの両方)に届くようにする施策だといえます。

義務化はどうなった?2024年法改正のその後

「ウェブアクセシビリティが義務化された」という情報を目にした人は多いはずです。2024年当時はこの話題で持ちきりでした。2年が経った今、何が義務で何が義務でないのか、現在地を整理します。

改正障害者差別解消法と「合理的配慮」の範囲

2024年4月1日に施行された改正障害者差別解消法により、民間事業者にも「合理的配慮の提供」が義務化されました。合理的配慮とは、障害のある人から申し出があったとき、負担が重すぎない範囲で対応を調整することです。具体的な事例は、内閣府が公開している合理的配慮の事例集にまとめられています。

ここで重要なのは、ウェブアクセシビリティ対応そのものは合理的配慮ではなく、その手前の「環境の整備」に位置づけられている点です。環境の整備は努力義務であり、法律上、Webサイトのアクセシビリティ対応が直接義務化されたわけではありません。

ただし両者は地続きです。たとえば「サイトの申込みフォームが使えない」という申し出を受けたとき、環境の整備ができていない企業は個別対応に追われます。日頃からアクセシビリティを確保しておくことが、合理的配慮の義務を無理なく果たすための土台になります。

罰則はあるのか

ウェブアクセシビリティに対応していないこと自体への罰則はありません。障害者差別解消法には、行政からの報告要求に対して虚偽の報告をした場合などの過料の規定はありますが、「サイトが未対応だから罰金」という仕組みではありません。

なお、公的機関(国・地方公共団体)は民間より一段厳しく、環境の整備も含めて義務とされています。自治体サイトでアクセシビリティ方針や試験結果の公開が進んでいるのはこのためです。

「義務ではないからやらない」が損になる理由

法的義務でないなら後回しでよいか。そうとは言い切れない理由が3つあります。

  1. 機会損失が既に発生している。高齢者と障害者を合わせると、日本の人口の3割前後が「使いづらいサイトから離脱しやすい」層です。アクセシビリティの不備は、その層の顧客を静かに失い続けることを意味します
  2. 取引条件になり始めている。官公庁の入札や大企業の調達基準で、アクセシビリティ対応が要件に含まれるケースが増えています
  3. 後からの改修は高くつく。設計段階から組み込めば小さなコストで済む項目も、公開後にまとめて直すと構造改修になりがちです

義務かどうかではなく、いつやるかの問題として捉えるのが現実的です。

ウェブアクセシビリティの具体例:良い例とダメな例

対応のイメージをつかむために、代表的な項目を良い例とダメな例で比べます。

画像の代替テキスト(alt属性)

  • ダメな例: 商品画像のaltが空、またはファイル名(IMG_1234.jpg)のまま。スクリーンリーダー利用者には画像の内容が一切伝わりません
  • 良い例: 「紺色のリネンシャツを着た男性の写真」のように、画像が伝えている内容を短いテキストで記述する。装飾目的の画像はaltを空(alt=””)にして読み上げをスキップさせる

色とコントラスト比

  • ダメな例: 薄いグレーの背景に白い文字。おしゃれに見えても、ロービジョンの人や屋外のスマートフォン利用者には読めません。「赤字が必須項目です」のように色だけで情報を伝えるのも、色覚特性のある人に伝わりません
  • 良い例: 通常の文字で背景とのコントラスト比4.5:1以上を確保する。色に加えて「必須」のテキストやマークを併記する

キーボードだけで操作できるか

  • ダメな例: マウスのホバーでしか開かないメニュー。フォーカスの枠線をCSSで消しているサイト。キーボード利用者は現在位置が分からず、目的のページに到達できません
  • 良い例: Tabキーですべてのリンク・ボタンを順にたどれて、今どこにフォーカスがあるか見えて、Enterで実行できる

動画の字幕・音声読み上げへの対応

  • ダメな例: 音声解説だけの動画。聴覚障害者と、電車内など音を出せない環境の利用者に内容が伝わりません
  • 良い例: 字幕を付ける。あわせて、動画の要点をテキストでもページに記載する

ページの見出し構造

  • ダメな例: 見た目の文字サイズだけで見出しらしく装飾し、HTMLの見出しタグ(h1〜h6)を使っていない。またはデザイン上の都合でh2の次にh4が来るなど、階層が飛んでいる
  • 良い例: ページの内容構造どおりにh1からh3までを順序よく使う。スクリーンリーダー利用者は見出しだけを拾い読みしてページの全体像を把握するため、正しい見出し構造は目次と同じ役割を果たします。検索エンジンがコンテンツを理解するうえでも重要な手がかりになります

フォームのエラー表示とラベル

  • ダメな例: 「入力内容に誤りがあります」とだけ表示され、どの項目が、なぜ誤りなのか分からない。プレースホルダー(入力欄の中の薄い文字)だけで項目名を示している
  • 良い例: 各入力欄にラベルを紐づけ、エラー時は「電話番号: ハイフンなしの半角数字で入力してください」のように、場所と修正方法を具体的に示す

いずれも特別な技術ではなく、HTMLの基本を丁寧に実装するかどうかの問題です。逆にいえば、見た目には分からない品質差がここに現れます。

基準とガイドラインの読み方:WCAG・JIS X 8341-3・適合レベル

アクセシビリティの基準は複数あり、初めて調べると関係が分かりにくいものです。押さえるべきは次の2つです。

  • WCAG: W3C(Web技術の国際標準化団体)が策定する国際ガイドライン。最新版はWCAG 2.2で、実務ではWCAG 2.1とあわせて参照されます
  • JIS X 8341-3:2016: 日本産業規格。内容はWCAG 2.0と一致しており、日本国内の公的な基準として参照されます

つまり、WCAGに沿って対応すれば、JIS規格にも対応できる関係です。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」は、これらを日本語で平易に解説した、企業のWeb担当者向けの入門資料です。基準の原文を読む前に、まずこちらを参考にすると全体像がつかめます。

適合レベルA・AA・AAAの違い

WCAGとJISの達成基準は、重要度に応じて3つの適合レベルに分かれています。

  • レベルA: 最低限の基準。満たさないと利用自体が困難になる項目(キーボード操作、代替テキストなど)
  • レベルAA: 標準的な目標。コントラスト比4.5:1、テキストの拡大対応など。多くの組織がここを目標にします
  • レベルAAA: 最も厳格。手話通訳の提供など、すべてのコンテンツでの達成は現実的でない項目も含みます

公的機関と民間企業、それぞれ求められる水準

公的機関は、総務省の「みんなの公共サイト運用ガイドライン」により、レベルAA準拠が求められています。民間企業に法令上の水準指定はありませんが、実務ではレベルAAを目標に、まずレベルAの重大な問題から解消していく進め方が標準的です。

「準拠」「一部準拠」「配慮」といった対応度の表記方法も、ウェブアクセシビリティ基盤委員会(WAIC)が定めています。アクセシビリティ方針を公開する際はこの表記に従います。

自社サイトを今すぐチェックする方法

ここからが本題です。基準を学ぶより先に、まず自社サイトの現状を知ることをすすめます。問題が具体的に見えると、対応の優先順位も費用感も判断できるようになるからです。

まず5分でできるセルフチェック7項目

ブラウザだけで、今すぐ確認できる項目です。

  1. Tabキーだけでトップページを巡回できるか。メニュー、リンク、ボタンに順に移動でき、今どこにいるか見えるか
  2. 主要な画像に代替テキストがあるか。画像を右クリックして検証(開発者ツール)でalt属性を確認する
  3. 文字を200%に拡大しても読めるか。ブラウザのズームで拡大し、文字の重なりや見切れが起きないか
  4. 色だけで意味を伝えている箇所がないか。グラフ、必須項目、エラー表示を白黒印刷のつもりで見直す
  5. リンクテキストが「こちら」「詳細」だけになっていないか。リンク文字列だけで飛び先が分かるか
  6. 動画に字幕があるか。音を消して内容が伝わるか
  7. フォームのエラーが具体的か。わざと間違えて送信し、どこをどう直せばよいか表示されるか

半分以上で問題が見つかるサイトが珍しくありません。まずは現状を知ることが出発点です。

無料チェックツールの使い方と限界

機械的な検査には無料ツールを活用できます。

  • miChecker: 総務省が提供する日本語の検証ツール。JIS X 8341-3の観点で検査できます
  • Lighthouse: Chromeの開発者ツールに内蔵。Accessibilityスコアを算出します
  • axe DevTools: ブラウザ拡張。WCAG基準の問題箇所を具体的に指摘します

ツールは「altがない」「コントラスト比が不足」といった機械的に判定できる問題の検出に向いています。ページ数が多いサイトの一次スクリーニングには十分役立ちます。

ツールで見つかるのは問題の一部:人の目が必要な理由

ただし、ツールで自動検出できるのはアクセシビリティ上の問題の一部にとどまります。次のような判断は機械にはできません。

  • 代替テキストが存在するかは判定できても、その内容が適切か(画像の意味を正しく伝えているか)は判定できない
  • 見出しタグが付いているかは分かっても、見出しの階層と文書構造が論理的かは分からない
  • フォーカスの移動順序が、実際の利用の流れとして自然かどうか
  • エラーメッセージや説明文が、利用者にとって理解可能か

ツール検査で問題ゼロでも、スクリーンリーダーで実際に操作すると使えない、というサイトは実在します。確実に評価するには、達成基準に沿った人の目による検証と、支援技術での実機確認が必要です。

ウェブアクセシビリティ対応の進め方4ステップ

現状を把握したら、次の手順で対応を進めます。デジタル庁・WAICが示すプロセスに沿った、標準的な流れです。

1. 現状を診断する

セルフチェックとツール検査で全体像をつかみ、必要に応じて専門家の診断で問題を確定させます。診断結果は「達成基準ごとの適合状況」として整理すると、次のステップにそのまま使えます。

2. 方針を決めて公開する

対象範囲(どのページ群か)と目標レベル(例: WCAG 2.1 レベルAA準拠)を定めた「ウェブアクセシビリティ方針」を策定し、サイトで公開します。方針の公開は、組織として取り組む意思表示であると同時に、対応の優先順位を社内で合意する道具にもなります。

3. 優先度をつけて改修する

診断で見つかった問題を、影響の大きさと改修コストで並べ替えて着手します。一般に、サイト全体のテンプレート(ヘッダー、ナビゲーション、フォーム)に関わる問題は1箇所の修正が全ページに効くため、優先度が高くなります。

4. 継続的にチェックする体制を作る

アクセシビリティは一度対応して終わりではありません。ページの追加や更新のたびに品質は変動します。試験を実施して結果を公開し、更新運用のルール(画像には必ずaltを付ける、など)に落とし込むことで、水準を維持します。

診断を専門家に依頼する場合の費用と流れ

自社での対応が難しい場合や、対外的に示せる評価が必要な場合は、専門家による診断を利用します。

診断・試験の費用相場

費用は診断の深さとページ数で決まります。一般的な構成は次のとおりです。

  • 簡易診断: 主要ページを対象にツール検査と専門家のレビューを行い、問題の全体像と優先順位を報告する
  • 詳細診断(試験): JIS X 8341-3 / WCAGの達成基準に沿ってページ単位で検証し、適合状況を判定する。公開できる試験結果が得られる

料金は事業者と対象範囲によって幅があるため、見積もり時には「対象ページ数」「目標レベル」「報告書の形式(改修指示まで含むか)」を揃えて比較することを推奨します。

モンゼンクリエイティブのアクセシビリティ評価サービス

モンゼンクリエイティブでは、ウェブサイトのアクセシビリティ評価サービスを提供しています。ツール検査と人の目による検証を組み合わせ、達成基準ごとの適合状況と、優先順位付きの改修リストを報告書として納品します。診断だけの利用も、改修までの一括依頼も可能です。

自社サイトの現状を知りたい段階からの相談を受け付けています。

ウェブアクセシビリティに関するよくある質問

ウェブアクセシビリティは義務ですか?

民間企業では法的義務ではありません。2024年4月施行の改正障害者差別解消法で義務化されたのは「合理的配慮の提供」であり、ウェブアクセシビリティ対応は努力義務である「環境の整備」に位置づけられています。ただし、合理的配慮を果たす土台として、実務上の必要性は高まっています。

対応しないと罰則はありますか?

サイトが未対応であること自体への罰則はありません。ただし公的機関には民間より厳しい義務があり、また民間でも取引要件としてアクセシビリティ対応を求められる場面が増えています。

診断の費用はいくらかかりますか?

対象ページ数と診断の深さで変わります。主要ページの簡易診断から、JIS X 8341-3に沿った試験まで段階があるため、まず範囲と目的(現状把握か、公開できる試験結果か)を決めてから見積もりを取ると比較しやすくなります。

何から始めればいいですか?

この記事のセルフチェック7項目を実施し、自社サイトの現状を知ることからです。問題の全体像を確定させたい場合は専門家の診断を利用し、その結果をもとに方針策定、優先度順の改修へ進みます。

まとめ

ウェブアクセシビリティは、障害の有無や年齢、利用環境を問わず、誰もがWebサイトを利用できるようにする取り組みです。2024年の法改正で対応は義務になったのかという疑問には、「対応自体は努力義務、ただし合理的配慮の土台として実質的な必要性は上がり続けている」というのが2026年時点の答えです。

対応の第一歩は、基準の勉強ではなくサイトの現状把握です。セルフチェック7項目と無料ツールで確認し、確実な評価が必要になったら専門家の診断を利用してください。

参考資料・関連リンク

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。