視覚障害のあるユーザーのためにWebサイトをテストする方法は？
黄斑変性症、老眼鏡が必要、コントラストの範囲が失われる可能性など、老化によって一般的に発生する視覚障害者のWebサイトをテストする場合、どのテクニックを使用すればよいですか？
注：この回答を書いた理由は、視覚障害者が自分のサイトにアクセスできるようにするために必要なチェックポイントは、サイトの障害または設計上の問題を理解することで、ユーザーがサイトにアクセスするときに直面する可能性のある問題を定義するのに役立つためです
まず第一に、私はあなたのウェブサイトがスクリーンリーダーをどのように処理するかを確認するためにあなたのウェブサイトをテストすることを強くお勧めします。は、「視覚障害者」だけでなく、視力に制限のある人にも期待されるアクセシビリティツールです。したがって、それらを回避することで、自分のユーザーグループを技術的に疎外することになります。
とはいえ、視覚障害のあるユーザーがWebサイトにアクセスできるようにするために何をすべきかについて、いくつかの推奨されるプラクティスがあります。
- フォントサイズが他の人が読める大きさであることを確認してください：Neilson Normanによる 研究レポートを引用するには
視力の低下はおそらく最もよく知られている老化の問題ですが、タイプが小さいWebサイトは軍団です。高齢者をターゲットとするサイトでは、デフォルトとして少なくとも12ポイントのフォントを使用する必要があります。また、特に高齢者をターゲットにするかどうかに関係なく、すべてのサイトでは、特にサイトのデフォルトが小さいフォントサイズの場合、ユーザーが必要に応じてテキストサイズを大きくできるようにする必要があります。
- デザインの一貫性を確保します：ほとんどの高齢者は一般にリンクの標準色を認識しており、通常、その色のアイテムはリンクであると想定します。リンクやその他のアクティブな相互作用要素に新しいデザインの色を実装することは避けてください。前に参照した同じNorman Neilsonレポートを引用するには
ハイパーテキストリンクは重要な設計コンポーネントです。それらに大きなテキストを使用することは、2つの理由で特に重要です。1）読みやすさを確保するため、および2）クリックの目立つターゲットにするためです。また、密集したリンクを避ける必要があります。空白を使用してリンクを区切ると、誤ったクリックが減り、ユーザーが正しいリンクにアクセスする速度が上がります。このルールはコマンドボタンやその他のインタラクションオブジェクトにも適用されます。これらはすべて、クリックを容易にするために適度に大きくする必要があります。
Mashable のこの記事もご覧になることをお勧めします
多くの場合、ユーザーが必要とするのは、単にテキストを大きくすることだけです。より大きなフォントサイズの代替スタイルシートを提供することを検討し、ブラウザでテキストのみのズームが有効になっているときにレイアウトが壊れないことを確認してください。多くの視覚障害者は、サイト全体のレイアウトの縮尺を変更せずにテキストを拡大したいと思うでしょう。これにより、長い行でテキストをスクロールしたり追跡したりすることが困難になる可能性があります。
サイトのターゲット市場によっては、デフォルトのフォントを数ポイント大きくすることも検討する必要があります。記事や大量のテキストを公開している場合は、テキストのみのバージョンを提供することをお勧めします。これにより、ユーザーはその後、彼が好きなようにテキストを操作します。
- フォントを正しく選択してください：サイトで選択するフォントは、サイトでの読みやすさにとって重要であるため、注意してください。したがって、フォントの圧縮を避けてください。この 高齢者向けサイトを設計するためのチェックリストを引用するには
圧縮されていないHelveticaなどのsans serif書体を使用します。セリフ、目新しさ、およびディスプレイの書体の使用を避けます。
- 色の使用法：特定の色は、視力に制限のある人にとっては見分けにくい場合があります。色覚異常にはさまざまな種類があり、選択した色が 視力が制限されている人や色覚異常 でも理解できるようにする必要があります。 http://colorfilter.wickline.org/ のように、デザインがどのように積み重なっているかを確認するために、カラーブラインドシミュレーターを使用することもできます。また、ユーザーが緊張せずに内容を読むことができる この記事をカラーコンボから引用するには
適切な色を使用することは、特別な視力を必要とする人々にとって使いやすさの重要な部分です。すべてのモニターが、Webデザインに選択した色を正確に再現するわけではありません。認められた216の「ブラウザセーフな色の選択」の範囲内に留まることにより、選択した色が変更されることなく確実に渡されます。特定の色の組み合わせは、視覚障害のある視聴者に対してコントラストのレベルが低下すると効果が失われるため、重要です。色相、明度、および彩度の程度は区別できなくなる可能性があり、特に色が主要なインジケーターとして使用されている場合は、重大な問題になる可能性があります。
フォアグラウンドとバックグラウンドの画面スペースのコントラストや光の違いを強調することで、視覚障害を持つ人は色をより簡単に区別できます。同じ理由で、同じような明るさの色を並べて使用しないでください。青緑色、緑色、黄色、オレンジ色の光を明るくし、暗い色、青、紫、紫、赤を暗くして、コントラストを最も効果的に使用します。各領域を劇的に異ならせることができるほど、Webページはより明確になります。
無関係なグラフィックと「忙しい仕事」を削除すると、ウェブサイトが乱雑になる可能性があります。クリーンでシンプルなレイアウトは、読みやすく、ナビゲートしやすくなります。最小限の追加色で強調するために白黒でデザインすることが最善の方法です。黄色、青、白、黒は、視覚障害を持つ人々にとって最も混乱しにくい色です。実際、最も魅力的ではないかもしれませんが、黒の背景に24ポイントの白または淡黄色のテキストは、オンラインユーザーにとって最も読みやすい配色と見なされます。
- ユーザーがキーボードを使用してサイトにアクセスすることを許可します：スクリーンリーダーをサポートしたくないとおっしゃっていましたが、そのようなことはしないよう強くお勧めしますまた、ユーザーがキーボードショートカットを使用してコンテンツにすばやく移動できると同時に、スクリーンリーダーでコンテンツをスキャンできるため、サイトをキーボードで移動できることも確認してください。この記事を mashable から引用するには
キーボードショートカットを使用すると、スクリーンリーダーを使用するユーザーにとって便利なだけでなく、視覚障害のあるユーザーのためのサイトナビゲーションがはるかに簡単になります。キーボードコマンドの追加により、矢印キーといくつかのクイックキーストロークを使用してサイトをナビゲートすることが可能になり、画面上でマウスカーソルをたどる必要がなくなり、関連する視覚的フォーカスを維持し続ける必要がなくなります。これは目の疲れや欲求不満を軽減するのに大いに役立ちます。視覚障害のある多くのユーザーは、大型のモニター（23インチ以上）でWebサーフィンを行うため、特に焦点距離が短い場合、頭と目の動きが多くなる可能性があります。画面の周りで簡単に失われる）、良いです。
最後に、チェックする価値のあるリンクをいくつか紹介します
タイプの色と背景色の間に十分なコントラストがあることを確認するために、コントラストレベルを確認するために使用できるいくつかのツールがあります。これは、10個のそのようなツールへのリンクです。 http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/
フォントサイズについては、ユーザーがブラウザーのズーム設定を変更してもレイアウトが正常に表示されるように、EMを使用してそれに比例してサイズを調整していることを確認してください。
ユーザーの視力が非常に悪く、スクリーンリーダーを使用する必要がある場合は、スクリーンリーダーでウェブサイトを適切に機能させるプロセスを説明するコンサルタントをGoogle検索で探すことをお勧めします。 JAWS（ http://en.wikipedia.org/wiki/JAWS_（screen_reader） ）が現在最も人気があります。コンサルタントのお金がない場合は、メーカーのWebサイトからJAWSをダウンロードして、オンラインチュートリアルを読みながら遊んでください。スクリーンリーダーでウェブサイトを適切に機能させるのは難しいビジネスです。必要になる前にプロジェクトに取り組み、コンサルタントを雇う必要がありました。
私はあなたがすでにあなたのウェブサイトを構築した後に手動でこれを行う方法を尋ねていると思いますか？ただし、開発中であっても、このテストの一部を自動化することは可能です。これが可能であることをどれだけの人が知っているかはわかりませんが、あなた（または開発者）が役立つことを願っています。
自動統合テスト環境が設定されている場合（自動ビルド、自動テストなど）、 capybara-accessible （=Ruby on Rails environment）。これにより、機能テスト（通常はRSpecなどのツールを使用して記述）によってアクセスされた各ページのアクセシビリティ監査を自動的に実行できます。監査は自動的に行われますGoogleの アクセシビリティ開発ツール によって実行され、オープンソースのJavaScriptライブラリから生成されたレポートが含まれます。
レポートに含まれている監査ルールの例：
- 最小色コントラスト
- 入力とのラベルの関連付け
- alt属性の存在
- aRIAロールの有効な使用
自動化されたアクセシビリティテストの主な利点の1つは（実際の自動化されたコードテストと同様に）、数週間または数か月後のコードの変更により、サイトのアクセシビリティが不可能な方法で変化した場合に対応できることです。予見された。
もう1つの利点は、QAチームのワークロードが削減され、特定のやり取りや複雑なページに集中できるようになることです。
これは特効薬ではないかもしれませんが、少なくとも将来のアクセシビリティのベースラインレベルに自信を与えるかもしれません。