基本的なアクセシビリティ監査を行う方法
公開: 2017-08-09そのため、最近はアクセシビリティについて多くのことを学んでいますが、今度は自分でサイトをチェックして、どこを改善する必要があるかを確認したいと思います。 どうやってそれをやるの？ アクセシビリティ監査の時間です！ このチュートリアルでは、よりアクセスしやすいサイトへの道を歩むための基本的なアクセシビリティ監査の要点を紹介します。
私の概要シリーズから思い出すように、アクセス可能なWebサイトは、知覚可能で、操作可能で、理解可能で、堅牢です。 サイトがアクセシビリティの4つの柱すべてに当てはまることを確認するためのテストにはコーディングが含まれないため、心配する必要はありません。 Chrome拡張機能を1つか2つインストールする場合がありますが、後で感謝します。 始めましょう！
注：このチュートリアルは、Chrome Inspector、または提供されているブラウザの基本的な開発者ツールの使用方法を理解していることを前提としています。
知覚可能
サイトがユーザーに認識されない場合、ユーザーはサイトが存在することを知らないため、知覚可能から始めます。 ここでは、代替テキスト、キャプション、色の3つに焦点を当てます。
装飾的ではない（つまり、単なる拡張ではなく、情報の重要な部分である）サイト上のすべての画像について、画像にはalt属性が必要です。 これは、画像のソースコードを調べて、属性を探すことで確認できます。 そこにあるなら、素晴らしい！ 次に、属性の値が有用であることを確認する必要があります。 alt属性は、視覚障害のあるユーザーに通知する方法で画像を説明する必要があります。 これはあなたのサイトにSEOキーワードを詰め込む機会ではありません。 説明を短く、要点を絞って、役立つものにしてください。 サイトコンテンツ自体については、より長い説明を保存する必要があります。
画像と一緒に行くのはビデオとオーディオのコンテンツです。 どちらの場合も、コンテンツのキャプションまたは文字起こしを提供する必要があります。 動画でクローズドキャプションを有効にするか、事前にキャプションを付ける必要があります。 これをテストするのは、サイトでビデオを開始してキャプションをチェックするのと同じくらい簡単です。
最後に、色をテストする必要があります。 これを行うには、グレースケールモードを有効にするChrome拡張機能をインストールします。 インストールしたら、サイトを再度ロードして、拡張機能をオンにします。 読みにくい領域に注意してください。 これらは、コントラストの観点から問題が発生する場所です。 そこから、グレースケールを無効にし、スヌークカラーコントラストチェッカーを使用してスコアを確認します。 16進値が手元にない場合は、インスペクターを使用して16進値を取得する必要があります。 4.5（または大きなテキストの場合は3.0）未満のものが問題であることを忘れないでください。
操作可能
次のステップは、サイトが操作可能であることを確認することです。 これは、キーボードの機能をテストすることを意味します。 これを行うには、サイトを開きます。 ページが読み込まれたら、Tabキーを押します。 何が起こるのですか？ うまくいけば、スキップリンクがポップアップします。 そうでない場合は、少なくともページの最初のリンクの周りにアウトラインを作成する必要があります。 理想的には、カスタムスタイルの:focus状態がありますが、最低限必要なのはブラウザーが提供するものです。 そこから、Tabキーを押し続けて、ページに表示される順序でリンクからリンクに移動していることを確認します。 フォーカスが飛び交う場合は、解決する必要のあるタブインデックスの問題があります。 ここでは、フォームプラグインが原因であることがよくあります。
理解できる
次に、サイトをチェックして、読み取り可能であることを確認します。 結局のところ、ユーザーがあなたのコンテンツを読むことができない場合、それを持っていることの意味は何ですか？ ここでの要件は非常に単純です。サイトの言語をコードで決定できますか？ 確認するには、インスペクターを開いてメインの<html>タグを確認します。 lang属性はありますか？ もしそうなら、あなたは明らかです。 また、異なる言語のセグメントにlang属性が適用されていることを確認する必要があります。
読みやすさに関する他のAAAレベルのチェックがありますが、それらは基本的な監査の範囲を超えています。 ただし、一般的に、対象読者がより高いレベルの教育を受けていない限り、コンテンツを6年生の読解レベルに維持することをお勧めします。
サイトの不安定さの他の重要な側面は、エラーメッセージとコンテキストの変更を中心に展開します。 より具体的には、その欠如。 ユーザーがフォーカスを与えたり、入力をアクティブにしたりしても、大きな変化は起こらないはずです。 ユーザーに何らかの警告（矢印アイコン、ヘルパーテキストなど）がない限り、ページはジャンプしないはずです。 これらは、キーボードでテストしたときに気付くようなものです。
フォームをテストする場合、エラーメッセージについても同じことが言えます。 エラーはユーザーに明確に表示され、画面に表示されたままにして、エラーを修正できるようにする必要があります。 これは、大きなWebサイトでさえ常に間違っていることです。 彼らは、エラーのあるページの部分に焦点を合わせるのを忘れるか、少なくとも何らかの方法でそれをマークします。 フォームのエラーをテストし、メッセージが明確であることを確認します。 ソリッドフォームプラグインを使用すると、これに大いに役立ちますが、すべての作業をプラグインに依存しないでください。 また、エラーを示すために色（通常は赤）を使用しているだけではないことを確認する必要があります。 実際のテキスト「エラー」は、特に赤/緑の色覚異常を持つ人々にとって非常に重要です。
エラー以外にも、フォームと入力には明確な指示が必要です。 サイトの各入力を確認し、ユーザーが何をすべきかが十分に明確になっていることを確認してください。 たとえば、検索フォームには虫眼鏡以外のものが必要です。 単純な「検索」ラベルで十分です。 ユーザーがインタラクティブな要素をどうするかを知っていることを確認してください。 決して想定しないでください。
壮健
最後に、サイトは堅牢である必要があります。 これが意味するのは、サイトがスクリーンリーダーなどの支援技術で使用できるということです。 サイトがHTMLで適切に形成されている場合は、問題ないはずです。 Chromeを含む一部の最新のブラウザは、基本的なHTMLエラーを修正するか、少なくともそれらを修正しようとすることを覚えておいてください。 サイトの堅牢性をテストする最も簡単な方法は、Safariにサイトをロードし、組み込みのスクリーンリーダーであるVoiceOverを有効にすることです。 サイトが機能しない場合は、これらの問題に対処する必要があります。
まとめ
この監査チュートリアルは迅速でしたが、それがポイントです。 サイトにアクセスできることを確認するのにそれほど時間はかからず、必要なツールは最小限です。 覚えておくべき重要なことは、平均的なユーザーとして当然のことと思っている能力を持っていない誰かの立場に身を置きたいということです。 その考え方を守ってください。そうすれば、監査によってサイトへのアクセスが容易になります。
見逃した方のために、アクセシビリティに関するこのシリーズをチェックしてください。
- アクセシビリティの概要：パート1
- アクセシビリティの概要：パート2
- アクセシビリティの概要：パート3