AllyCheck/ガイド

ウェブアクセシビリティチェック完全ガイド

ウェブアクセシビリティチェックとは何か、なぜ必要なのか、どのようにチェックすればよいのか。基礎知識から具体的な手順までをまとめました。

ウェブアクセシビリティとは

ウェブアクセシビリティとは、高齢者や障害のある人を含め、誰もがウェブサイトの情報や機能を利用できる状態を指します。

たとえば、視覚に障害のある人はスクリーンリーダーを使ってウェブサイトを閲覧します。画像に代替テキストが設定されていなければ、その情報にアクセスできません。 同様に、キーボードだけで操作する人にとって、マウスでしか動作しないメニューは使えません。

アクセシビリティを確認するためには、ウェブサイトがこうした多様なユーザーに対応できているかを検証するアクセシビリティチェックを行う必要があります。

なぜアクセシビリティチェックが必要か

法制度への対応

2024年4月に施行された改正障害者差別解消法により、民間事業者にも合理的配慮の提供が義務化されました。ウェブサイトのアクセシビリティ確保は、その対応の一環として重要性が高まっています。

利用者層の拡大

アクセシビリティに配慮することで、障害のある人だけでなく、高齢者やモバイルユーザー、一時的に操作が制限された状況のユーザーなど、より多くの人がサイトを利用できるようになります。

品質の向上

アクセシビリティチェックを通じて発見される問題の多くは、すべてのユーザーの使い勝手に影響するものです。代替テキストの不足、コントラスト比の問題、キーボード操作への対応不足などを改善することは、サイト全体の品質向上につながります。

アクセシビリティチェックの方法

アクセシビリティチェックには、主に次の2つの方法があります。

自動チェック

ツールを使ってウェブページを機械的に解析し、アクセシビリティ上の問題を検出する方法です。

  • ・短時間で多くのページをチェックできる
  • ・再現性が高く、定期的な監視に適している
  • ・検出できる問題に限りがある

手動チェック

人が実際に操作・確認しながら、アクセシビリティの問題を評価する方法です。

  • ・文脈や意味の適切さを判断できる
  • ・自動では検出できない問題を発見できる
  • ・専門知識と時間が必要になる

実際のアクセシビリティ対応では、自動チェックと手動チェックを組み合わせることが推奨されています。まず自動チェックで機械的に検出できる問題を洗い出し、その後に手動チェックで内容の適切さやインタラクションの問題を確認するのが効果的です。

自動チェックツール

アクセシビリティの自動チェックに使われる代表的なツールを紹介します。

axe

Deque Systems が開発するオープンソースのアクセシビリティテストエンジンです。ブラウザ拡張機能(axe DevTools)として利用でき、開発者向けにページ上の問題を詳細に表示します。多くのアクセシビリティツールの内部エンジンとしても採用されています。

Lighthouse

Google が提供するウェブページ品質監査ツールです。パフォーマンス、SEO、アクセシビリティなど複数の観点でページを評価します。Chrome DevTools に標準搭載されているため、すぐに利用できます。

WAVE

WebAIM が提供するアクセシビリティ評価ツールです。ウェブページ上に視覚的なアイコンで問題箇所を表示するのが特徴で、ブラウザ拡張機能やオンラインサービスとして利用できます。

AllyCheck

URLを入力するだけでアクセシビリティの問題を自動検出し、日本語でわかりやすく結果を表示するツールです。JIS X 8341-3 を意識した確認ビューも備えています。

※ 自動チェックツールでは、アクセシビリティの問題全体のうち約30〜50%程度を検出できるとされています。残りの問題を発見するためには、手動チェックが必要です。

手動チェック

手動チェックでは、自動ツールでは判断できない問題を人が確認します。以下は代表的な手動チェックの観点です。

1

キーボード操作の確認

Tabキーだけでページ内のすべてのリンク、ボタン、フォームに移動できるか確認します。フォーカスの位置が視覚的にわかるかも重要です。

2

スクリーンリーダーでの確認

スクリーンリーダー(VoiceOver、NVDAなど)を使い、ページの内容が正しく読み上げられるか確認します。見出しの構造、画像の代替テキスト、フォームのラベルなどが適切かを評価します。

3

コンテンツの意味の確認

リンクテキストが「こちら」だけになっていないか、エラーメッセージが具体的に何を修正すべきか伝えているかなど、文脈に依存する問題を確認します。

4

拡大表示の確認

ブラウザの拡大機能で200%に拡大した際に、コンテンツが正しく表示されるか、情報が欠落しないかを確認します。

WCAGとは

WCAG(Web Content Accessibility Guidelines)は、W3C(World Wide Web Consortium)が策定したウェブアクセシビリティの国際的なガイドラインです。

WCAGは以下の4つの原則に基づいています。

知覚可能

Perceivable

操作可能

Operable

理解可能

Understandable

堅牢

Robust

WCAGには3つの適合レベルがあります。

レベル A

最低限のアクセシビリティ要件です。画像の代替テキスト、キーボード操作の確保など、基本的な達成基準が含まれます。

レベル AA

多くの組織が目標とするレベルです。コントラスト比の確保、テキストの拡大対応など、実用的な達成基準が含まれます。日本の公共機関ではこのレベルの準拠が求められるケースが多くあります。

レベル AAA

最も高いアクセシビリティ水準です。すべての達成基準を満たすことは現実的に困難な場合が多く、特定のコンテンツやサービスにおいて部分的に対応することが一般的です。

JIS X 8341-3とは

JIS X 8341-3:2016は、日本産業規格(JIS)として定められたウェブアクセシビリティの規格です。WCAGの国際基準をベースに、日本の状況に合わせて策定されています。

正式名称は「高齢者・障害者等配慮設計指針 — 情報通信における機器、ソフトウェア及びサービス — 第3部:ウェブコンテンツ」です。

JIS X 8341-3 の特徴

  • WCAG 2.0 の達成基準と一致しており、国際規格との互換性がある
  • 日本の公共機関や企業のウェブサイトで広く参照されている
  • 試験方法が定められており、適合性を客観的に評価できる

アクセシビリティ対応を進める際は、JIS X 8341-3 のレベルAA準拠を目標にすることが一般的です。

アクセシビリティチェックの手順

実際にウェブサイトのアクセシビリティチェックを行う際の基本的な手順です。

1

対象ページを決める

サイト全体をチェックするのは現実的でない場合が多いため、まずはトップページ、主要な導線ページ、フォームページなど、優先度の高いページを選定します。

2

自動チェックツールで診断する

axe、Lighthouse、AllyCheck などのツールを使い、機械的に検出できる問題を洗い出します。代替テキストの不足、コントラスト比の不足、フォームラベルの欠落などが典型的な検出項目です。

3

手動チェックで補完する

キーボード操作、スクリーンリーダーでの読み上げ、コンテンツの意味の適切さなど、自動では判断できない問題を確認します。

4

問題を整理し、優先順位をつける

検出された問題を重大度(重大・深刻・中程度・軽微)で分類し、影響が大きい問題から改善に取り組みます。

5

改善後に再チェックする

修正を行ったら再度チェックを実施し、問題が解消されたことを確認します。アクセシビリティは一度対応して終わりではなく、継続的に取り組むことが重要です。

AllyCheckで診断する

AllyCheckでは、URLの入力によりアクセシビリティの問題を自動診断できます。

日本語でわかりやすく結果を表示し、JIS X 8341-3 を意識した確認ビューも利用できます。アクセシビリティチェックの最初の一歩として、ぜひお試しください。

無料でアクセシビリティ診断

数十秒で簡易診断します。