on the edgeon the edge logo
無料 AI 診断
CONTACT
COLUMN

2026.10.30

#アクセシビリティ#WCAG#ホームページ制作#中小企業#Webブランディング

中小企業のホームページにアクセシビリティを加える最小コストガイド

執筆 on the edge 編集部

中小企業のホームページにアクセシビリティを加える最小コストガイド

「アクセシビリティ対応はコストがかかる」と思っている中小企業は多い。しかし、重要な項目の多くはコードの書き方を変えるだけで対応できる。

2024年4月、改正障害者差別解消法が施行され、民間事業者にも「合理的配慮の提供」が義務化された。Webサイトは情報の一次窓口として機能することが多く、視覚・聴覚・運動機能に制約のある利用者がアクセスできない状態は、機会の損失であり、法的リスクにもなりつつある。

本記事では、国際標準WCAG 2.2とその日本規格であるJIS X 8341-3をもとに、中小企業のホームページが最小のコストで取り組める優先事項を整理する。

なぜ今アクセシビリティか——法的背景と市場の変化

障害者差別解消法の改正（2024年4月）

改正前は国・自治体のみに義務があった「合理的配慮の提供」が、2024年4月以降は民間事業者にも義務として適用された。Webサイトによる情報提供においても、障害のある利用者が不利にならないよう合理的な配慮が求められる。

「合理的配慮」は過度な負担を除外するという留保があるため、すべての項目を完全対応しなければ違法というわけではない。しかし、対応できることから着手することは、利用者への敬意であり、中長期的にはSEOや利用者体験の向上にもつながる。

対象となる利用者の規模

内閣府「令和4年版 障害者白書」によれば、日本の障害者手帳所持者数は約648万人。これに加えて、高齢者・一時的なケガによる利用制約・非ネイティブ言語話者なども配慮対象に含まれる。スクリーンリーダー利用者だけでなく、キーボードのみでの操作、高コントラスト表示、文字拡大利用者なども視野に入れると、対象層は全体の10〜15%に達するという推計もある（WebAIM Screen Reader User Survey、2024年）。

WCAG 2.2 Level AA の要点——中小企業が知っておくべき4原則

WCAG（Web Content Accessibility Guidelines）は、World Wide Web Consortium（W3C）が策定するWebアクセシビリティの国際標準だ。2023年10月にWCAG 2.2が最新版として公開されており、JIS X 8341-3（高齢者・障害者等配慮設計指針）もこれに準拠している。

WCAGの4原則は以下のとおりだ。

原則概要
知覚可能（Perceivable）テキスト代替、色だけに頼らない情報伝達、コントラスト比など
操作可能（Operable）キーボード操作、フォーカス表示、十分なリンクテキストなど
理解可能（Understandable）ページ言語の指定、エラー識別と提案、一貫したナビゲーションなど
堅牢（Robust）スクリーンリーダー等の支援技術との互換性

Level Aが最低限、Level AAが事実上の標準（公共機関や多くのガイドラインが求める水準）、Level AAAが最高水準という3段階構成になっている。まずLevel AAの達成を目標に設定するのが現実的だ。

最小コストで始める優先5項目

対応コストの観点から、「コードの書き方を変えるだけ」で実装できる項目を最初に取り組む。大規模な設計変更や外注費用が発生するものは次の段階で検討する。

1. ページの言語を指定する（lang属性）

HTMLの<html>要素にlang="ja"を設定するだけで達成できる。スクリーンリーダーが適切な言語で読み上げるために必要な基本設定であり、WCAG達成基準3.1.1（ページの言語）に対応する。

私たちが手がけるWebサイトでも、この設定は標準実装としている。HTMLの最初の1行に追加するだけで費用はゼロだ。

対応コスト目安: 0円（制作会社との確認のみ）

2. 画像に代替テキストを設定する（alt属性）

すべての画像に適切なalt属性を設定することで、スクリーンリーダー利用者が画像の内容を把握できる。WCAG達成基準1.1.1（非テキストコンテンツ）に対応する。

設定のポイントは2つある。意味のある画像（写真・グラフ・図解）には内容を説明するテキストを、装飾目的だけの画像には空のalt（alt=""）を設定する。空altを設定することで、スクリーンリーダーが余計な読み上げをスキップするため、利用者体験が改善する。

私たちのサイトでは、ロゴ画像に「on the edge logo」、代表者写真には「[氏名] 代表取締役」のように文脈に沿った説明を付与し、背景装飾や区切り線として使う画像には空altを設定している。

対応コスト目安: 既存サイトは画像点数による。50点以内なら制作会社に依頼して1〜3万円程度。

3. インタラクティブ要素のARIA属性を整備する

タブ切り替え・アコーディオン・モーダルなどの動的UIは、HTML標準のセマンティクスだけでは支援技術に正しく伝わらないことが多い。role・aria-label・aria-expandedなどのARIA属性を適切に追加することで、キーボード操作とスクリーンリーダーの両方に対応できる。

たとえばタブUIでは、コンテナにrole="tablist"、各タブにrole="tab"、内容エリアにrole="tabpanel"を設定することで、支援技術が「タブ切り替えUI」として認識できる構造になる。これはWCAG達成基準4.1.2（名前・役割・値）に対応する。

対応コスト目安: UIコンポーネントの複雑さによる。既存の実装を確認して修正する場合、エンジニア作業2〜8時間（3〜10万円程度）。

4. テキストと背景のコントラスト比を確認する

テキストと背景色のコントラスト比が4.5:1以上（大きなテキスト・太字は3:1以上）あることを確認する。WCAG達成基準1.4.3（コントラスト（最低限））に対応する。

グレーの小テキストや、カラー背景の上に置いたテキストは基準を下回ることが多い。ブラウザの開発者ツールまたは無料のコントラスト確認ツール（WebAIM Contrast Checker等）で確認できる。デザイン修正のみで対応できるケースが多い。

対応コスト目安: デザイン確認のみなら0円。修正が必要な場合はCSS変更のみで1〜2時間。

5. フォーカスインジケーターを視覚的に明示する

キーボードのみで操作する利用者は、現在どの要素にフォーカスがあるかを視覚的に確認する。CSSでoutlineを非表示にしているサイトでは、フォーカス位置が分からなくなり、操作不能になる。WCAG 2.2で強化されたWCAG達成基準2.4.11（フォーカスの視覚的認識（最低限））に対応する。

CSSでbutton:focus-visible { outline: 2px solid #0066cc; } などを設定するだけで対応できる。outline: noneまたはoutline: 0を一律に設定しているサイトは、この一行で改善できる。

対応コスト目安: CSSの変更のみ。エンジニア30分〜1時間（5,000円〜1万円程度）。

実装別の費用目安

対応レベル内容費用目安
最小対応（Level A相当）lang属性・alt属性・フォーカス表示・基本コントラスト0〜5万円
標準対応（Level AA相当）上記＋ARIA属性・フォーム入力補助・エラー表示10〜30万円
監査＋修正（新規制作時）アクセシビリティ専門家による設計レビューと実装30〜100万円
JIS X 8341-3適合宣言第三者機関の検証と公式適合宣言50万〜数百万円

中小企業が最初に目指すべきは「最小対応」だ。上記5項目を一つずつ確認・修正することで、費用をかけずに利用者体験を改善できる。新規でホームページを制作する場合は、制作会社にアクセシビリティ対応の方針を確認し、仕様として組み込むことで追加コストを最小化できる。

初めてホームページを制作する場合の費用・工程全体については、初めてホームページを作るときの費用・工程ガイドを参照してほしい。リニューアルを検討している場合は、ホームページリニューアルで失敗しない7つの確認事項であわせて確認したい項目を整理している。

補助金を活用してホームページを整備する場合は、補助金でホームページを作る方法で使える制度と申請実務を整理している。

よくある質問

Q. アクセシビリティ対応をしないと法律違反になりますか？

改正障害者差別解消法は「合理的配慮の提供義務」を定めているが、過度な負担を除外する留保がある。現時点では罰則規定はなく、全項目の完全対応を即座に求めるものではない。ただし、対応できることをしない状態で障害のある利用者から申し出があった場合には、その対応を検討する義務が生じる。取り組めることから着手する姿勢が重要だ。

Q. WordPressで作ったサイトはどう対応しますか？

WordPressの場合、テーマとプラグインのアクセシビリティ対応状況が起点になる。WordPress公式のテーマにはアクセシビリティ対応済みのものも多い。追加的に、「WP Accessibility」プラグインを使うことで、スキップリンクの追加・alt属性の確認・フォームラベルの補完などを補助できる。

Q. どのツールで確認すればいいですか？

以下のツールが無料で使える。

ツール用途
WAVE（WebAIM）ブラウザ拡張機能。ページ全体のアクセシビリティ問題を視覚的に表示
axe DevToolsChrome拡張。WCAG準拠チェックを自動化
LighthouseChrome開発者ツール内蔵。アクセシビリティスコアを100点満点で表示
WebAIM Contrast Checkerコントラスト比を計算して基準適合を確認

Lighthouseは制作会社への確認ツールとしても使いやすい。PageSpeed Insightsでも同じスコアを確認できる。

Q. スマートフォン向けの考慮点はありますか？

タップ領域の大きさ（WCAG 2.2では最低24×24px）とピンチズーム無効化の回避が主要な確認点だ。<meta name="viewport">にuser-scalable=noを設定しているサイトは、文字を拡大表示できなくなるため削除が必要だ。これはSEOにも影響するため、モバイルファーストインデックスへの対応と合わせて確認したい。

まとめ——まず5項目を確認するところから

アクセシビリティ対応を「コストがかかる大規模作業」と捉えると手が動かない。実際には、最初の5項目（lang属性・alt属性・ARIA属性・コントラスト・フォーカス）の大半は、エンジニアの確認と修正だけで対応できる。

私たちが手がける25以上のプロジェクト（サービスの詳細はサービス一覧）でも、lang属性・alt属性・aria-hidden・ARIAロールの設定は設計時の標準項目として組み込んでいる。後から追加するよりも、新規制作・リニューアルのタイミングで仕様として盛り込む方が圧倒的にコストを抑えられる。

次のリニューアルや新規制作を検討している場合は、制作会社への確認事項にアクセシビリティを加えるだけで始められる。費用相場の整理については、ホームページリニューアル費用相場と発注ガイドも参照してほしい。

アクセシビリティ対応を含めたホームページ制作・リニューアルのご相談は、初回無料でお受けしています。

出典（2026年10月時点で確認）

← コラム一覧へ戻る