ウェブアクセシビリティチェックリスト｜診断項目と便利なツール3選｜東京のWEB制作会社・ホームページ制作会社｜株式会社GIG

BLOG

ブログ

ウェブアクセシビリティチェックリスト｜診断項目と便利なツール3選

2023-09-01 制作・開発

ウェブアクセシビリティチェックリストは、WCAGの診断項目をベースにカスタマイズが可能です。そのため、独自に作成している企業もあります。

ただし、達成基準や手順が複雑なため、自社でチェックリストを作成するのはむずかしいでしょう。

この記事では、ウェブアクセシビリティチェックリストと診断項目を解説します。社内でチェックする際に便利な診断ツールも紹介しますので参考になさってください。

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

ウェブアクセシビリティは、Webにおけるアクセシビリティを指します。「Access（アクセス）」から派生してできた言葉で、身体の障害や年齢、性別、利用環境を問わず、すべての人がWebサイトへアクセスし、サービスを利用できることを指しています。

インターネットが普及し、生活に関わるほとんどの情報がインターネットで入手できるようになりました。しかし、Webサイトによっては一部の人が利用しづらい状況があり、災害時に必要な情報が届けられないおそれが出てきます。

そこで求められているのが、ウェブアクセシビリティの向上です。日本ではまだウェブアクセシビリティ対応は公的機関の責務とされています。

しかし、障害者差別法改正により2024年4月より、民間事業者は努力義務とされていた「合理的配慮の提供」が義務化されました。

個人事業主も含むすべての民間事業者は、ウェブアクセシビリティへの対応を意識することが大切です。

関連記事：ウェブアクセシビリティとは？2024年4月の義務化について徹底解説

ウェブアクセシビリティ診断で改善するのか

現在、運用しているWebサイトがウェブアクセシビリティに対応しているか調べるには、診断サービスへ依頼する方法があります。

アクセシビリティ上の問題点が明らかになるため、指摘を受けた個所を修正すればよいわけです。ただし、診断を受けてから修正するといったやり方は、効率的ではありません。

ウェブアクセシビリティを理解していれば、達成基準を満たしたWebサイトを制作できます。達成基準を理解していれば、独自のウェブアクセシビリティを診断するチェックリストを作成することも可能です。

ウェブアクセシビリティチェックリスト3選

アクセシビリティ診断には、国内規格JIS X 8341-3:2016ガイドラインをベースに作られたチェックリストが便利です。
ここではウェブアクセシビリティ診断に便利なチェックリストを3つご紹介します。独自で作成する場合にも役立ててみてください。

1. ウェブアクセシビリティ基盤委員会

『ウェブアクセシビリティ基盤委員会』は、W3Cをベースに作成した達成基準チェックリストのテンプレートを公開しています。JIS X 8341-3:2016に準拠しているため、適合レベル（A、AA、AAA）と試験環境にあわせたカスタマイズが可能です。

ウェブアクセシビリティの試験結果の公開する場合、試験を実施しない診断項目は削除せずに「除外」と記載して大丈夫です。必要な項目だけ評価できるため、柔軟に運用できます。

ウェブアクセシビリティチェックの具体的な実施方法や、達成基準を実現するためのガイドラインなども提供されています。

ウェブアクセシビリティ基盤委員会「JIS X 8341-3:2016 試験実施ガイドライン」

2. SmartHR Design System

『SmartHR Design System』では「アクセシビリティチェックはじめてガイド」で独自のチェックリストと簡易チェックシートを提供しています。

ガイドを見ながら進められるため、初めての方でもスムーズにアクセシビリティ対応をチェックできます。

チェックシートは、デザイナーやシステム開発者が利用しやすい構成になっており、必要な基準を達成しているかを確認できます。

コピー・編集ができるため、プロジェクトやWebサイトの仕様にあわせた調整が可能です。

NG例や改善に向けた指標など、ウェブアクセシビリティ対応のアドバイスが多く含まれています。チェックしながらウェブアクセシビリティへの理解を深めることが可能です。

SmartHR Design System「ウェブアクセシビリティ簡易チェックリスト」

3. freee アクセシビリティー・チェック・リスト

『freee アクセシビリティー・ガイドライン』は、freee社内で新規・既存プロダクトの改善に用いるために作られたガイドラインです。アクセシビリティを高めるための具体的な基準と達成方法が掲載されています。

チェックリストはGoogleスプレッドシートで提供しており、どなたでも利用が可能です。ガイドラインを見ながらアクセシビリティ改善に取り組むことができます。

freee アクセシビリティー・ガイドライン

ウェブアクセシビリティチェックリストの診断項目

「JIS X 8341-3:2016 試験実施ガイドライン」をもとにウェブアクセシビリティのチェックリストを作成しました。デジタル庁の「ウェブアクセシビリティ導入ガイドブック」より、最低限達成すべき項目を含めました。

代替テキストとメディア

代替テキストは視覚障害がある人に、どのような画像が表示されているのか過不足なく伝えるために使用します。代替テキストでは、画像が伝える情報を正確に伝えることが大切です。

サムネイル画像など装飾的な意味をもつ画像には「alt」属性を使用して、スクリーンリーダーが無駄な情報を読みあげないようにします。

適切な代替テキストの設定により、検索エンジンにもどういう画像なのかを伝えられるため、SEO効果も期待できるでしょう。

達成基準	適合レベル
1.1.1；画像に代替テキストを提供する	A

動画・音声コンテンツ

動画や音声コンテンツを視覚・聴覚障害をもつ人にも理解してもらうために、キャプションや音声解説をつけて提供します。

まずは、収録済みのコンテンツにはキャプションを追加し、ライブ配信にはライブキャプションや音声解説を入れます。

音声は自動再生・強制再生は避けて、自動再生は3秒以内に収めてください。また、スライドショーなど自動で切り替わるコンテンツには一時停止、非表示、停止の機能を設置します。

達成基準	適合レベル
1.2.1: 音声だけ及び映像だけ（収録済み）を理解する	A
1.2.2：収録済みコンテンツに字幕や効果音を提供する	A
1.2.3：コンテンツの音声解説またはテキスト形式で提供する	A
1.2.4：ライブコンテンツにもキャプションを入れる	AA
1.2.5：場面の移り変わりなど視覚的な情報を音声解説で提供する	AA
2.2.2：自動でコンテンツを切り替えない	A
2.3.2：1秒間に3回を超える閃光を放つものを入れない	AAA

無料のスクリーンリーダー『NVDA』を使用することで、キャプションが適切に実装されているかを確認することが可能です。

マークアップ構造化

マークアップとHTMLの正確性もアクセシビリティに影響を与えるため、正しく構造化することが大切です。

適切なマークアップにより、スクリーンリーダーなどの支援機能が正しく情報を読み取り、利用者に提供してくれます。<h1>や<h4>といったHTMLタグを正しく使用して、コンテンツの構造を明確することが大切です。

正しく設置していない場合、コンテンツの意味が変わってしまうことがあります。HTMLタグを適切に使用して、文書の構造を修正し支援機能が支障なく使えるようにすることが大切です。

達成基準	適合レベル
1.3.1：情報及び関係性を理解する	A
1.3.2：意味のあるシーケンスを理解する	A
4.1.1：マークアップ言語を仕様に完全に適合させる	A
4.1.2：仕様に応じてHTMLを使用する	A

正しくマークアップできているかは、Googleの無料ツール『Lighthouse』を使用してチェックできます。

関連記事：アクセシビリティ対応がSEOへ与える影響を解説｜対策やチェックツール

コントラスト・サイズ

色のコントラストやテキストサイズは、コンテンツが視覚的な構成に頼らず、アクセスできなければなりません。視覚的・聴覚的な手がかりに頼らないようにすることが大切です。

例えば、入力が必須である項目として「住所」がある場合、赤字で「住所」と示してはいけません。色以外の手がかりを提示することで必須項目と判別しやすくなります。

また、テキストサイズも変更できるようにしておきます。これは、スクリーンリーダーを使用しない軽度の視覚障害の方がサイズを変更して閲覧することを想定しているためです。

達成基準	適合レベル
1.3.1：視覚的な情報をテキストでも得られるようになる	A
1.3.3：色以外の手がかりでも区別できるようにする	A
1.4.3：テキストや文字画像に少なくとも4.5：1のコントラスト比がある	AA
1.4.4：テキストのサイズを変更しても情報が理解できる	AA
1.4.5：テキストの見え方をCSSでコントロールする	AA
1.4.6：テキストと背景に7：1のコントラスト比を確保する	AAA
1.4.7：背景音が発話音より20デシベル低くなるように編集する	AAA
1.4.8：テキストを左寄せ、右寄せにする	AAA
1.4.9：フォントサイズにパーセント、em単位を使用する	AAA

適切なコントラスト比は「4.5：1以上」が推奨されています。『ColorTester』を使用すると、コントラスト比の計測が可能です。

操作性

キーボード操作のサポートやフォーカス順序の適切な設定は、すべてのユーザーが快適にWebサイトを利用するための重要です。

Webサイトをキーボードだけで快適に操作できるようにするための項目です。アプリやWebページからの離脱をキーボードで操作できる機能を実装することで、操作性が改善します。

また、フォーカスを可視化することで、キーボードを明確に操作することが可能です。視覚障害があるとポインターが見えないため、どこにフォーカスしているのかがわかりません。

キーボードフォーカスを可視化して、現在位置を把握し、Webサイト内の動線をサポートします。

達成基準	適合レベル
2.1.1：キーボードのみで操作できる	A
2.1.2：袋小路に陥らせない	A
2.2.1：利用者が制限時間を延長・解除できるようにする	A
2.3.1：1秒に3回点滅するコンテンツを作成しない	A
2.4.7：キーボードのフォーカスインジケータを可視化する	AA
2.1.3：キーボードのインタフェースを通じて操作ができる	AAA
2.2.3：利用者が制限時間なしで操作を完了できる	AAA
2.2.4：利用者がコンテンツの更新を要求できるような機能をくわえる	AAA
2.2.5：利用者が再認証後に利用できるようにデータを保存する	AAA

ナビゲーションの最適化

Webサイト内のナビゲーションがどれだけわかりやすく、使いやすいかがポイントです。一貫性やリンクなど目的を明確にします。

Webページのタイトルをつけることで、コンテンツの発見と現在位置の確認がしやすくなります。検索エンジンもコンテンツを理解しやすくなるため、SEOにも効果的です。

見出しやラベルなどを明確にして、ナビゲーションの一貫性を保ちましょう。これにより、利用者は目的の情報にアクセスできるようになります。

達成基準	適合レベル
2.4.1：目的のコンテンツへ素早く容易に到達できる	A
2.4.2：主題または目的を説明したタイトルがある	A
3.1.1：Webページの自然言語をプログラムが解釈できる	A
2.4.4：リンクの目的がテキストから判断できる	A
3.2.3：ナビゲーションに一貫性を持たせる	AA
3.2.4：Webページで繰り返される要素に一貫性をもたせる	AA
2.4.8：パンくずリストを提供する	AAA
2.4.9：リンクの目的を説明したテキストを提供する	AAA
2.4.10：見出しを用いてWebページを構造化する	AAA

読みやすさ

読みやすさを確保することは、すべての利用者にとって重要です。ページの言語設定や専門用語の説明、略語の表記など、誰もが読みやすい文章の提供が求められます。

視覚障害や学習障害をもつユーザーの理解を助けるため、適切なマークアップを使用しましょう。

これによりアクセシビリティが向上し、ユーザーにとって理解しやすいWebサイトを提供することが可能です。

達成基準	適合レベル
3.1.1：ページの言語が正しく表示されている	A
3.1.2：言語を変更してもスクリーンリーダーでスムーズに読み上げられる	AA
3.1.3：専門用語や略語に適切な説明がある	AAA
3.1.4：略語の意味が明確に説明されている	AAA
3.1.5：専門用語や複雑な言葉は避けて平易な言葉で説明されている	AAA
3.1.6：発音が難しい単語は適切な発音ガイドが提供されている	AAA

関連記事：UXライティングでユーザー体験を高めるための3つのポイント

フォームの設計

フォームのラベルやエラーメッセージがわかりやすく設計されていることで、アクセシビリティを確保・向上させることができます。

各項目に適切なラベルをつけて、何を入力すればよいのか理解を促します。もしラベルで伝えにくいときは、テキストによる説明を加えましょう。

フォームを送信するときに、内容の確認や修正ができるようにすることも大切です。金融関係や法的な内容などを送信する場合に、セキュリティリスクを高めることができます。

達成基準	適合レベル
3.2.1：フォーカス時にコンテキストを自動で変化させない	A
3.2.2：アクションを実行するためにボタンを提供する	A
3.3.1：未入力箇所の特定を促すためにテキスト説明を提供する	A
3.3.2：ラベルまたはテキストの説明を提供する	A
3.3.3：テキストの修正候補を提示する	AA
3.3.4：送信前に利用者が回答を確認または修正ができるようにする	AA
3.3.5：すべてのWebページにヘルプへのリンクを入れる	AAA
3.3.6：情報の送信ミスを防ぐことができる	AAA