Webアクセシビリティチェックリスト：遵守すべき２８点

Webサイトやアプリケーションを作成する際、デザイナーやエンジニアがWebアクセシビリティに関して遵守すべきガイドラインは数多くあります。しかし、これらをすべて把握したり、さまざまなレベルを使い分けたりするのは非常に大変になることでしょう。

そこで本記事では、公式のWebコンテンツアクセシビリティガイドラインを、デザイナー向けにWebアクセシビリティチェックリストを用いてわかりやすく説明していきます。また、WCAG（Web Content Accessibility Guidelines：Webコンテンツのアクセシビリティに関するガイドライン） 1.0と2.0の違いや、各レベル（A、AA、AAA）についても見ていきます。

UXPinが提供するアクセシビリティ機能によって、デザイナーは UXPinから離れることなく、UIのコントラストや色覚異特性のテストを行うことができます。無料トライアルにサインアップし、UXPinでWebサイトやアプリの使いやすさをぜひご体験ください。

アクセシビリティチェックリストの目的

Webアクセシビリティのチェックリストで、デザイナーやエンジニアは、障がいがある人や支援技術を要する人のためにWebサイトをデザインするうえでの考慮事項を確認することができます。

また、チームメンバーは、チェックリストをデザインやコードと照らし合わせて参照し、WCAGに適合していることを確認することができます。

Webアクセシビリティのチェックリスト：遵守すべき２８点 - アクセシビリティチェックリストの目的

WCAG2.0とWCAG1.0の違い

WCAGは、技術とともに更新され、進化していかなければならず、更新のたびに新しいデバイスに沿った最新のガイドラインが追加されます。

また、ガイドラインとは別に、WCAGシステムには２つのイテレーション（反復）があり、最初のイテレーションである WCAG 1.0 では、優先度 1、2、3のガイドラインとチェックポイントが用いられています。

WCAG 2.0 では、２００８年にチェックポイントからレベルの成功基準に変更されました。現在使用されているシステムでは、以下が含まれます：

４つのデザイン原則
各原則に複数のガイドライン
各ガイドラインのテスト可能な成功基準レベル（A、AA、AAA）

公式文書によると、WCAG 2.0は主に以下のように改善されました：

より多くの技術やデバイスに適用可能
将来の技術に合わせて進化するようにデザインされている
自動化されたテスト手法と人的評価により、要件のテストがしやすくなる。
国際社会からのインプットと連携
ガイドラインの遵守と実施をしやすくするのに、サポート資料と文書を改善した。

詳しくは こちらのWCAG 2.0の公式発表資料をご覧ください。

アクセシビリティ準拠の成功基準における３つのレベル

WCAG 2.0 では、製品の意図された目的とターゲットオーディエンスに基づいて各ガイドラインを評価するのに、以下の３つの成功基準レベル（または適合レベル）が導入されています。

レベル A – シングルエー
レベル AA – ダブルエー
レベル AAA – トリプルエー

レベル A

レベルA は、Webサイトが最低限のアクセシビリティ基準を満たしていることを保証するものであり、レスポンシブデザイン、（アイコンなど）文字以外の代替要素、キーボードナビゲーション、ビデオキャプションなど、Webサイトをよりアクセシブルにするための中核的な問題や要素に対応しています。

レベル AA

レベルAA では、誰もが Webサイトを利用できるよう、より広範なUI要素とベストプラクティスがおさえられており、世界中のほとんどの政府Webサイトは、国民の誰もが公共のコンテンツやサービスにアクセスできるよう、WCAGのレベルAAを要求しています。

このレベルでは、健常者と障がい者が同等のユーザー体験、機能性、効率でコンテンツを消化し、タスクを完了できるようになっています。

レベルAA の要件には以下のようなものがあります：

「4.5：1」などのカラーコントラスト比
画像とアイコンの Alt（代替）テキスト
全テクノロジーに対応したナビゲーション
正確なフォームフィールドラベル
適切な構造の見出しタグ
テキストサイズの変更
特定支援技術に関する要件

レベル AAA

レベル AAA は最も高い適合性レベルであり、 Webサイトのナビゲートや、コンテンツの消化をできるユーザーが最大数であることを保証するものです。ただし、レベルAAAはW3C（Web Accessibility Initiative）のサイトにあるように、以下に気をつける必要があります。

“It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.”

（日本語訳：コンテンツによってはレベルAAA成功基準を全て満たすことは不可能であるため、サイト全体の一般的な方針としてレベル AAA 準拠を要求することは推奨されない。）

Webサイトやコンテンツが特定の読者を対象としている場合、デザイナーはレベルAAAを使用する必要があります。レベルAAAのガイドラインは、スタイリングに大きな影響を与え（カラーコントラスト7：1）、音声や映像の手話通訳を必要とします。

デザイナー向け Webサイトのアクセシビリティのためのチェックリスト

次に、私たちはデザイナーにとって最も重要なWACGガイドラインを選びました。このガイドラインは視覚的要素に適用されますが、HTML要素に関連することも多いため、アクセシビリティについてはデザイナーとエンジニアの連携が必須となります。ちなみに、WCAG 2.0 の全リストは、W3Cの公式サイトでご覧いただけます。

コンテンツ

説明的なリンクラベルを使う（レベル A） – ボタンやリンクは、ユーザーにコンテクストが提供されないといけない。例えば、「ここをクリック」というボタンは意味がなく、誤解を招く可能性がある。Info & Relationships SC 1.3.1を参照。
中級以下の読解レベル（レベル AAA） – 専門用語、慣用句、俗語、比喩、皮肉、その他の複雑な用語を含まない「平文（プレーンテキスト）」であること。中学2年生相当のレベルが理想的。Reading Level SC 3.1.5を参照。
テキスト・フォーマット（レベル AAA） – テキストは両端揃えであってはならず、右揃えか左揃えであり（言語による）、支援技術なしで最大２００％までサイズ変更できること。また、ユーザーは「ダーク/ライトモード」切り替えのように前景色と背景色をコントロールできないといけない。Visual Presentation SC 1.4.8を参照。
特殊なスクリーンとデバイスでデザインをテストする（レベル A） – 視覚に障がいがあるユーザーは、高コントラストまたは反転カラーモードを使用する。その条件下でコンテンツがどのように機能するかをテストすることが重要。Color SC 1.4.1を参照。

ページタイトル、見出し、ラベル

以下のガイドラインは、レベルAA に適合しています。Headings and Labels SC 2.4.6 を参照。

１ページに H1（見出し１）タグは１つ – H1（見出し１）ヘッダタグは、Webページや記事全体の内容が記述されてないといけない。
論理的な順序で見出しを構成する – 入れ子になった見出しは、H1、H2、H3、H4、H5、H6という従来の順序に従わないといけない。例えば、H2 の次に H4、そして H3 というようなことは絶対しない。また、H2、H3、H4の順ではなく、H2 から H4 へというような、ヘッダーのタグを飛ばすべきではない。
見出しやラベルは、トピックや目的を説明するものでないといけない – 見出しやラベルで、ユーザーや、スクリーン・リーダーのような支援技術は、コンテンツを見つけたり消化しやすくなる。

画像

以下のガイドラインはレベルA に適合しています。Non-text Content SC 1.1.1 参照。

非テキストコンテンツには Alt（代替）テキストが必要：画像、アイコンなどには、説明的なAlt（代替）テキストが必要であり、画像にテキスト（文字）がある場合は、alt テキストが含まれていないといけない。
CAPTCHA：Webサイトは、CAPTCHA （完全に自動化された、コンピューターと人間を区別する公開チューリングテスト）を使用する場合、人間による認証やテキストベースの認証など、代替の確認方法が提供されないといけない。
装飾的な非テキスト・コンテンツ：支援技術がこのコンテンツを無視できるように、純粋に装飾的な画像やメディアの Alt テキストは、”null ” が使われないといけない。
グラフィック表示の代替テキスト：グラフ、チャート、その他のグラフィックには、支援技術がそれを読み取れるように、代替テキストが含まれないといけない。

コントロール

コントロール（制御）には、リンクやボタンなどのナビゲート可能なUI要素が全て含まれます。

新しいタブまたはウィンドウを開く警告（レベル A） – 例えば新しいタブやウィンドウが予告なしに開くと、認知能力に障がいのある人は混乱することがよくあることから、ユーザーは、ボタンまたはリンクがテキストまたはアイコンを使って新しいウィンドウまたはタブを開くかどうかを知る必要がある。On Focus SC 3.2.1 を参照。
フォーカス状態（レベル A） – コントロールはフォーカス（またはホバー）状態がないといけない。これにより、支援技術を要するユーザーを含むユーザーは、アクティブにするリンクやボタンをいつ選択したかを把握できる。Focus Visible SC 2.4.7 を参照。
リンクを識別できるようにする(レベル A) – デザイナーは、ユーザがすぐにリンクを識別できるように、色と下線の組合せを使わないといけない。Use of Color SC 1.4.1」を参照。
スキップリンク」を使う（レベル A） – スキップリンクを使うことで、支援技術やキーボードのユーザーは、ナビゲーショナルメニューやその他のブロックを迂回して、Web ページのコンテンツに直接行くことができる。Bypass Blocks SC 2.4.1 を参照。

フォーム

フォームラベル (レベル A) – デザイナーは、視覚的に参照できるように入力全てにラベルを付け、支援技術のために HTM Lの ‘label’ タグを使わないといけない。Input SC 3.2.2を参照。
エラーメッセージ（レベル A） – エラーメッセージを対応する入力フィールドの上に配置し、問題を解決するための明確な指示をユーザーに与える。Error Identification SC 3.3.1を参照。
メッセージの状態（レベル A） – 「エラー」、「警告」、「完了」のメッセージの状態を色だけに頼らない。例えば、アイコンやテキストを追加することで、視覚に障がいがある人がエラー状態の種類を識別しやすくなる。Use of Color SC 1.4.1を参照。

マルチメディア

自動再生をデフォルトで無効にする（レベル A） – 自動再生は、認知能力にハンデがあるユーザーや発作性障害のあるユーザーにとって問題となる可能性がある。Audio Control SC 1.4.2 を参照。
ビデオキャプション（レベル A） – ビデオにはキャプション（字幕）が必要で、キャプションがあることを確認する表示が必要。Caption (Prerecorded) SC 1.2.2 を参照。
発作を引き起こす要因を取り除く（レベル A） – ストロボや点滅するビデオは発作を誘発する可能性があることから、W3Cのドキュメントでは、Web ページやビデオの点滅は３回までと推奨されている。Three Flashes or Below Threshold SC 2.3.1 を参照。
音声のトランスクリプト（レベル A） – 音声記述にトランスクリプトを含めることで、聴覚にハンデのある人が音声コンテンツを理解できるようになる。Non-text Content SC 1.1.1 を参照。

カラーコントラスト

テキストのカラーコントラストをテストする（レベル AA） – コントラストチェッカーと色覚特性テスターを使って、視覚にハンデのある人が確実に本文とUI要素を読めるようにする。Contrast (Minimum) SC 1.4.3 を参照,。
非テキストのコントラスト（レベル AA） – アイコンやフォーム入力などの非テキスト要素は、視覚にハンデがある人が区別できるものでないといけない。Non-text Contrast 1.4.11 を参照。

モバイルおよびタッチ

モバイルでは水平スクロールを避ける（レベル AA） – 水平スクロールは、手や指にハンデのあるユーザーにとってやりにくい（または不可能）な場合がある。なお、W3Cでは「水平スクロールと垂直スクロールのガイドライン」が提供されている。 Reflow SC 1.4.10 を参照。
Webサイトの向き（レベル AA） – Webサイトは、モバイルやタブレット端末のどの向きでも表示できないといけない。Orientation 1.3.4 を参照。
適切なターゲットサイズの確保（レベル AA） – リンクが近すぎてアクティブにできなかったり、間違ったリンクに当たってしまわないようにする。Target Size SC 2.5.5 を参照。

Webアクセシビリティに関するその他のリソース

Webアクセシビリティは、最初は難しく感じるかもしれませんが、以下のようにUI（ユーザーインターフェース）を見つけたりテストするのに役立つリソースは多数あります。

コントラストチェッカーや色覚特性シミュレータなどの UXPinに内蔵されたアクセシビリティツールで、Webアクセシビリティテストを効率化しませんか。無料トライアルにサインアップして、コードベースのデザインでプロトタイプとテストがどのように強化され、ユーザーにインクルーシブなユーザー体験がもたらされるかをぜひご確認ください。

Try UXPin for free

Webアクセシビリティチェックリスト：遵守すべき２８点