「アクセシビリティは障害のある人向けの特別な対応では？」「法律で義務になったと聞いたけれど、何をどこまで対応すればいいのか分からない」と迷っていませんか。結論から言えば、アクセシビリティデザインは、障害のある人や高齢者、一時的に手がふさがっている人なども含めて誰もが使えるようにする設計で、国際基準WCAG 2.2のレベルAAを目安に、色のコントラスト、キーボード操作とフォーカスの表示、代替テキスト、押しやすい大きさなどを制作に組み込むと、クライアントに提案できる強みになります。WCAGの基本、デザイナーが押さえる達成基準、障害者差別解消法の正しい理解、確認のツールとチェックリスト、案件での生かし方まで、このページで整理しました。
この記事でわかること
【結論】アクセシビリティデザインは何から始めればいい？
アクセシビリティデザインとは、障害のある人、高齢者、環境や状況に制約がある人を含め、誰もが情報やサービスを利用できるようにする設計です。フリーランスが始めるなら、次の3つを押さえてください。
- WCAG 2.2のレベルAAを目安にする国際基準WCAGの4つの原則と適合レベルを理解し、多くの組織が目標にするレベルAAの基準を押さえる
- デザインの段階で基準を組み込む文字のコントラスト、色だけに頼らない表現、フォーカスの表示、押しやすい大きさ、拡大しても崩れないレイアウトを最初から設計する
- 法律を正確に説明し、確認まで提案する障害者差別解消法で義務になったのは「合理的配慮の提供」であることを正しく伝え、ツールと手作業での確認を見積もりに含める
アクセシビリティは、後から直すより最初から設計するほうが手戻りが少なく、デザイナーの提案の価値を高めます。
アクセシビリティの経験は、実際の制作案件で基準を試すほど深まります。Web制作やデザインの案件を探すなら、エージェントで案件の幅を比べる方法もあります。
アクセシビリティとは？なぜフリーランスが学ぶべき？
アクセシビリティは、障害のある人だけでなく、高齢の人や、一時的・状況的に制約がある人を含めた全ての利用者のための配慮で、基準を理解して提案できるデザイナーは限られていると考えられ、提案の強みになります。視覚、聴覚、運動、認知の障害のほか、「屋外の強い日差しで画面が見えにくい」「片手がふさがっている」といった状況も含まれます。
| 制約の種類 | 例 | 助けになる設計 |
|---|---|---|
| ずっと続く制約 | 視覚障害、色覚の特性、運動障害 | 代替テキスト、色だけに頼らない表現、キーボードでの操作 |
| 一時的な制約 | 腕のけが、目の手術のあと | 押しやすい大きさのボタン、文字の拡大に耐えるレイアウト |
| 状況による制約 | 強い日差しの屋外、音を出せない電車の中 | 十分なコントラスト、動画の字幕 |
フリーランスにとってのメリットは？
- 障害者差別解消法の改正などを背景に、アクセシビリティに関心を持つ企業や団体が増えている
- 基準を理解して実装できることを示せると、差別化につながりやすい
- 分かりやすい構造や代替テキストは、使いやすさの向上や、検索エンジンが画像を理解する助けにもなる
- WCAGへの対応を求める海外の企業や外資系の案件に応募しやすくなる
なお、アクセシビリティに対応すれば検索順位が上がる、という公式の説明はありません。SEOへの効果を約束するのではなく、使いやすさと法律への備えとして提案するのが正確です。
WCAGとは？どのレベルを目指せばいい？
WCAG（Web Content Accessibility Guidelines）はW3Cが定めたWebアクセシビリティの国際基準で、最新版はWCAG 2.2です。適合レベルはA、AA、AAAの3段階で、多くの組織はレベルAAを目標にしています。
| WCAG 2.2 | 2023年10月5日にW3C勧告。WCAG 2.1に9つの達成基準を追加し、1つ（4.1.1 構文解析）を削除した |
|---|---|
| 国際規格 | WCAG 2.2と同じ内容の国際規格ISO/IEC 40500:2025が2025年に発行された |
| 日本語訳 | ウェブアクセシビリティ基盤委員会（WAIC）が2024年3月1日に公開し、2026年6月8日に全体の訳文を見直した版に更新した |
| 日本の規格 | 現行のJIS X 8341-3:2016はWCAG 2.0と同じ内容。ISO/IEC 40500:2025と一致させる方針で改正の検討が進んでいる |
4つの原則とは？
| 原則 | 意味 | デザインでの例 |
|---|---|---|
| 知覚可能（Perceivable） | 情報を利用者が知覚できる形で提供する | 画像に代替テキストを付ける、動画に字幕を付ける |
| 操作可能（Operable） | 画面の部品やナビゲーションを操作できる | キーボードだけで全ての機能を使えるようにする |
| 理解可能（Understandable） | 情報と操作の方法を理解できる | エラーの内容と直し方を具体的に示す |
| 堅牢（Robust） | スクリーンリーダーなどの支援技術で確実に解釈できる | 意味に合ったHTMLの要素を使う |
適合レベルの違いは？
| レベル | 位置づけ | 基準の例 |
|---|---|---|
| A | 最低限満たすべき基準 | 画像の代替テキスト、キーボードでの操作、色だけに頼らない表現 |
| AA | 多くの企業や公的機関が目標にするレベル（Aの基準も含む） | 文字のコントラスト比4.5:1以上、フォーカスの表示、文字を200％に拡大しても使える |
| AAA | 最も高いレベル。サイト全体で全て満たすのは難しい | 文字のコントラスト比7:1以上 |
デザイナーが押さえる達成基準は？
デザイナーがまず押さえたいのは、文字と部品のコントラスト、色だけに頼らない表現、文字の拡大と画面幅への対応、フォーカスの表示、押す対象の大きさです。WCAG 2.2で追加された基準も含め、デザインの段階で決まるものを整理します。
| 達成基準 | レベル | デザインで守ること |
|---|---|---|
| 1.4.3 コントラスト（最低限） | AA | 文字と背景のコントラスト比を4.5:1以上、大きな文字は3:1以上にする |
| 1.4.11 非テキストのコントラスト | AA | 入力欄の枠やアイコンなど、操作に必要な部品と背景のコントラスト比を3:1以上にする |
| 1.4.1 色の使用 | A | エラーや必須項目、グラフの系列などを色だけで伝えず、文字やアイコン、形を組み合わせる |
| 1.4.4 テキストのサイズ変更 | AA | 文字を200％に拡大しても、内容や機能が失われないようにする |
| 1.4.10 リフロー | AA | 幅320CSSピクセル相当の画面でも、縦のスクロールだけで読めるようにする |
| 2.4.7 フォーカスの可視化 | AA | キーボードで選んでいる場所が見えるようにし、フォーカスの枠を消さない |
| 2.4.11 フォーカスが隠れない（最低限） | AA（2.2で追加） | 固定のヘッダーやバナーなどで、フォーカスした部品が完全に隠れないようにする |
| 2.5.8 ターゲットのサイズ（最低限） | AA（2.2で追加） | 押す対象を24×24CSSピクセル以上にするか、周りに十分な間隔を取る（例外あり） |
| 3.3.8 認証のアクセシビリティ（最低限） | AA（2.2で追加） | ログインで、パズルを解く、覚えた文字を入力し直すなどの認知的なテストだけを求めない |
| 2.2.2 一時停止、停止、非表示 | A | 自動で動き続けるアニメーションやスライドに、止める方法を用意する |
WCAGでいう「大きな文字」は、18ポイント（約24CSSピクセル）以上、または太字で14ポイント（約18.66CSSピクセル）以上の文字です。18ピクセルではない点に注意しましょう。また、フォーカスの枠の太さやコントラストを細かく定めた2.4.13 フォーカスの外観はレベルAAAの基準で、AAを目標にする場合は必須ではありません。
あわせて読みたい（デザインの力を伸ばす）
日本の法律では何が変わった？
2024年4月1日施行の改正障害者差別解消法で、民間の事業者にも「合理的配慮の提供」が義務になりましたが、WebサイトをWCAGに適合させること自体が義務になったわけではありません。Webアクセシビリティの向上は、事前の「環境の整備」として努力義務の位置づけです。
| 項目 | 内容 |
|---|---|
| 合理的配慮の提供 | 障害のある人から、社会的なバリアを取り除いてほしいと申し出があった場合に、負担が重すぎない範囲で対応すること。2024年4月1日から民間の事業者も法的義務になった |
| 環境の整備 | 個別の申し出がなくても対応できるよう、事前にWebサイトなどを整えておくこと。努力義務 |
| 公的機関のWebサイト | 総務省の「みんなの公共サイト運用ガイドライン」が、JIS X 8341-3:2016の適合レベルAAへの対応を求めている |
| 海外の動き | EUでは欧州アクセシビリティ法（European Accessibility Act）が2025年6月28日から適用され、EUで提供する一部の製品やサービスにアクセシビリティの要件が課されている |
「Webアクセシビリティが法律で義務化された」という説明は正確ではありません。義務になったのは合理的配慮の提供で、Webサイトの事前の整備は努力義務です。ただし、申し出を受けてから対応するより、事前にWCAGのレベルAAを目安に整えておくほうが、利用者にとっても事業者にとっても負担が少なくなります。個別のケースで法律上どこまでの対応が必要かは事情によって異なるため、判断に迷う場合は公的な資料を確認し、必要に応じて専門家に相談してください。
制作ではどう確認する？
確認は、コントラストを測るツール、自動で問題を見つけるツール、キーボードだけでの操作やスクリーンリーダーでの手作業の確認を組み合わせて行います。自動のツールで見つかるのは問題の一部で、手作業での確認が欠かせません。
| ツール | 確かめられること |
|---|---|
| WebAIM Contrast Checker | 文字色と背景色を入れると、コントラスト比とAA・AAAの合否が分かる |
| Figmaのコントラスト確認のプラグイン | デザインの途中で、配色のコントラスト比を確かめられる |
| Chromeのデベロッパーツール、Lighthouse | ブラウザ上で要素のコントラスト比や、よくある問題を確かめられる |
| axe DevTools | ページを自動で調べ、WCAGに反する可能性がある箇所を一覧にする |
| スクリーンリーダー（パソコンやスマートフォンの読み上げ機能） | 画像の説明やボタンの名前が、音で正しく伝わるか |
現場で使うチェックリストは？
- 意味のある画像に、内容が伝わる代替テキスト（alt属性）が設定されている
- 飾りの画像は空の代替テキスト（alt=””）にして、読み上げで飛ばされるようにしている
- フォームの見出し（ラベル）と入力欄が正しく結び付いている
- エラーを赤色だけでなく、文字やアイコンでも示している
- Tabキーだけで、全てのリンク、ボタン、フォームを操作できる
- フォーカスの枠が見えている（CSSで安易に消していない）
- 文字を200％に拡大しても、レイアウトが崩れない
- ボタンやリンクなど押す対象が、小さすぎたり近すぎたりしない
- 自動で動くアニメーションやスライドを、止められる
新しい案件で配色を決めるときは、メインの色を決めた段階で、文字に使う濃い色と背景に使う薄い色を、コントラスト比4.5:1以上になる組み合わせとして用意しておくと、あとから調整する手間が減ります。
アクセシビリティを案件にどう生かす？
見積もりに「WCAG 2.2 レベルAAを目安にした設計と確認」を項目として明記し、ポートフォリオで具体的な対応を示すと、アクセシビリティを重視するクライアントに選ばれやすくなります。対応の範囲をはっきりさせることで、追加の作業としての価値も伝わります。
見積もり・提案での書き方の例
アクセシビリティへの配慮：WCAG 2.2のレベルAAを目安に、文字と部品のコントラスト、フォーカスの表示、押しやすいボタンの大きさ、代替テキストを設計に反映します。公開前に、確認ツールとキーボード操作による確認を行い、結果をご報告します。
※サイト全体の第三者による適合試験は、別途のお見積もりとなります。
- ポートフォリオに、コントラストの確認結果やフォーカスの表示など、対応した点を具体的に書く
- 行政、医療、教育、大企業など、アクセシビリティへの関心が高い分野の案件で強みとして示す
- WAICの日本語訳やW3CのWAIの解説で、基準の意味を学び続ける
あわせて読みたい（提案と実績の見せ方）
よくある質問（FAQ）
アクセシビリティデザインは、障害のある人や高齢者、一時的・状況的に制約がある人も含め、誰もが使えるようにする設計。国際基準WCAG 2.2のレベルAAを目安にする
デザインで押さえるのは、文字と部品のコントラスト、色だけに頼らない表現、文字の拡大とリフロー、フォーカスの表示、押す対象の大きさ。確認はツールと手作業を組み合わせる
改正障害者差別解消法で義務になったのは合理的配慮の提供で、Webの事前の整備は努力義務。正確に説明し、見積もりやポートフォリオで対応範囲を示して強みにする
アクセシビリティは特別な専門知識ではなく、利用者への配慮を設計に落とし込む習慣です。実際の案件で1項目ずつ取り入れながら、誰にとっても使いやすいデザインを提案できるデザイナーを目指しましょう。
