web-dev-qa-db-ja.com

適切に設計された高コントラスト関数は何をすべきですか?

ほぼすべての人が自分のWebサイトにアクセスできるようにしたいと考えています。フォントサイズを大きくする機能はすでに持っています。現在、ハイコントラスト機能を実行しています。

しかし、視覚障害者のためのそのようなインターフェースはどのように見えるべきでしょうか?私はすでに視覚障害のある他の人に尋ねました、そして彼は暗い背景に明るいテキストが彼にとってより良いと言いました。そして色に関して:彼は濃い緑が好きです。

私のウェブサイトへのアクセスを視覚障害者にとって良い体験にするための他のベストプラクティスを教えていただければ幸いです。

ウェブサイトのフォントも変更する必要がありますか?はいの場合、どのタイプのフォントですか?

11
Noah Krasser

より多くの研究を行います。 1人に聞いても、その人の好みだけがわかる-より多くの人に聞いて、結果のパターンを探す。

[〜#〜] rnib [〜#〜] (目の不自由な人や目の見えない人のための英国の組織)は、黒の背景に黄色のテキストを推奨していますが、これは特定のユーザーに適さない場合があります。

コントラストについて考える必要があるだけでなく、色の組み合わせについても考える必要があります。色覚異常は世界の人口の約4.5%に影響を及ぼします。これは200ユーザーごとに9です。幸いなことに Colour Contrast Analyzer のようなツールがあり、それを支援します。

また、アクセシビリティを考慮する領域はビジョンだけではありません。小さなコントロールが近接して配置されている場合、筋肉や運動に問題があり、マウスを簡単に制御するのが難しい人にとっては難しいでしょう。一部の人々はマウスをまったく使用できません-あなたの製品はキーボード制御を可能にしますか?製品はオーディオキューに依存していますか?もしそうなら、あなたは聴覚障害者のための視覚的な同等物を必要とするでしょう。

最後に、カバーする最もトリッキーなことは、認知障害を持つ人々のためのアクセシビリティです:あなたの製品は意味がありますか?体系化されていない方法で提示された情報が多すぎますか、それとも簡単に理解できるチャンクに分割されていますか?不要なフォームフィールドやその他のジャンクをすべて削除しましたか?

必要に応じて、低レベルのシミュレーターを作成しました アクセシビリティの問題に苦しんでいる誰かの世界を垣間見る

24
Andrew Martin

ハイコントラストテキストを考えて、色だけではなくを使用してください

そこには多くのアクセシビリティガイドラインがあります。以前にプロジェクトで遭遇した2つの例について触れます。追加のガイドラインについては、添付のリンクを確認してください。

ハイコントラストテキスト

Webコンテンツアクセシビリティガイドライン をチェックして、テキストのコントラストなど、このトピックに関する多くの役立つ情報を確認してください。

1.4.6コントラスト(拡張):テキストとテキストの画像の視覚的表現は、以下を除いて、少なくとも7:1のコントラスト比を持っています。 :(レベルAAA)

  • 大規模テキスト:大規模テキストと大規模テキストの画像のコントラスト比は少なくとも4.5:1です。
  • Incidental:非アクティブなユーザーインターフェイスコンポーネントの一部であるテキストまたはテキストの画像、純粋な装飾、誰からも見えない、または他の重要な視覚的コンテンツを含む画像の一部には、コントラスト要件はありません。
  • ロゴタイプ:ロゴまたはブランド名の一部であるテキストには、最低限のコントラスト要件はありません。

出典: Web Content Accessibility Guidelines(WCAG)2.

色以上を使用

設計の正と負の指標として緑と赤を使用することを想像してみてください。色覚異常を持つユーザーは、これらの色で問題を抱えることがあります。また、ポジティブとネガティブの色と組み合わせてシェイプを使用します。例えば;上向きの三角形または親指を上向きにしてポジティブにします。

上記のポイント(番号11)を含む、考慮すべきアクセシビリティポイントの別のリストを次に示します。

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

10
Nick Groeneveld

上記の回答に追加するには。

覚えておくべきことはコントラストだけではありません。

1)あなたのウェブサイトは [〜#〜] aria [〜#〜] フレンドリーですか?スクリーンリーダーで簡単に閲覧できますか?

2)極端なレベルのズームでもウェブサイトが機能し続けるような方法で応答または開発されていますか?視覚障害のあるユーザーの多くは、Webを閲覧しているときに(極端に)ズームする傾向があります。 500%ズームでテキストを多用するサイトを閲覧するユーザーに遭遇しました。あなたのコンテンツは同じように見えますか?

GOV.UKには 数枚のポスター があり、すべてのアクセシビリティの問題と提案された解決策を非常にうまくまとめています。見てみな!

4
Socrates Kolios

Microsoft Windowsからインスピレーションを得ることができます。ハイコントラストカラーモードには次の機能があります(私は太字で重要なポイントを強調しました)。

  • ユーザーインターフェイスは、事前定義された最小限の色のセットによって描画されます。それらは、テキスト、ハイパーリンク、無効化されたテキスト、選択されたテキスト、ボタンのテキスト、および背景です。 (これらの色の他に、1つまたは2つの可能性がありますテーマの色コンテンツのユーザビリティには影響しません-たとえば、アクティブおよびパッシブウィンドウフレームの色として使用されますが、Webページではマイレージ標準のカラーモードとは異なり、上記の各色ユーザーがカスタマイズできます最初は、いくつかの色のセットが提供され、一部は黒地に白を使用し、一部は黒地に黒を使用します。

  • 背景画像の表示を抑制します。これは主にInternet Explorerで表示されるWebページに表示されますが、実際にはシステム全体です。

  • ハイカラースキームのオンとオフを切り替える簡単な方法(トグル)があります。これは、通常ハイコントラストモードで作業する人が元の外観を確認してから戻りたい場合に便利です。 (これには多くの理由があります。)また、ハイコントラストをオンまたはオフにすると、開いているすべてのアプリケーションにシステムメッセージが表示され、それに応じて再描画できます。

1
miroxlav