BLOG Webアクセシビリティ

こんにちは。Webloco代表/Webディレクターのヤブです。

本日は、「JIS X 8341-3:2016 試験実施ガイドライン」で紹介されている達成基準について、結構解釈が難しいので、私なりに解釈して、分かりやすく補足情報を加えました。

こちらを試験実施の参考にして頂ければ幸いです。

なお、「Webアクセシビリティって何？」という方は、「2024年に義務化「どうするWebアクセシビリティ」初心者にも分りやすく解説。」を最初にご覧ください。

この記事のターゲット

  • Webの基本的な知識がある方
  • 初めてWebアクセシビリティの試験実施をする方
  • 達成基準チェックリストを見たけどいまいち分からなかった方
  • Webアクセシビリティの理解を深めたい方
  • Webディレクター、デザイナー、コーダーの方

 

留意事項

  • この補足説明は、Web Content Accessibility Guidelines (WCAG)の公式ページやその他の情報を読んだ上で、私なりに解釈したものであり、100％正しい事を保証するものではありません。
  • 2023年12月時点では、適合レベル「AAA」の情報は一部のみとなります。
  • 補足説明を読んでも分からない場合は、、Web Content Accessibility Guidelines (WCAG)の公式ページやその他アクセシビリティの情報をご確認ください。

 

達成基準リスト

細分箇条 適合レベル 達成基準 補足説明
1.1.1 A

非テキストコンテンツ

すべての非テキストコンテンツ（画像、音声、動画etc）に、同等の目的を果たすテキストによる代替を提供する
1.2.1 A

音声だけ及び映像だけ（収録済み）

収録済みの音声のみ、または映像のみのメディアに、キャプション※やテキストによる書き起こしなどの代替コンテンツを提供する
※キャプション：コンテンツを理解するのに必要な会話、及び会話でない音声情報を視覚化、テキスト化したもの
1.2.2 A

キャプション（収録済み）

収録済みの音声コンテンツに、キャプションを提供する
1.2.3 A

音声解説又はメディアに対する代替コンテンツ（収録済み）

収録済みの映像コンテンツに、映像の内容を書き起こしたテキストまたは音声解説を提供する
1.2.4 AA

キャプション（ライブ）

ライブの音声コンテンツに、キャプションを提供する
1.2.5 AA

音声解説（収録済み）

収録済みの映像コンテンツに対して、音声解説を提供する。
1.2.6 AAA

手話（収録済み）の達成基準

収録済の音声コンテンツに対して、手話通訳を提供する。
1.3.1 A

情報及び関係性

表示されている情報に対して、適切にマークアップ、ラベリングがされており、プログラム（スクリーンリーダーやクローラーなど）から正確に解釈されるようにする。
1.3.2 A

意味のある順序

スクリーンリーダーなどで読み上げられる際、正しく意味のある順序になっている（DOMの要素をcssなどで順番を入れ替えたり、テキストに余分な空白が入っている場合などは注意）
1.3.3 A

感覚的な特徴

コンテンツの説明を感覚的な特徴（色、形、位置など）だけに依存しない。（説明文で「下の赤いボタンをクリックしてください。」ではなく、「下の送信ボタンをクリックしてください。」にするなど）
1.4.1 A

色の使用

色だけで情報を伝えない。色はあくまで情報を伝える為の補足として使う。
1.4.2 A

音声の制御

音声が自動再生される場合、音声を一時停止、または音量を調整できるようにする。
1.4.3 AA

コントラスト（最低限レベル）

テキストおよび文字画像に十分なコントラストを確保する
1.4.4 AA

テキストのサイズ変更

キャプション、または文字画像を除き、テキストを200％までサイズ変更出来る様にする
1.4.5 AA

文字画像

画像化された文字を使用しない（文字画像を利用者がカスタマイズ出来る場合と企業のロゴなどの場合は除く）
2.1.1 A

キーボード

コンテンツの全ての機能をキーボード操作可能にする
2.1.2 A

キーボードトラップなし

キーボードトラップ（フォーカスがキーボード操作で抜け出せなくなる仕様）があってはいけない。
2.2.1 A

タイミング調整可能

制限時間のあるコンテンツ（自動でスクロールする文字列、スライドショーなど）を設ける場合は、制限時間の解除や時間の調整など出来る様にする。
2.2.2 A

一時停止，停止及び非表示

動きのあるコンテンツに対して、ユーザーが一時停止、停止、非表示することができる
2.3.1 A

3回のせん（閃）光又はしきい（閾）値以下

1秒間に3回を超える閃光を放つコンテンツはあってはいけない。
2.4.1 A

ブロックスキップ

複数のページで重複するコンテンツ（グローバルナビゲーションなど）のブロックをスキップ出来る様にする。すぐにメインコンテンツにリーチできる仕様にする。
2.4.2 A

ページタイトル

ページの主題や目的が分かりやすいタイトルをつける。
2.4.3 A

フォーカス順序

フォーカス可能な要素は、コンテンツの意味および操作性を損なわない順序にする。
2.4.4 A

リンクの目的（コンテキスト内）

コンテンツ内のリンクの目的を分かりやすく説明する（悪い例「もっとみる」良い例「最新のお知らせをもっとみる」）
2.4.5 AA

複数の手段

任意のページを見つける手段を複数用意する（グローバルナビゲーション、サイトマップ、パンくずetc）
2.4.6 AA

見出し及びラベル

コンテンツ内の見出しおよびラベルは主題や目的を分かりやすく説明する。
2.4.7 AA

フォーカスの可視化

フォーカスがコンテンツのどこにあたっているか見える様にする
3.1.1 A

ページの言語

ページのデフォルトの言語が設定されている。（例<html lang=”ja“>）
3.1.2 AA

一部の言語

コンテンツの一部や語句で、デフォルト言語以外の言語を利用している場合は、lang属性でマークアップされている。
3.2.1 A

フォーカス時

フォーカスを受取った時に、ユーザーが予期しない挙動や動作をさせない。
3.2.2 A

入力時

入力時に、ユーザーが予期しない挙動や動作をさせない。
3.2.3 AA

一貫したナビゲーション

複数のページで繰り返し使用されているナビゲーションは統一させる。
3.2.4 AA

一貫した識別性

同じ機能を提供しているコンポーネント（リンク、ボタン、アイコンやラベルなど）はサイト内で一貫させる。
3.3.1 A

エラーの特定

入力エラーが発生した場合、エラーの箇所が表示され、そのエラー内容をユーザーにテキストで説明する。
3.3.2 A

ラベル又は説明

ユーザーに入力を求める場合、どこに、何を入力するか、分かりやすく説明する。
3.3.3 AA

エラー修正の提案

入力エラーが発生した場合、どのように修正したらよいかをユーザーに分かりやすく説明する。
3.3.4 AA

エラー回避（法的、金融及びデータ）

「法的なもの」、「金融取引」など、ユーザーの入力ミスによって、大きな損失が発生するフォームの場合は、送信の取り消し、修正、確認が出来る仕様にする。
4.1.1 A

構文解析

マークアップされたHTMLに誤りが無いようにする。
4.1.2 A

名前（name）、役割（role）、及び値（value）

ユーザーが操作対象となる要素に、名前（name）、役割（role）、値（value）を持っている場合は、プログラムが解釈できるようにする。

以上「ウェブアクセシビリティ　達成基準「A」「AA」補足情報」をお送りしました。

最後までご覧いただきありがとうございました。