ウェブアクセシビリティ導入ガイドブック

ウェブアクセシビリティ：よくある6つの質問に回答

基礎からわかる！ウェブアクセシビリティ導入ガイドブック：第5章・第6章（最終回）

Web担編集部 2023/7/6 7:00 マーケティング／広告 | 便利ツール／サービス

11 4 3

本記事は、デジタル庁が作成した「ウェブアクセシビリティ導入ガイドブック」の内容コピーライトポリシーに準じて転載をしています。

「ウェブアクセシビリティとは何か？」からはじめて学ぶ人にとって、非常に有益な情報となっています。手元に置きたい場合は、ぜひデジタル庁のサイトで、「ウェブアクセシビリティ導入ガイドブック」を、ダウンロードして振り返りながら活用してください（Web担編集部）。

ウェブアクセシビリティ導入ガイドブックとは

ウェブサイトで発信される情報、情報システムで提供されるサービスは、インターネットとブラウザがあれば時間と場所を問わず利用することができ便利です。また、利用者が、見やすい・使いやすい方法を選んで使うことができる、柔軟性の高いメディアでもあります。

インターネットを使った情報発信ができるようになったことで、情報へのアクセスのしやすさ、つまりアクセシビリティは格段に高まりました。その上で、コンテンツの作り方や実装方法を工夫すると、さらに多くの人が多様な状況でウェブサイトや情報を使えるようになります。発信者側が想像していなかった手段や場所で使われるかもしれません。

本ガイドブックでは、ウェブサイトや情報システムにおけるアクセシビリティ、つまりウェブアクセシビリティについて全く知らない、触れたことがない方々が、業務としてウェブアクセシビリティの改善に取り組むにあたり必要な知識を、ゼロから解説しています。

行政官、デザイナー、エンジニア等の様々な背景を持つ人が利用されることを期待し、専門用語を極力使わず、重要な概念にはイラストをつけるよう心がけました。デジタル庁の業務内で得られた知見やノウハウを元に、行政機関の方にとってサポートとなる内容を記載しているのも特徴のひとつです。

本ガイドブックが、優しいサービスのつくり手になる一助となればと思います。

5
こんな時は

5.1　よくある質問

Q　スクリーンリーダーの読み間違いに対応する必要はありますか。

A　特別な対応をする必要はありません。スクリーンリーダーは、一文字ずつ文字を確認する機能がありますし、読み間違いには一定のパターンがあるので前後の文脈から推測が可能です。ただし政務三役の名前のように、人名等を正確に伝えたい場合は、人名にそのままカッコ書きを続ける形式で、よみがなを補足することができます。

Q　JIS X 8341-3:2016の適合レベル AAA に準拠する必要はありますか。

A　WCAG 2.0 解説書の中でも解説されている通り、コンテンツの中には適合レベル AAAの達成基準をすべて満たすことができないものもあるため、AAA準拠を目指すことは推奨されていません。また、適合度レベル AAAの達成基準すべてを満たしたとしても AAや Aの達成基準を満たせていない場合は、「AA一部準拠」や「A一部準拠」となります。

そのため、まずは適合レベル AAに準拠することを目標にして、可能であれば AAAの達成基準を数個追加して試験することを推奨します。

Q　JIS X 8341-3:2016の規格票は必要でしょうか。

A　お手元に用意することを強く推奨します。

JIS X 8341-3:2016はWCAG 2.0と一致基準なので、達成基準に書いている内容は同一です。しかし、用語集や参考文献が書かれている附属書は規格票にしか付属していません。特に「附属書 JA（参考）ウェブアクセシビリティの確保・維持・向上のプロセスに関する推奨事項」「附属書 JB（参考）試験方法」は JISを使った試験には必須の書類です。

Q　シングルページアプリケーション（SPA）の開発で気をつけることはありますか。

A　「シングルページアプリケーション（SPA）」は、ページ内のコンテンツを動的に切り替えるような表現をするための実装方法です。SPAを使う場合は、以下の 2点に注意してください。

見出しや箇条書きなど HTMLに適切な要素がある場合は、その要素を用いてください。
HTMLだけではコンテンツの変化やUIの状態変化を伝えられない場合には、HTMLに加えて「WAI-ARIA」という技術仕様で実装し、ページ移動を伴わない動的なページ内コンテンツの変化を、スクリーンリーダーが認識して利用者に伝達できるように補完してください。

WAI-ARIAはW3Cで策定している技術仕様で、MDN Web Docsに詳細な解説が書かれています。

WAI-ARIAの基本 - ウェブ開発を学ぶ｜MDN

Q　見た目は問題ないのにコントラスト比が低い色の組み合わせがあります。どうしたらよいでしょうか。

A　「オレンジ背景に白文字」や「青背景に白文字」は見た目の印象と異なって、コントラスト比が低く出る場合があります。この場合はコントラスト比の数字を優先して配色を調整することで、コントラスト比が基準値以上になるようにしてください。なお、「コントラスト比」を算出する計算アルゴリズムでは、一部の組み合わせでコントラスト比が低く算出されることが認識されていて、WCAGの次のバージョンであるWCAG3.0では計算アルゴリズムが変更される予定です。

Q　ボタンの UIでコントラスト比が低いことが指摘されましたが、サイトのブランドカラーなので変更できません。どうしたらよいでしょうか。

A　ブランドカラーに文字が重なる UIを使わないようにするか、ブランドカラーの配色方法を調整したり、コントラスト比の高い代替色を用意することでコントラスト比が基準値以上になるようにしてください。文字サイズやウィンドウ幅は、利用者側で調整しやすいですが、色の組み合わせは利用者が調整しにくい部分です。そのため、予め色の組み合わせでコントラスト比を保つようにしてください。

5.2　問い合わせ先

デジタル庁ウェブサイトのご意見・ご要望ページからお問合せください。

6
付録

6.1　改訂履歴

2022年 3月 11日デジタル庁内向けにガイドブックをアルファ版として公開しました。
2022年 12月 5日ガイドブックをベータ版として一般公開しました。
2022年 12月 12日ガイドブックを一部改訂しました。
2023年 1月 20日ガイドブックを一部改訂しました。
2023年 2月 25日ガイドブックを一部改訂しました。
2023年 3月 17日ガイドブックを一部改訂しました。

6.2　リンク集

ウェブアクセシビリティに関するツールや情報は、多くがインターネットで公開されています。

ガイドライン・規格

WCAG

JIS X 8341-3:2016

総務省 ICTアクセシビリティの推進

UX デザイン・HCD

スクリーンリーダー

Windows

Mac

VoiceOver

iOS（iPhone）

VoiceOver（注意：MacとiOSの VoiceOverは名前は一緒ですが機能が異なります）

Android

TalkBack

チェックツール

axe-core（axe-coreは、Deque Systemsが開発したアクセシビリティチェックのエンジンです。様々な製品に使われています。）
Lighthouse
axe-dev
PowerCMS X
WAVE
WAIV
miChecker

ブラウザの機能拡張

コントラストチェッカー

Contrast（Mac）
Colour Contrast Analyser（Windows/Mac）

色覚シミュレーション

Sim Daltonism（Mac）

オーサリングツール

6.3　参考文献

情報通信アクセス協議会ウェブアクセシビリティ基盤委員会（WAIC）「JIS X 8341-3:2016 試験実施ガイドライン」https://waic.jp/docs/jis2016/test-guidelines/202012/
Accessibility:https://www.w3.org/standards/webdesign/accessibility
厚労省「平成 28 年度生活のしづらさ調査」結果概要より

出典：デジタル庁
PDF：「ウェブアクセシビリティ導入ガイドブック」のダウンロードはこちら