無料のADAコンプライアンスWebサイトチェックリスト

公開: 2022-05-04

ADA準拠のWebサイトが必要な理由

物理的な場所でADAに準拠する必要があり、「プログラム、商品、またはサービスに関する通信にインターネットを使用する」企業または公的機関は、アクセス可能な手段を介してそれらの通信を提供できるように準備する必要があります。司法省からの公開書簡によると。

15人以上のフルタイムの従業員がいて、1年のうち20週間以上営業している企業は、一般の人々が簡単にアクセスできるようにすることで、障害を持つアメリカ人法のタイトルIIIに従う必要があります。活動家は最近、非準拠のWebサイトの検索と訴えを開始しました。 2018年だけで2250件の訴訟が提起されました。

あなたのウェブサイトが非準拠であることが判明した場合、あなたは罰金と訴訟費用で数千ドルを失うでしょう。あなたのビジネスが障害者を差別するために訴えられたとニュースメディアが報道するとき、あなたはまた、広報の悪夢に苦しむでしょう。

「アクセシビリティ」は、DOJレターが発行された1996年に大まかに定義されましたが、 Webコンテンツアクセシビリティガイドライン 現在、連邦政府が独自のWebプレゼンスのために、および裁判所がADATitleIII違反を評価するために使用している標準です。

あなたの現在のウェブサイトはおそらく非準拠です

経営幹部は、新しいWebサイトを購入するときに、ADAコンプライアンスが懸念事項であることに気付くことはめったにありません。洗練された魅力的なウェブサイトを作成できる人なら誰でもADA準拠のウェブサイトを作成できると信頼している人もいます。残念ながら、Webデザイナーは、ADAコンプライアンスのベストプラクティスを知らないか、エキサイティングな新しいデザイン機能を実装するためにそれらを無視することがよくあります。

多くのブランドの広告チームも要件を認識していません。他の人はそれらを提案としてとらえ、色のコントラストやフォントサイズなどの主要な問題を無視します。これは、準拠するためにブランド変更や進行中のキャンペーンの変更が必要になるためです。

An example of a design element with poor contrast and no text that a screen reader can parse. — これは、非準拠の設計要素の例です。タイトルと画像のコントラストが低すぎて、テキストが画像の一部になっています。

Webサイトのコンプライアンスが不明な場合は、チェックリストに照らしてテストしてください。あなたの時間の1時間はあなたの会社に数万ドルと公の屈辱を節約することができます。

ADA準拠についてWebサイトをテストする

Sagapixel Web Designは、WebサイトのADA準拠をテストするためのチェックリストを作成しました。これにより、当社のWebデザインおよびコンテンツ作成チームは、最大数の訪問者および潜在的なクライアントが自分の作業にアクセスできるようになります。

チェックリストの使用方法

ADA準拠のテストには、Webサイトのさまざまな領域をテストするための複数のツールが必要です。最も重要なコンプライアンス要因をテストできるWAVEのようなさまざまな無料ツールがありますが、クローズドキャプションやツールがキャッチできない外れ値のケースなど、リフローの問題や代替テキスト付きの写真などには、人間によるレビューが必要です。フレームの内容については説明していません。

チェックリストを下に移動して、各項目をテストします。 Tier AAに合格したら、おめでとうございます！あなたのビジネスは、ほとんどの障害者が利用できます。いずれかのアイテムを失敗した場合、訴訟のリスクがあります。いくつかの基準を満たしていない場合、新しいWebサイトを購入する方が、現在の問題をトラブルシューティングするために開発者を雇うよりも安くなる可能性があります。

以下のオンラインチェックリストを表示するか、チェックリストのPDFをダウンロードして、オフラインで印刷または表示します。

印刷可能なチェックリストをダウンロードするには、ここをクリックしてください

チェックリスト

A層コンプライアンス

すべての非テキストコンテンツには、同じ目的を果たす代替テキストがあります。
オーディオのみおよびビデオのみのプレゼンテーションを含む、時間ベースのメディアには、簡単にアクセスできる代替手段があります。
事前に記録されたすべての同期メディアには、閉じたキャプションがあります。
コンテンツの読み取り順序は、プログラムで決定できます。コンテンツは論理的な順序で表示され、キーボードによるナビゲートはこの順序に従います。
指示は、Webサイトのコンテンツの操作方法を説明するために、色、音、視覚的な向きなどの感覚特性だけに依存するものではありません。
プロンプト、リンク、またはその他の視覚的要素の存在を伝える唯一の手段として色が使用されることはありません。
オーディオが3秒以上自動的に再生されるようにプログラムされている場合は、システムの音量に関係なく、オーディオを一時停止したり、音量を下げたりするメカニズムを利用できます。
ユーザーは、キーボードだけでWebサイトのすべての機能にアクセスできます。
ユーザーの動きのタイミングがフィールドの機能に不可欠でない限り、入力フィールドは特定のキーストロークのタイミングを必要としない場合があります。
コンポーネントにキーボードでアクセスできる場合は、キーボードを使用してそのコンポーネントを離れることも可能である必要があります。
ページ上のコンポーネントからの終了コマンドが必要な場合は、EscapeやTabなどの単一の印刷不可能なキーである必要があります。
1文字のショートカットには、次の機能の少なくとも1つが必要です。
- ショートカットを無効にする方法は常に存在する必要があります。
- ショートカットを印刷できない文字に再マップするメカニズムがあります。
- ショートカットは特定のコンポーネントでのみ機能し、そのコンポーネントにフォーカスがある場合にのみアクティブになります。
ユーザーは、コンテンツの制限時間を延長またはオフにできる必要があります。ただし、その制限がオークションなどの実際の機能の重要な部分である場合を除きます。
ユーザーは、点滅またはスクロール機能を非表示にできる必要があります。唯一の例外は、本物の緊急警報です。
1秒間に3回を超えて点滅する機能はありません。
重複したコンテンツブロックをバイパスするメカニズムが存在する必要があります。
すべてのページタイトルは、ページのトピックと目的を説明する必要があります。
ページを順番にナビゲートする場合、キーボードからアクセスするときに、コンポーネントは適切な順序でフォーカスを受け取る必要があります。
マルチ入力ジェスチャには、単一の入力選択肢があります。
クリックによって機能がアクティブ化される場合、次のアクセシビリティ機能のいずれかを利用する必要があります。
- ダウンクリックだけでは機能は有効になりません。
- クリックを元に戻すか中止するオプションがあります。
- ポインタボタンを離すと、クリックが中止されます。
- 唯一の例外は、関数がキーボードまたはキーパッドをエミュレートするように設計されている場合です。
ボタンにテキストまたは画像が含まれている場合、ボタンの名前にはその名前が含まれているか、ボタンの視覚的なコンテンツを説明しています。
モーション起動機能には、ユーザーインターフェイスを介して起動する方法も必要です。唯一の例外は、モーションがアクティビティの重要な部分であり、GUIが機能を複製できなかった場合です。
Webページのデフォルト言語は、プログラムで決定できます。
ボタンやその他のインタラクティブコンポーネントは、ユーザーからフォーカスを受け取ったときに目的を変更することはできません。
ユーザー設定を変更しても、ボタンやインタラクティブ要素のコンテキストは変更されません。
入力エラーには、明確な名前とテキストの説明が必要です。
入力フィールドには、明確なラベルと指示が必要です。
すべてのユーザーインターフェイスコンポーネントの名前、役割、および状態は、プログラムで決定できます。
マークアップ言語で実装されたコンテンツまたは機能には、正確なタグがあり、一意のIDを使用します。

AA層コンプライアンス

ライブ同期メディアコンテンツは、クローズドキャプションで表示されます。
事前に録音されたメディアには、音声ガイド付きのクローズドキャプションが必要です。
ページの向き（横向きまたは縦向き）は、向きがコンテンツの重要な機能でない限り、表示または操作を制限しません。
ユーザー情報を収集する入力の目的は明確にラベル付けされており、プログラムで決定できます。
通常のテキストのコントラストは4.5：1である必要があります。
フォントサイズが18pt以上のテキストのコントラスト比は、3：1と低くなる場合があります。純粋に装飾的なテキストと企業ロゴは、これらの基準から免除されます。
最大200％のサイズに変更した場合、テキストはすべてのコンテンツと機能を保持する必要があります。
テキストの画像は、実際のテキストで十分な場所では使用しないでください。アートやアンティークドキュメントのプレゼンテーションなど、画像に実用的な代替手段がない場合は、画像の説明を利用できるようにする必要があります。
コンテンツは、400％まで拡大すると、320 CSSピクセル（垂直方向にスクロール）または256 CSSピクセル（水平方向にスクロール）の幅にリフローする必要があります
ユーザーインターフェイスコンポーネントと装飾的でない色分解は、少なくとも3：1のコントラストが必要です。
最小テキスト間隔：
- 行の高さはフォントの1.5倍のサイズです。
- 段落の間隔はフォントの2倍のサイズです
- 文字の間隔はフォントのサイズの0.12倍です
- ワード間隔はフォントのサイズの0.16倍です。
- 特定の言語またはスクリプトがこれらの間隔オプションのいずれかをサポートしていない場合、アクセシビリティの目的でそのオプションは免除されます。
コンテンツがホバーまたはキーボードフォーカスに表示される場合：
- フォーカスを変更せずにコンテンツを却下する方法があるはずです。
- ポインタまたはフォーカスがコンテンツに留まっている限り、コンテンツが消えることはありません。
- ユーザーがトリガーするか（フォーカスを変更するかコンテンツを閉じることによって）、または情報が無効にならない限り、コンテンツは消えてはなりません。
そのページがプロセスの1つのステップでない限り、他のWebページのセット内のWebページにアクセスする方法は複数あります。
すべての見出しとラベルは、その下にあるコンテンツのトピックまたは目的を説明しています。
キーボードフォーカスインジケーターは、該当する場合は常に表示されている必要があります。
テキストパッセージの言語はプログラムでマークされています。
- 例外は、名前、専門用語、および合理的な言葉で作成できます。
ナビゲーション要素は、Web関連のページ間で同じデザイン、場所、目的を共有する必要があります。
入力エラーは自動的に検出され、それらを解決する方法が提案されます。
Webページが法的義務を引き起こしたり、金融取引を行ったり、テスト応答を送信したりする場合は、次の機能の少なくとも1つを含める必要があります。
- 提出は元に戻すことができます。
- ウェブサイトは脱落やデータエラーをチェックし、ユーザーにそれらを修正するオプションを提供します。
- ユーザーには、入力した情報を確認、修正、確認する機会が与えられます。
Webサイトは、ユーザーがエラーメッセージに焦点を合わせていない場合でも、支援技術にエラーメッセージとステータスメッセージを表示します。

AAA層コンプライアンス

手話通訳は、事前に録音された同期メディアに提供されます。
事前に録音されたメディアには、音声ガイドが拡張されたクローズドキャプションがあります。
ビデオのみのメディアには、時間制限のない代替手段が提供されます。
音声のみのメディアには、時間制限のない代替手段が提供されます。
マークアップ言語を介して実装されたコンテンツとユーザーインターフェイスコンポーネントの目的は、プログラムで決定できます。
通常のテキストのコントラストは少なくとも7：1です。太字のテキストは少なくとも4.5：1です。
事前に録音された音声が主に音声である場合、バックグラウンドノイズがないか、バックグラウンドノイズと音声の差が少なくとも20dbである必要があります。音楽コンテンツは免除されます。
ユーザーは、次のようにテキストのブロックの形式を変更できる必要があります。
- 前景色と背景色はユーザーが選択できます。
- 段落の幅は80文字以下、または中国語/日本語/韓国語のグリフ40文字です。
- 行間隔は少なくとも1.5で、段落間隔は少なくとも3です。
- 最大200％のサイズに変更した場合、テキストはユーザーが水平方向にスクロールする必要はありません。
- テキストの画像は、純粋に装飾として使用されます。ロゴは免除されます。
Webサイトのすべての機能には、キーボードインターフェイスのみでアクセスできます。
Webサイトの機能は、実際のイベントに関連付けられていない限り、時間に敏感であってはなりません。
緊急でない中断は、ユーザーが一時停止または解除できます。
セッションの有効期限が切れると、ユーザーは再認証して入力情報を再開できるようになります。
非アクティブな期間の後にデータが失われる場合は、ユーザーに明確に通知する必要があります。また、ユーザーデータを保存し、後日続行するためのオプションを提供する必要があります。
アニメーション化されたモーションは、情報を伝達するために不可欠ではありません。
アニメーションを無効にすることができます。
Webページが接続されたセットである場合、ユーザーの場所を視覚的およびプログラム的に明確に示す必要があります。
リンクのテキストは、リンクの目的を特定する必要があります。
テキストはHTMLの見出しタグで構成されています。
ポインタのボタンおよびその他のターゲットは、少なくとも44pxx44pxである必要があります。
代替入力モダリティは、有効なセキュリティ目的で制限が必要な場合にのみ、プログラミングによってブロックできます。
外国語、イディオム、専門用語は、テキストマークアップまたは適切な辞書へのリンクで定義されます。
略語は定義されているか、完全な用語を示すために拡張できます。
9年生の読解レベルを超えて書かれた場合、コンテンツの簡略化されたバージョンが利用可能である必要があります。
単語の発音があいまいな場合は、発音の鍵を含める必要があります。
ユーザーが変更を開始しない限り、ナビゲーション要素はコンテキストを変更しないでください。
状況依存のヘルプまたはツールチップはいつでも利用できます。
Webページでユーザーが個人情報を送信する必要がある場合、次の機能の少なくとも1つが含まれます。
- 提出は元に戻すことができます。
- ウェブサイトは脱落やデータエラーをチェックし、ユーザーにそれらを修正するオプションを提供します。
- ユーザーには、入力した情報を確認、修正、確認する機会が与えられます。

準拠したWebデザインに関するFAQ

ADAの公式ウェブサイトガイドラインは何ですか？

2008年の改訂にもかかわらず、ADAはWebサイトやインターネットのアクセシビリティについて具体的に言及していません。オンラインアクセシビリティに関して毎年何千もの訴訟が提起されており、裁判所は、インターネット標準の国際的に認められた組織であるWorld Wide Web Consortium（W3C）によって公開されたガイドラインを準拠設計のモデルとして使用しています。コンソーシアムのWebコンテンツアクセシビリティガイドライン（WCAG）これらの規格は2012年にISO規格として採用され、ヨーロッパとアジア全体のWebアクセシビリティ法の基礎となっています。現在、米国はすべての政府のWebサイトにWCAG AA-Tierコンプライアンスを義務付けており、連邦判事はWebサイトのアクセシビリティとTitleIIIADA違反について裁定する際にこれらの基準を参照しています。

コンプライアンスガイドラインはどのくらいの頻度で変更されますか？

ガイドラインは1999年に最初に公開され、2008年と2018年に大幅に改訂されました。WCAG2.1は、2018年6月に公開された最新のアップデートです。これには、主にスマートフォンやその他の小型タッチスクリーンデバイスのアクセシビリティを目的とした17の新しい基準が含まれています。

2.0ガイドラインを満たしていても、アクセス可能なデスクトップサイトになります。ただし、2.0規格は11年前に公開されたものであり、スマートフォンの革命を予測するものではありませんでした。その結果、準拠したモバイルWebサイトを作成するためのガイドラインはなく、タッチおよびジェスチャベースの操作入力に関するガイダンスはほとんどありません。 2018年より前にWebサイトがADAに準拠するように構築されている場合、特にスマートフォンでアクセスした場合、準拠の最低基準を満たさなくなる可能性があります。

A、AA、およびAAAコンプライアンス層の違いは何ですか？

Tier Aは、障害を持つ人がWebサイトを使用するために絶対に存在しなければならない要素と機能です。 A層機能がない場合、Webサイトにアクセスできません。

Tier AAには、アクセシビリティのために強く推奨される要素が含まれています。 AA機能が不足している場合、視覚障害または身体障害を持つ人々がWebサイトをナビゲートすることは非常に困難になります。 ADA準拠の場合、これは最低限許容できるアクセシビリティの層です。

Tier AAAには、最先端のアクセシビリティ機能が含まれています。これらの機能のすべてがすべてのWebサイトまたはデジタルプラットフォームで使用できるわけではありません。できるだけ多くのAAA機能または部分的なAAA機能を含めることをお勧めしますが、ほとんどのWebサイトまたは業種では完全なAAA準拠は合理的な目標ではありません。

A screen capture of a web page that is not accessible to screen reading devices. — これは、非準拠の入力フィールドの例です。どの要素にもタイトルはありません。応答を完了するための指示はありません。スクリーンリーダーはそれを処理できません。

ADA準拠のWebデザインの原則

知覚可能

適応性：スクリーンリーダーで拡大または処理する場合など、別の形式で表示する場合、コンテンツの構造や機能が失われることはありません。
区別可能：テキストと背景色のコントラスト、明確にマークされたハイパーリンクとボタンなど、視覚的コンテンツと音声コンテンツは明確で明確である必要があります。
時間ベースのメディアの代替案：サウンドクリップの完全なトランスクリプトやグラフィックスやチャートの説明文など、オーディオおよびビデオコンテンツの代替案に簡単にアクセスできる必要があります。

操作可能

キーボードアクセス可能：Webサイトのすべての機能は、キーボードだけで使用できる必要があります。ジェスチャーとマウスの使用法が唯一の入力方法であってはなりません。
ナビゲート可能：ユーザーがWebサイトのどこにいるか、および接続されているさまざまなページにアクセスする方法を明確に示す必要があります。すべてのボタン、リンク、および入力フィールドは、明確にラベル付けされ、簡単に区別できる必要があります。
アクセス可能なジェスチャと入力：機能は、パスベースまたはマルチポイントのジェスチャまたはポインタアクティビティに依存してはならず、入力には中止または元に戻すオプションが必要です。

理解できる

読み取り可能：すべてのテキストコンテンツは、補助装置で解析できる必要があります。
予測可能：Webページは一貫性のある論理的な方法で動作する必要があります。ナビゲーションボタンは、使用の前後で同じコンテキストを保持する必要があり、コンテキストの変更はユーザーに明確である必要があります。
入力支援：Webページは、ユーザーが起こりうる間違いを回避して修正するのに役立つはずです。エラーメッセージには、明確な説明、解決のための提案、およびラベルを付ける必要があります。

壮健

下位互換性：Webサイトは、前世代の支援技術とのインターフェースが可能であると同時に、現在のすべての基準を満たす必要があります。
支援技術向けに設計：Webサイトのすべての要素には、スクリーンリーダーやその他の支援デバイスによってプログラムで決定できる名前、役割、および値が必要です。
マークアップとステータスメッセージ：テキストマークアップと重要なステータスメッセージは、メッセージに現在フォーカスがない場合でも、スクリーンリーダーでアクセスできるようにプログラムする必要があります。

中小企業はADAに準拠する必要がありますか？

中小企業、ほとんどの季節限定企業、および宗教団体は、ほとんどのタイトルIII要件を法的に免除されています。家族経営のサンドイッチ店は、車椅子のスロープを設置することを法的に義務付けられていません。地元のホビーショップは、ウェブサイトの商品写真に代替テキストを入れるのを忘れたとして訴えることはできません。それでも、オンラインでプレゼンスを持っている最小の企業でさえ、ADAコンプライアンスについて考えることは理にかなっています。

非準拠であるということは、読みにくいテキストや難しいナビゲーション以上のものを意味します。画像の代替テキストや入力フィールドに入力する手順などの重要な要素が欠落している場合、顧客は購入を完了できない可能性があります。一部の古いデザイン機能では、画面読み上げ技術を使用しているユーザーが電話番号や住所を確認できない場合があります。オンラインで簡単にアクセスできることは、ほとんどすべての小さな店にとってビジネス上理にかなっています。