web-dev-qa-db-ja.com

ブラインドUXのスクリーンリーダーで範囲入力/スライダーにアクセスできるようにする方法

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

範囲入力/スライダースクリーンリーダーにアクセスできるようにするにはどうすればよいですか?

視覚障害者がこれらのタイプの入力にアクセスできるようにするための最良のソリューションは何ですか?

スライダーを使用して値の範囲を選択する場合も、問題が発生する可能性があることに注意してください。

mockup

bmmlソースをダウンロード

3
Tony UK

ここで検討する必要があるのは、視覚に精通したユーザーだけではありません。キーボードのみを使用するユーザー、手首を骨折したユーザー、またはあらゆる種類のユーザーを考えてみてください。アクセシビリティblind視覚障害者のみ。

しかしとにかく、あなたの質問に答えるために-あなたは最初の例にテキストフィールドを持っています。それが取るべきアプローチです。スライダーはフォームへの拡張である必要があり、それが唯一の入力メソッドであってはなりません。

値がスライダーにリンクされているフィールド(つまみをスライドするとフィールドの値が変更されます)とその逆(フィールドに入力するとつまみも移動します)を提供します。それらのフィールドに適切なラベルを付けます。マークアップ自体で視覚的に明確に定義されていない場合は、ユーザーが目的(つまり、「最大値」+「最小値」)を理解し、フィールドのルールを説明する画面上のテキストとフィードバックを提供します。 。

これは、スクリーンリーダーの問題をカバーし(正しい標準を使用してHTMLをマークアップすることは、ほとんどの場合、スクリーンリーダーに準拠するために必要なすべてのことです)、マウスを使用していない人でも使用できるようになります。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

5
JonW

OpenAjaxを確認してください。アクセス可能なスライダーウィジェットの例を次に示します。 http://www.oaa-accessibility.org/example/32/

基本的に、everyユーザーが範囲から値を選択するタスクを完了します。要約すると、コンポーネントに追加する必要があるのは次のとおりです。

  • ラベルと説明:失明のあるユーザーはスクリーンリーダーで移動するため、スライダーにフォームラベルまたはスクリーンリーダーに通知するARIAタグがあることを確認する必要があります進行中であり、どの値が選択されているか
  • キーボードナビゲーション運動障害のあるユーザーは、特別なキーボードやマウス以外のデバイスを使用する可能性があるため、範囲ピッカーにもキーボードイベントハンドラを追加する必要があります
  • 十分な色のコントラスト:視力が弱い、または極端な光の状況下にあるユーザーは、それを見ることができない場合があります(コントラストチェッカーを使用し、後で色を調整します)

    それが役に立てば幸い!

1
maia