アクセシビリティとは?Webデザインで押さえたいWCAGの4原則と基本

「Webサイトにはアクセシビリティへの配慮が必要」と聞いたものの、何をすればいいのか、デザインでどこに気をつければいいのかが分からない。

アクセシビリティは難しい専門分野に思われがちですが、デザインの段階で決まる部分が多く、基本を知っていればすぐに取り組めることもたくさんあります。

この記事では、アクセシビリティとは何か、その意味と基準になるWCAGの4原則を押さえたうえで、Webデザインで気をつけたい点を「色」「文字」「レイアウト・操作」の3つの目線で整理し、初心者向けに解説します。

それぞれの目線の詳しい解説は個別の記事にまとめているので、この記事はアクセシビリティを学ぶときの「入口」として使ってください。

アクセシビリティの基本

まずはアクセシビリティという言葉の意味と、誰のためのものなのか、どんな基準があるのかを押さえましょう。

アクセシビリティとは何か

アクセシビリティとは、障害の有無や年齢、使っている機器や環境にかかわらず、誰もが情報やサービスを利用できることを表す言葉です。

英語の「access(近づく、利用する)」から来た言葉で、日本語では「利用のしやすさ」「近づきやすさ」と言い換えられることもあります。

Webサイトについてのアクセシビリティを、特に「Webアクセシビリティ」と呼びます。

MDNの解説でも、アクセシビリティは「ウェブサイトを可能な限り多くの人に利用してもらうようにすること」と説明されています(MDN「アクセシビリティとは?」)。

アクセシビリティは誰のためのものか

アクセシビリティは、障害のある人のためだけのものではありません。

Webのルールを作っている団体W3Cの解説でも、障害のある人に加えて、次のような人たちにも役立つと紹介されています(W3C WAI「Introduction to Web Accessibility」(英語))。

年齢とともに、見えにくさや操作のしにくさを感じるようになった高齢の人
腕のけがなどで、一時的にいつもどおりの操作ができない人
強い日差しの下で画面を見ている人や、音を出せない場所にいる人
通信の遅い回線を使っている人

つまりアクセシビリティを高めることは、特定の人への特別な対応ではなく、より多くの人にとって使いやすいサイトを作ることにつながります。

そして、色・文字の大きさ・ボタンの大きさといった多くの部分は、デザインの段階で決まります。

作ったあとで直すと手間がかかるので、デザインを考えるときから意識しておくことが大切です。

基準になるWCAGとJIS X 8341-3

Webアクセシビリティには、何をどこまで満たせばよいかを示す基準があります。

国際的な基準が、W3Cが定めるWCAG(Web Content Accessibility Guidelines、ウェブコンテンツ・アクセシビリティ・ガイドライン)で、現在の最新版はWCAG 2.2です(WCAG 2.2、WAICによる日本語訳)。

WCAGには、満たすべき具体的な項目である「達成基準」が並んでいて、それぞれに A・AA・AAA の3段階の「適合レベル」が付いています。

適合レベル	意味
A	最低限のレベル
AA	中程度のレベル(AとAAの両方を満たす)
AAA	最高のレベル(A・AA・AAAのすべてを満たす)

多くの場合、AとAAの達成基準をすべて満たす「レベルAA」が目標にされます。

日本には、これに対応する日本産業規格(JIS)として JIS X 8341-3:2016 があり、内容はWCAG 2.0と一致しています(WAIC「JIS X 8341-3:2016 解説」)。

これから取り組む人向けには、デジタル庁が図を多く使ったウェブアクセシビリティ導入ガイドブックを公開しているので、あわせて読むと全体像をつかみやすくなります。

アクセシビリティの土台になるWCAGの4原則

WCAGのたくさんの達成基準は、4つの原則のもとに整理されています。

細かい基準を覚える前に、この4原則を知っておくと、何のための基準なのかが分かりやすくなります。

4原則をひと言で言うと

WCAGの4原則は、知覚可能・操作可能・理解可能・堅牢の4つです。

原則	ひと言でいうと	デザインでの例
知覚可能	情報を、見る・聞くなどの方法で受け取れる	文字と背景の明るさの差を取る、画像に代わりの文章を付ける
操作可能	マウスがなくても、誰でも操作できる	キーボードで操作できる、押す場所を十分な大きさにする
理解可能	内容や操作の仕方が分かる	入力欄に何を書くかのラベルを付ける、操作の仕方をそろえる
堅牢	読み上げソフトなど、さまざまな道具で正しく読み取れる	見た目だけでなく、HTMLの正しい要素で作る

たとえば「知覚可能」は、情報を受け取れる方法で示さなければならない、という原則です。

文字が背景に溶け込んで見えなかったり、写真だけで説明していて画面を読み上げるソフトでは内容が伝わらなかったりすると、この原則を満たせません。

4つのうち「堅牢(けんろう)」は、日常ではあまり使わない言葉ですが、「頑丈で壊れにくい」という意味です。

ここでは、ブラウザーや画面を読み上げるソフトなど、どんな道具で読み込んでも中身が正しく伝わるように、しっかりした作りにしておくことを指します。今ある道具だけでなく、これから出てくる道具でも使えるように、という考え方も含まれています。

各原則の正確な文言は、WAICによるWCAG 2.2の日本語訳で確認できます。

デザイナーが特に関わる原則

4原則のうち、デザインで特に関わりが深いのは「知覚可能」と「操作可能」です。

色・文字の大きさ・ボタンの大きさ・フォーカスの見え方など、見た目で決まる部分の多くがこの2つに含まれるからです。

「理解可能」も、入力欄のラベルやナビゲーションの並び方など、画面の設計で決まる部分があります。

「堅牢」は主にHTMLの書き方に関わる原則ですが、デザインの意図を正しいHTMLで表せるよう、実装する人と見出しやボタンの役割を共有しておくことが大切です。

デザインでアクセシビリティを高める3つの目線

ここからは、デザインで気をつけたい点を「色」「文字」「レイアウト・操作」の3つの目線に分けて、要点と小さな見本で紹介します。

気になった目線は、それぞれの詳しい記事で確認してください。

色の目線:コントラストと、色だけに頼らない工夫

色の目線で押さえたいのは、明るさの差(コントラスト)を十分に取ることと、情報を色だけで伝えないことの2つです。

文字のコントラスト:
本文の文字と背景のコントラスト比は4.5:1以上、大きな文字は3:1以上が基準です(達成基準 1.4.3、レベルAA)。
文字以外のコントラスト:
入力欄の枠線やアイコンなど、操作や理解に必要な図形も、隣り合う色と3:1以上の差が求められます(達成基準 1.4.11、レベルAA)。
色だけに頼らない:
色を、情報を伝える唯一の手段にしないことが求められます(達成基準 1.4.1、レベルA)。
色の見え方は人によって違うためです。

下の見本は、入力フォームのエラーの伝え方を比べたものです。

メールアドレス

電話番号

NG:薄い枠線で、エラーは枠の色だけで伝えている

メールアドレス

例:name@mail.jp

電話番号

例:0312345678

× 電話番号を入力してください

OK:濃い枠線とラベル、エラーは「×」と文章でも伝える

同じ入力フォームの、エラーの伝え方の違い

左の見本(NG)は、入力欄の枠線が背景に対して約1.5:1と薄く、エラーも枠が赤いことでしか分からないので、色の見分けが難しい人にはどこが間違っているのか伝わりません。

右の見本(OK)は、枠線を約3.8:1まで濃くし、「×」の印と「電話番号を入力してください」という文章を添えているので、色が見分けにくくてもエラーの場所と内容が分かります。

色の見え方の多様性や、色の組み合わせの確かめ方は、色のアクセシビリティとは?で、明るさの差を使った読みやすい配色の作り方は配色と可読性とは?で詳しく解説しています。

コントラスト比の基準はコントラスト比とは?、色以外の手がかりの足し方は色だけに頼らないデザインとは?、エラーやホバーなどの色は状態色とは?で解説しています。

文字の目線:拡大しても崩れない、読みやすい文字

文字の目線で押さえたいのは、誰でも読める大きさと間隔を確保し、利用者が文字を大きくしても内容が欠けないようにすることです。

文字の拡大:
文字を200%まで大きくしても、内容や機能が損なわれないことが求められます(達成基準 1.4.4、レベルAA)。
文字が箱からはみ出して重なったり、切れて読めなくなったりしないデザインにします。
見えにくさのある人や高齢の人の中には、ブラウザーの拡大機能で画面を2倍ほどに大きくして読む人がいるためです。拡大したときに文字が切れたりボタンが画面の外に出たりすると、その人は内容を読めず、操作もできなくなります。
行間や文字の間隔:
利用者が行の高さや文字の間隔を広げても、内容が欠けないことが求められます(達成基準 1.4.12、レベルAA)。
文字はなるべく画像にしない:
画像の中の文字は、拡大するとぼやけたり、読み上げソフトで読めなかったりするので、できるだけHTMLの文字で表示します。

文字のサイズや行間を決めるときは、まず読みやすさ(可読性)の基本を押さえておくと、アクセシビリティの基準も満たしやすくなります。

行間と行長の決め方は行間と行長の黄金ルール、書体の種類はフォントと書体の種類の知識で解説しています。

文字の拡大・行間・字間の基準や、読み間違えにくいフォントの選び方は、文字のアクセシビリティを文字の目線から詳しく解説する別の記事で紹介します。

レイアウト・操作の目線:フォーカス・押しやすさ・代替テキスト

レイアウト・操作の目線で押さえたいのは、マウス以外でも迷わず操作でき、画像の内容が見えなくても伝わるようにすることです。

キーボードで操作できる:
すべての機能をキーボードだけで操作できることが求められます(達成基準 2.1.1、レベルA)。
マウスを使えない人や、読み上げソフトを使う人がいるためです。
フォーカスが見える:
キーボードで操作しているとき、今どこを選んでいるかを示す印(フォーカスインジケーター)が見えることが求められます(達成基準 2.4.7、レベルAA)。
パソコンでTabキーを押したときに、リンクやボタンの周りに出る青や黒の枠線のことです。テレビのリモコンで、画面の選択枠を動かしていくようすに近いイメージです。
押す場所の大きさ:
ボタンやリンクなど、タップやクリックする場所は、原則として24×24 CSSピクセル以上の大きさが求められます(達成基準 2.5.8、レベルAA、周りの余白などによる例外あり)。
最高レベル(AAA)では44×44 CSSピクセル以上です。
代替テキスト:
写真や図などの画像には、同じ目的を果たす文章(代替テキスト)を用意することが求められます(達成基準 1.1.1、レベルA)。
入力欄のラベル:
入力欄には、何を入力するのかを示すラベルや説明を付けることが求められます(達成基準 3.3.2、レベルA)。

下の見本は、キーボードで「申し込む」ボタンを選んでいるときの見え方を比べたものです。

申し込む

NG:フォーカスの印を消している

申し込む

OK:はっきりした青い枠でフォーカスを示す

キーボードでボタンを選んでいる状態を表した見本

左の見本(NG)では、どのボタンが選ばれているのかが分からず、キーボードで操作している人は迷ってしまいます。

右の見本(OK)のように、ボタンの外側に背景とはっきり差のある枠を出すと、今どこにいるのかがひと目で分かります。

ブラウザーは標準でフォーカスの印を表示しますが、見た目を理由にCSSで消してしまうと、この基準を満たせなくなります。

デザイナーとしてできるのは、Figmaなどでボタンをデザインするときに、通常・ホバーに加えて「フォーカスされたとき」の見た目も用意し、実装する人に渡すことです。

ここから先のコードは、自分で書けなくても大丈夫です。実装する人と話すときの知識として、「こういう指定がある」とだけ知っておきましょう。

デザインに合わせて印を変えたいときは、CSSの:focus-visible(キーボード操作などで印を見せるべきときだけに当たる指定)を使うと、マウスでクリックしたときには出さずに、キーボード操作のときだけ印を表示できます(MDN「:focus-visible」)。

.button:focus-visible {
  outline: 3px solid #1f6fae;  /* 背景とはっきり差のある色の枠 */
  outline-offset: 3px;         /* ボタンから少し離して表示 */
}

代替テキストは、HTMLのimg要素のalt属性に書きます(MDN「img要素」)。

<!-- 内容を伝える画像:何が写っているかを文章で書く -->
<img src="marche.jpg" alt="野菜やパンのテントが並ぶ週末マルシェの会場">

<!-- 飾りだけの画像:altを空にして、読み上げソフトに無視してもらう -->
<img src="line.png" alt="">

飾りのためだけの画像は、読み上げソフトが無視できるようにalt=""と空にしておきます。

飾りの画像にも説明を付けたほうが親切に思えるかもしれません。しかし、区切り線や背景の模様まで「線の画像」「星の画像」と1つずつ読み上げられると、肝心の本文にたどり着くまでに時間がかかり、かえって邪魔になってしまいます。

デザインデータを渡すときに、どの画像が内容を伝えるもので、どれが飾りなのかを伝えておくと、実装する人が正しく書き分けられます。

押しやすいボタンの大きさや配置はCTAボタンとは?、リンクやボタンの色のルールはリンク・ボタンなどのUIカラーとは?で解説しています。

アクセシビリティを確かめる方法

3つの目線が分かったら、自分のサイトのアクセシビリティを、手軽な方法から確かめてみましょう。

今日からできる4つのチェック

専門のツールがなくても、ブラウザーだけで確かめられることがたくさんあります。

Lighthouseで自動チェック:
Chromeに入っている無料ツールLighthouseの「Accessibility」(アクセシビリティ)のカテゴリで、コントラスト不足や代替テキストの抜けなどをまとめて見つけられます。
ページ上で右クリックして「検証」を選ぶ(またはF12キー、Macならcommand+option+I)とデベロッパーツールが開くので、上部のタブから「Lighthouse」を選び、「Analyze page load」ボタンを押すと、100点満点のスコアと見つかった問題が表示されます。
キーボードだけで操作:
マウスを使わずTabキーで移動し、すべてのリンクやボタンにたどり着けるか、フォーカスの印が見えるかを確かめます。
200%に拡大:
ブラウザーの拡大機能で200%にして、文字が重なったり切れたりしていないかを確かめます。
コントラスト比を測る:
本文・リンク・ボタンの文字と背景の組み合わせを、WebAIM Contrast Checkerなどのツールで測ります。

Lighthouseの使い方とスコアの見方はGoogle Lighthouseとは?で解説しています。

ただし、自動チェックで見つけられるのは問題の一部で、代替テキストの内容が適切かどうかなどは、人の目で確かめる必要があります。

実践のポイント

アクセシビリティに取り組むときに陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

アクセシビリティを「障害のある人向けの特別な対応」と考え、後回しにしてしまうことがあります。
高齢の人や屋外でスマートフォンを使う人など、多くの人の使いやすさにつながるので、デザインの最初から基準を意識しましょう。
見た目をすっきりさせるために、フォーカスの印をCSSで消してしまうことがあります。
消すのではなく、:focus-visibleでデザインに合った印に置き換えましょう。
Lighthouseのスコアが100点なら対応は完璧だと考えてしまうことがあります。
自動チェックでは分からない問題もあるので、キーボード操作や拡大表示など、自分の手でも確かめましょう。

よくある質問

Q. アクセシビリティとユーザビリティの違いは?
A. アクセシビリティは「利用できるかどうか」、ユーザビリティは「どれだけ使いやすいか」に注目した言葉です。
たとえば、キーボードで操作できないボタンはアクセシビリティの問題で、操作はできるけれど手順が多くて分かりにくいのはユーザビリティの問題、と考えると区別しやすくなります。
お店にたとえると、車いす用のスロープや自動ドアがあって誰でも中に入れるようにするのがアクセシビリティ、店内の棚が見やすく、商品を探しやすいようにするのがユーザビリティです。
どちらも利用者の使いやすさにつながるので、両方を意識するのが理想です。
Q. WCAGの基準はすべて満たさないといけない?
A. 最高レベルのAAAまですべて満たすのは、内容によっては難しいこともあります。
まずはレベルAとAAの達成基準を目標にし、その中でも色のコントラストや代替テキストなど、デザインですぐに直せるものから取り組みましょう。
Q. 個人のブログでもアクセシビリティを考えたほうがいい?
A. 考えたほうがよいです。
文字のコントラストを確保する、画像に代替テキストを付けるといった基本の対応は、どんなサイトでも少しの手間で始められ、より多くの読者に記事を届けることにつながります。