aaam
ホームページ制作

Webアクセシビリティ対応は何から始める?自社サイトを1日で改善した実測記録

Webアクセシビリティ対応は何から始める?自社サイトを1日で改善した実測記録

アーム代表の伊藤です。
Webアクセシビリティ対応を自分でやるなら、最小セットはTabキー操作・画像の代替テキスト・コントラスト比4.5:1の3つです。

アームは自社サイトをこの順で直し、診断から方針公開まで実働1日でした。その1日で、コントラスト比は4.15から6.95まで動きました。

Webアクセシビリティ対応は何から始めるか。まず自分で直すのは3つ

  • Tabキー・代替テキスト・コントラストの3つで平均を超える
  • 重大な不具合ほど機械診断では見つからない
  • ブランドカラーは変えずに基準を通せる

義務になったのは個別の申し出に応じる「合理的配慮の提供」で、サイトの事前対応は努力義務です。だから慌てて全部やる必要はありません。この3つを通るだけで多くのサイトは平均を超えます。順番は、アームが自社サイト(約20テンプレート)で実際にやったとおりです。

操作

Tabキーだけで問い合わせ完了までたどり着けるか

マウスを置いて、Tabキーだけで問い合わせ完了まで押してみてください。途中で止まった場所が最初に直す場所です。

アームのサイトでは、スマホ用メニューがEscキーで閉じず、フォーカスの行き先も管理されていませんでした。重大度は「高」。ツールは拾わず、手で触って見つけました。

安心な状態

要注意の状態

今いる場所に枠が見える

どこにいるか分からない

Escでメニューが閉じる

閉じられず戻れない

送信ボタンまで届く

途中で止まる

画像

代替テキストは「ある」だけでは足りない

壊れてはいないのに耳で使うと少し恥ずかしい。そういう問題があります。

アームの「戻る」ボタンは、矢印の代替テキストに「戻る」と書き、隣に「戻る」の文字も置いていました。読み上げでは「戻る 戻る」と二度読まれます。画面を見ているだけでは一生気づけません。主要ページの画像を、読み上げる順に目で追ってみてください。

安心な状態

要注意の状態

図の内容が文で分かる

意味のある図が無言

飾りの画像は空

隣の文字と二重に読む

配色

コントラスト比4.5:1。ブランドカラーは壊さずに通せる

「ブランドカラーは変えたくない」。担当者の方がまず心配するのはここです。

アームの小さい文字は白背景で4.15:1、基準の4.5:1にわずかに届きませんでした。直し方は、同じ色相の一段濃い色を「小さい文字専用」として1色足すだけ。並べて見ないと気づかない差で基準はクリアできます。数値はWCAGの計算式によるもので、無料のコントラストチェッカーで測れます。

小さい文字

コントラスト比

WCAGの基準

4.5:1以上

アーム 対応前

4.15:1

アーム 対応後

6.95:1

全体の順番は5ステップ。いきなり修正から入らない

3つを直したあと全体を進める順番です。いきなり修正から入ると優先順位を誤ります。

ステップ

やること

1. 全体像

ガイドブックを読む

2. 診断

無料ツール+Tabキー確認

3. 優先順位

目標はWCAGのAA相当

4. 修正

テーマ別に直し再診断

5. 方針公開

未完了でも先に出す

最初に読む資料は1つだけです。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」(2025年10月16日版)で、図解中心・民間企業の利用も想定されています。WCAGやJISの原文から入るのは遠回りです。必要な達成基準だけ、あとで原文にあたれば足ります。

方針の公開は「完璧になった宣言」ではなく「継続的に取り組む宣言」です。対応が全部終わっていなくても出せます。先に出すと取り組みが社内の既成事実になります。この5ステップを自社サイトで回すと、見つかった重大な問題は3つでした。

1日で直した記録

  • 重大な問題は動き・操作・配色の3つ
  • コントラスト比は4.15から6.95に改善
  • 表記は「配慮」で「準拠」ではない

理屈だけでは進まないので、アームは自社サイト(aaam.jp)で実際にやり切りました。調査から実装、検証、方針ページの公開まで実働1日です。

診断で見つかった3つの穴

デジタル庁のガイドブックとWCAGの達成基準をもとにコードを総点検した結果は、「デザインの土台は問題ないが、体系的な穴が3つある」でした。デザインを本業とするアームのサイトでもこうなります。

見つかった問題

重大度

動きを止める手段がない

高

メニューがEscで閉じない

高

ブランド色のコントラスト不足

高

スキップリンク・10pxボタン

中

背景アニメーションや自動スライドは、OSの「視差効果を減らす」設定を無視して動き続けていました。修正は「動きへの配慮」「キーボード操作」「コントラスト」の3テーマに分け、直すたびに再診断して数値を記録しています。

対応前後を数値で確認

対応項目

Before

After

小さい文字のコントラスト比

4.15:1

6.95:1

操作ボタンのタップ領域

10px

24px以上

視差軽減設定への追従

0箇所

全アニメーション

メニューのキーボード操作

Escで閉じない

Escで閉じ復帰

本文へのスキップリンク

なし

あり

検証はコードの自動チェックとして開発工程に組み込み、違反ゼロで運用を始めました。記事一覧の自動スライドは、この直後にUIごと廃止しています。動きを止める手段を用意するより、そもそも動かないUIにする方がアクセシブルだからです。ブランドカラーは1色も変えていません。

方針公開と準拠の表記

対応内容はウェブアクセシビリティ方針として公開しました。表記には注意が要ります。「JIS X 8341-3:2016に準拠」と名乗るには規定の試験が必要で、勝手には名乗れません(ウェブコンテンツのJIS X 8341-3:2016対応度表記ガイドライン、ウェブアクセシビリティ基盤委員会、2021年版)。アームは試験を実施していないので「配慮」です。知らずに「準拠」と書くとかえって信頼を損ねます。

Webアクセシビリティ対応を外注すると費用はいくらかかるのか

  • 診断の公表価格は1ページ25,000円〜
  • 数十万円の大半は報告書で改修は含まない
  • 「準拠」の証明が要る会社だけ外注に向く

届いた数十万円の見積もり、その大半は「診断と報告書」の費用です。サイトを直す作業そのものは含まれていないことが多い。高いか安いかの前に、その金額で何を買うのかを確かめます。専門会社の公表価格(2026年8月時点)で構造が見えます。

サービスの型

公表価格

専門家の診断(AA)

1ページ25,000円〜

検査サービス

1ページ17,000〜28,000円

前者は問題点と修正方法をまとめたPDF報告書で、改修作業は含まれません(インフォアクシアの公表価格)。後者は10ページの検査が前提で初回は2週間程度、再検査や方針書の支援は上位コースに付きます(BIPROGYチャレンジドの公表価格)。

高く見えるのは人の手が入るからだ

10ページ診断してもらうだけで20万〜30万円。数十万円という相場観はここから来ています。ぼったくりではなく、人手の判定に単価が付く構造です。「準拠」を名乗る試験は達成基準ごとにページを人の目で判定する工程で、ランダムに選ぶ場合は40ページ前後が目安です(合否判定を行うために十分と言えるページ数、ウェブアクセシビリティ基盤委員会)。正式にやるほど金額は伸びます。

判断を分けるのは金額でなく目的だ

自社の目的

選ぶ道

「準拠」の証明を求められている

専門会社に外注

まず使える状態にしたい

診断は自走し予算は改修へ

公共機関や大手企業との取引でJIS X 8341-3:2016の「準拠」「一部準拠」が要件なら、試験と結果の公開はワンセットの必要経費です。そうでなければ、数十万円の報告書を買ってもサイトは1行も直りません。見積もりを比べるときは「試験は何ページか」「改修は含まれるか」「修正後の再検査はあるか」の3点で範囲を揃えます。報告書は直す人がいて初めて回収できる投資です。

無料ツールだけでできる、Webアクセシビリティチェックの組み合わせ方

  • 無料ツール4種で機械診断はほぼ足りる
  • 自動チェックはキーボード操作を検出できない
  • アームの重大な不具合2件は手動で発見

診断は無料ツールでかなりの範囲をカバーできます。アームが実際に使っている組み合わせです。

ツール

使いどころ

Lighthouse

全体の自動採点

axe DevTools

違反箇所の特定

Contrast Checker

文字色と背景色の比率

miChecker

JIS X 8341-3の診断

LighthouseはChromeに標準搭載、axe DevToolsはブラウザ拡張、Contrast CheckerはWebAIM提供、miCheckerは総務省提供で公的機関の定番です。

自動チェックには届かない範囲がある

機械のスコアだけで安心すると外します。自動チェックで検出できるのは達成基準の一部で、キーボードで操作しきれるか、読み上げの順序が自然かという核心は人の確認が要ります。健康診断で身長と体重だけ測って、人間ドックを済ませた気になるようなものです。

アームの実対応でも、コントラスト不足はツールが正確に指摘した一方、重大度の高かった「メニューがEscで閉じない」「動きを止められない」はどちらも手動で見つけました。重い問題ほど機械の網をすり抜けます。

義務なのか罰則の有無

  • 義務化は個別対応、サイト整備は努力義務
  • 罰則は現時点で存在しない
  • JIS改正でWCAG 2.2に近づく

「2024年からWebアクセシビリティ対応が義務化された」はよくある誤解です。

義務は合理的配慮の提供

改正障害者差別解消法が2024年4月1日に施行され、民間事業者は障害のある方から個別の申し出があったときに、負担が重すぎない範囲で対応すること(合理的配慮の提供)が義務になりました。ホームページのアクセシビリティ対応そのものではありません。経緯は内閣府の「障害者差別解消法」に整理されています。検索すると「2024年6月」と書かれた記事も出てきますが、内閣府とe-Gov法令検索で確認できる施行日は2024年4月1日です。

ホームページをあらかじめ整えておくことは「環境の整備」にあたり、努力義務です。条文にも「環境の整備に努めなければならない」とあります(障害を理由とする差別の解消の推進に関する法律 第5条、e-Gov法令検索)。対応しないこと自体への罰則もありません(2026年8月時点)。

ではやらなくてよいか。そうは考えていません。アクセシビリティの低いサイトは「画像の内容を教えてほしい」といった個別の申し出が発生しやすく、そのたびに義務である合理的配慮としての対応コストが生じます。あらかじめ整えておくのは、個別対応という負債を先に返しておく行為です。

JIS改正でWCAG 2.2へ

日本の規格JIS X 8341-3は2016年版が現行ですが、最新の国際規格ISO/IEC 40500:2025との一致規格とする方針で、改正原案の作成委員会が発足しています(JIS X 8341-3改正原案作成委員会 発足のお知らせ、ウェブアクセシビリティ基盤委員会、2025年)。このISO/IEC 40500:2025は、W3Cの公式ページが「WCAG 2.2の2023年10月版と全く同じ」と明記している規格です。

今から始めるなら、最初からWCAG 2.2基準で考えるのが二度手間を避ける選択です。タップ領域の最小サイズなど、2.2で加わった基準はアームの実測記録にも反映しています。

よくある失敗

  • スコア100点でも操作できないサイトは作れる
  • 後付けウィジェットだけでは相性問題が増える
  • コントラストとタップ領域はデザインで決まる

アームが他社サイトの分析と自社対応で実際に見てきた型です。

  • ツールのスコアだけを目標にする。スコア100点でもキーボードで操作できないサイトは作れてしまいます。
  • 「準拠」を試験なしで名乗る。表記ルール違反で指摘されると信頼を失います。
  • オーバーレイツール(後付けのアクセシビリティ改善ウィジェット)だけで済ませる。根本のHTMLが直っていなければ、支援技術との相性問題はむしろ増えることがあります。
  • 一度対応して終わりにする。サイトは更新のたびに劣化します。アームは検証をコードの自動チェックに組み込み、更新のたびに違反が検出される体制にしました。
  • デザイン改修と切り離して考える。コントラストやタップ領域はデザインの話なので、リニューアルのタイミングで一緒にやるのが最も安上がりです。

よくある質問

Webアクセシビリティの4原則とは何ですか?

知覚可能・操作可能・理解可能・堅牢の4つです。国際基準のWCAGが定めた分類で、日本のJIS X 8341-3も同じ枠組みを使っています。

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

ありません(2026年8月時点)。ただし2024年4月1日から「合理的配慮の提供」は法律上の義務なので、個別の申し出を正当な理由なく拒み続けることには法的リスクがあります。

Webアクセシビリティ対応は、Tabキーだけの操作確認から始まる

  • 最初に直すのはTabキー操作・代替テキスト・コントラスト比4.5:1
  • 義務は合理的配慮の提供でサイトの事前対応は努力義務
  • 数十万円の診断は「準拠」の証明が要るときだけ外注する

関連するお悩み

関連するコラム