ユニバーサルデザインで差をつける Webサイトのアクセシビリティ設計でおさえるべき3つのポイント

2025年09月05日

なぜWebアクセシビリティを心がけるべきなのか？ Webアクセシビリティとは、WebサイトやWebアプリケーションの閲覧者や利用者の年齢・利用シーン・環境にかかわらず、提供される情報やサービスを正常に […]

なぜWebアクセシビリティを心がけるべきなのか？

Webアクセシビリティとは、WebサイトやWebアプリケーションの閲覧者や利用者の年齢・利用シーン・環境にかかわらず、提供される情報やサービスを正常に利用できる指針、或いはその到達度を意味します。昨今Webから情報を得ることは生活や娯楽情報だけに至らず、ニュースや災害情報などの重要な情報の入手手段としても必要不可欠なものになっています。年齢や身体的多様性に囚われず、多くの方々に情報を不自由なく伝える配慮はWebサービス提供者・設計者にとって必要不可欠な要素です。

たとえ身体的障がいでなくても、加齢により視力が衰えた高齢者や、事故や怪我などで一時的に手が使えない人なども配慮して設計することが重要です。

目が不自由（視覚障害）の割合(6.6%)※1
手足が不自由（肢体不自由）の割合(38.0%)※1
高齢者の割合（29.1％）※2

※1 厚生労働省令和4年度の調査に基づく
 ※2 内閣府令和5年度の調査に基づく

1.視覚面で配慮すべきポイント

視力が低下している利用者に見やすいよう文字や図の大きさを配慮する他にも、特定の色が見えづらくなる色覚特性（色覚異常）のある利用者にもわかりやすい配色やデザインをすることが重要です。
また、画面上の文字やリンクを音声で案内する、音声読み上げブラウザ（テキストリーダー）利用者にも配慮することも重要です。

色のコントラストを適切にする (文字と背景色の明度差を十分にする)。
文字サイズを調整可能にする (フォントサイズを大きくする、拡大表示に対応する)。
色覚特性のある人にも情報が伝わるよう色使いを工夫する (色だけに頼らず、模様や形も併用する)。
文中のリンクを視認させるよう下線で差別化する。

引用：令和6年（2024年）能登半島地震に関する情報（石川県）

音声で読み上げたときにわかりやすいナビゲーションやリンク表現を提示する。
音声で読み上げたときに不適切な表現にならないようルビや文章内容に気を遣う。
図や写真などの視覚的な要素に代替テキストを提供する (画像、アイコン、グラフなどに説明文やalt属性を追加する)。

2.操作面で配慮すべきポイント

高齢者や肢体不自由で目や手の動作に不自由がある利用者にも操作しやすいGUI（グラフィカルユーザーインタフェイス）の設計に配慮しましょう。

文字サイズを大きくし読みやすくする。
ボタンやリンクの領域を大きくしてクリック・タップしやすくする。
複雑な操作を可能な限り排除し、操作手順を単純化する。
キーボード操作だけで全ての機能を利用できるようにする。
マウス操作が難しい人のために、キーボード操作や音声入力に対応する。

3.コンテンツ面で配慮すべきポイント

あらゆる利用者が理解しやすいようページ内の文面や表現にも配慮するように心がけましょう。

難しい用語や専門用語の使用を避け、平易な言葉を使う。
文書構造を分かりやすく構成する (見出し、段落、リストなどを適切に使う)。
視覚的な要素を効果的に使う (ピクトグラム、図解、イラストなど)。
画面に集中しやすいように、不必要な情報の掲載を避ける（文中の広告バナーなどを避ける）。
曖昧な表現を避け、誤解や勘違いを引き起こす表現は避ける。

アクセシビリティガイドラインについて

Webアクセシビリティにはガイドラインがあります。代表的なガイドラインを2個紹介します。

WCAG 2.0（Web Content Accessibility Guidelines）

W3C（World Wide Web Consortium）が勧告しているガイドラインです。

知覚可能 (Perceivable)、操作可能 (Operable)、理解可能 (Understandable)、堅牢 (Robust) の4つの原則に基づいているのが特徴です。各原則には達成基準がありA、AA、AAAの3つの適合レベルが定められています。詳しくは以下を参照ください。

Web Content Accessibility Guidelines (WCAG) 2.0（和訳）

WCAG2.0から改訂された。WCAG2.1ではスマートフォンなどのタッチデバイスへの対応、色覚特性に関するガイドラインなどが盛り込まれています。

Web Content Accessibility Guidelines（WCAG）2.1（和訳）

WCAG2.1から改訂された。WCAG2.2では昨今のWebサービスで使われる認証サービスやヘルプ案内に関するガイドラインが盛り込まれています。

Web Content Accessibility Guidelines（WCAG）2.2（和訳）

JIS X 8341-3

JIS（日本工業規格）が定める「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第 3部：ウェブコンテンツ」と呼ばれるガイドラインです。Webサイトのほかアプリケーションや業務システム、電子マニュアルなどのコンテンツでもガイドラインが適用されます。

かつて日本独自の規格で定めていましたが、2025年現在の勧告されているJIS X 8341-3:2016では、前述のWCAG2.0の内容が盛り込んでおります。従ってJIS X 8341-3に適合するためにはWCAG2.0のガイドラインに準拠する必要がありますが、条件を満たすことで同時にWCAGの準拠も達成していると解釈できます。

JIS X 8341-3:2016 試験実施ガイドライン

これらのガイドラインは、病院や地方自治体、官庁関連のWebサイトでの対応が求められます。

Webアクセシビリティで気をつけたいチェックポイント

項目	チェックポイント	補足
十分なコントラスト比	– 文字と背景色のコントラスト比がWCAGの推奨値 (AA: 4.5:1、AAA: 7:1) を満たしているか	– コントラスト比チェッカーツールを利用
色の使用	– 色だけで情報を伝えていないか	– 色覚特性者にも理解できるよう、形、パターン、文字などを併用
代替テキスト	– 画像に適切な代替テキスト (alt属性) が設定されているか	– スクリーンリーダーで読み上げられる内容であるか
テキストサイズ	– 文字サイズが十分に大きく、読みやすいか	– ユーザーが文字サイズを拡大できる機能を提供
フォント	– 読みやすいフォントを使用しているか	– 装飾的なフォントは避け、可読性の高いフォントを選ぶ
キーボード操作	– マウスを使わずにキーボードだけで操作できるか	– Tabキー、Enterキー、矢印キーなどで操作できるか
フォーカス表示	– キーボード操作中に現在選択されている要素が明確にわかるか	– フォーカス表示のデザインも確認
見出し	– 適切な見出し (H1〜H6) を使用してコンテンツの構造を明確にしているか	– 見出しの階層構造が正しいか
リスト	– 箇条書きや番号付きリストは適切なリスト要素 (ul, ol, li) を使用しているか	– リストの種類に合わせて要素を使い分ける
リンク	– リンクテキストはリンク先の内容を適切に表しているか	– 「ここをクリック」のような曖昧な表現は避ける
ラベル	– すべてのフォーム要素に、対応するラベルが正しく関連付けられているか	– ラベルとフォーム要素の関連付けを確認
エラーメッセージ	– フォーム入力でエラーが発生した場合、エラーの内容を明確に伝え、ユーザーが修正できるよう具体的な指示を表示しているか	– エラーメッセージの表示方法、内容を確認
音声・動画コンテンツ	– 音声コンテンツには文字起こし、動画コンテンツには字幕を提供しているか	– 字幕は正確で、タイミングも合っているか
音声の説明	– 動画の内容を音声で説明する音声解説を提供しているか	– 音声解説は動画の内容を理解するのに十分な情報量か
時間制限	– 時間制限のあるコンテンツは、時間延長のオプションを提供しているか、十分な時間を与えているか	– 時間制限がユーザーにストレスを与えないか
点滅	– 激しい点滅を避けているか	– 点滅するコンテンツは点滅速度を調整
コンテンツの順序	– 意味のある順序でコンテンツが配置されているか	– スクリーンリーダーで読み上げた際に、論理的な順序で情報が伝わるか

補足：Webブラウザで色覚特性チェックを行う

Google Chrome（Microsoft Edge）でも色覚特性シミュレーションを行うことができます。

Web開発者ツール (Chrome DevTools) を開く。
Windows:[F12] キー
macOS:[⌘ command]＋[option]＋[I] キー
Web開発者ツール右上の三点ボタンから[その他のツール]→[レンダリング]を選択
スクロールすると表示される[色覚異常をエミュレート]から任意の見え方を選択