ブログ

Blog

ウェブアクセシビリティ規格のレベル毎の違いをわかりやすく解説します。(レベルA、レベルAA、レベルAAA)

ウェブアクセシビリティ規格(JIS X 8341-3:2016)は全部で61項目ありますが、そこで定義されているレベルの違いを特定の項目に絞ってわかりやすく解説します。
大まかにレベル毎の違いを明記すると下記のようになります。

  • レベルA(25項目)
    最低限の基準。この基準を達成していないと、ホームーページを閲覧できない人が存在しうる。
  • レベルAA(13項目)
    望ましい基準。この基準を達成していないと、ホームページの閲覧が困難な場合がある。
  • レベルAAA(23項目)
    発展的な基準。この基準を満たすと、よりホームページが閲覧しやすくなる。

例えば、あるホームページが「レベルAA準拠」を宣言するためにはレベルAとレベルAAの項目全てを満たす必要があります。

コントラスト比

レベルA準拠のホームページのコントラスト比

レベルAの項目にはコントラスト比に関する規定はありません。

このテキストと背景色のコントラスト比は2.9:1です。

レベルAA準拠のホームページのコントラスト比

少なくとも 4.5:1 のコントラスト比が必要です。(大きな文字の場合は3:1)

このテキストと背景色のコントラスト比は4.5:1です。

レベルAAA準拠のホームページのコントラスト比

少なくとも7:1のコントラスト比が必要です。(大きな文字の場合は4.5:1)

このテキストと背景色のコントラスト比は7:1です。

文字画像

レベルA準拠のホームページの文字画像

レベルAの項目には文字画像に関する規定はありません。
(文字画像とは画像で作られたテキストのことです)
下記は見出しデザインとその後の文章(コメント)を全て文字画像で実装したサンプルです。

見出しデザイン

コメントコメントコメントコメントコメントコメントコメントコメント

レベルAA準拠のホームページの文字画像

レベルAAでは、意図した視覚的な表現がHTMLとCSSで実現できる場合、文字画像ではなくテキストを使わなければなりませんが、HTMLとCSSで実現できない場合は、文字画像を使えます。
下記の「見出しデザイン」はHTMLとCSSで実現不可能なため文字画像を使用していますが、その後の文章(コメント)はHTMLとCSSで実現できるため、テキストを使用しています。

見出しデザイン

コメントコメントコメントコメント
コメントコメントコメントコメント

レベルAAA準拠のホームページの文字画像

レベルAAAになると視覚的な表現を実現するための文字画像は全てNGです。必要不可欠なもの(組織のロゴ、書体のサンプル等)以外は全てテキストを使わなければいけません。
下記は見出しデザイン・コメント共にテキストを使用しています。

見出しデザイン
コメントコメントコメントコメント
コメントコメントコメントコメント

テキストサイズ等に関して

レベルA準拠のホームページのテキストサイズ

テキストサイズ等に関して特に規定はありません。

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

レベルAA準拠のホームページのテキストサイズ

文字のサイズを200%まで変更してもレイアウトが崩れることなくテキストが読めるようにする必要があります。

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル

レベルAAA準拠のホームページのテキストに関して

下記5つを全て満たす必要があります。
1.ユーザーが背景色、前景色を選べるようにする
2.1行あたり全角40文字程度
3.両端揃えを使わない
4.十分な行送り(1.5倍以上)と段落間隔(行送りの1.5倍)
5.文字サイズを200%まで変更してもレイアウト等が崩れない、且つ横スクロールが発生しない。

テキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプルテキストサンプル