web-dev-qa-db-ja.com

スクリーンリーダーに対応した、アクセス可能なWebカレンダーの概要

アクセシビリティに精通したdev.teamsの1つが、予約システムへの新しいWebインターフェイスを構築しています。見た目も動作もWebカレンダーインターフェイスとほとんど同じです。

この最初のイテレーションでは、スクリーンリーダーのユーザーが1週間のビューでナビゲートでき、1日に複数のアイテムから1つを選択できるようにしたいと考えています。

ユーザーを表示することは、かなりポイントしてクリックして項目を選択することができますが、スクリーンリーダーを使用してユーザーをどのように処理するのでしょうか。

enter image description here これは、ナビゲーションがどのように見えるかのスケッチです。もちろん、各予定についての詳細情報が利用可能になります。

これを行うときにベストプラクティスはありますか? Googleは今回はあまり役に立ちませんでした。

5
Ilias Bennani

最初からこの問題に対処できるのは幸運です。 (WCAG)2.0認定 を取得するために複雑なニュースウェブサイトを作り直す必要があり、このプロジェクトを完了するのに9か月近くかかりました!リリース後の遅い段階で行われたとき、それは信じられないほど挑戦的でした。

slugolicious、非常に良い提案がありました。キーボードだけでカレンダーを使用して複雑なタスクを実行するユーザーまたは自分自身をテストしてみてください。

スクリーンリーダーや一般的なアクセシビリティの扱いに関して、いくつかの改善点を提案します。

キーボードナビゲーションとスクリーンリーダーの最も重要な機能の1つは、コンテンツを読み飛ばす機能です

  • 毎日のヘッダーにデータの要約を含める機能、およびユーザーが希望するかどうかを選択できるようにする機能テーブル内のすべてのアイテムを経由せずに、これをスキップします
  • カレンダー内で左矢印または右矢印を使用して前方または後方に移動する機能がありませんでした。おそらくこれを含めたくなかったかもしれませんが、忘れてしまった場合は、コンテンツをスキップする機能があっても、翌月に移動するのはどれほどイライラするでしょうか。
  • カレンダーにデータが存在しない場合のシナリオでは、ユーザーのニーズに応えるためにどのような情報を表示する必要があるかを考えます。
  • ユーザーがカレンダーの最後に到達したとき、またはデータがロードされなくなったときのシナリオは、リンクを表示する機能を提供し、ユーザーが実行することを選択できるようにします。 スクリーンリーダーユーザーにのみ表示されるコンテンツ

注:コンテンツは、目で見えるユーザーからは非表示にして、スクリーンリーダーのユーザーには見えないが、スクリーンリーダーのユーザーには見えないときにスクリーンリーダーのユーザーが利用できるようにする必要があります。

これがタッチデバイスに使用されるかどうかについても言及していませんか? :) NNグループは、この記事にいくつかの役立つヒントがあります"タッチスクリーンデバイスのスクリーンリーダー"

概要:盲人や視力の弱い人は、タッチスクリーンの携帯電話やタブレットを操作するために、記憶とジェスチャーの豊富な語彙に頼らなければなりません。設計者は、スクリーンリーダーのユーザーの認知負荷を最小限に抑えるよう努める必要があります。


enter image description here

スクリーンリーダーの互換性のために設計する場合の詳細情報

リンク

1つの方法は、Tabキーを使用してリンクからリンクにジャンプすることです。これにより、ユーザーはページがどこにリンクしているかがわかり、ユーザーが特定のリンクを探している場合にコンテンツを実行するのに役立ちます。関連する手法は、ページ上のリンクのリストをアルファベット順に並べることです。これらの方法の欠点は、ユーザーが非リンクコンテンツをまったく聞こえず、この方法で重要な情報を見逃す可能性があることです。

含意:リンクは、コンテキストから読み取られたときに意味をなすはずです。また、リンクの識別情報はリンクの先頭にある必要があります。

見出し

ページの内容の全体的な印象を取得するためにページをスキミングする別の方法は、見出しから見出しにジャンプすることです。ユーザーは、ページの主要なアイデアの概要を聞いてから、バックトラックして最も興味のある部分を読むことができます。この手法の主な欠点は、見出しが不足しているページが多すぎることです。見出しがないと、コンテンツをざっと目を通すこの方法はまったく役に立ちません。

含意:著者は見出しでコンテンツを整理する必要があります。可能な限り、見出しはコンテンツの正確な概要を表す必要があります

段落とページ要素

ユーザーは、段落から段落にジャンプし、最初の文を聞いてから次の段落に進むことができます。このテクニックは、視力のある人が使用する視覚的なスキミングテクニックに最も似ています。また、タグ、リンク、フォーム要素、リストアイテム、その他のコンテンツユニットなどの要素間を移動することもできます。

含意:可能であれば、段落の識別情報を最初の文に配置します。

「ナビゲーションをスキップ」リンク

ユーザーがナビゲーションリンクをスキップできるようにするページ上部のリンクをスキップすることは、コンテンツを簡単に流す方法ではありませんが、ページのメインコンテンツに直接移動する方法です。このようなリンクは、読み取りプロセスを高速化し、ユーザーがメインナビゲーションとメインコンテンツを区別するのに役立ちます。

意味:必要に応じて、ユーザーが繰り返しナビゲーションリンクをスキップできるようにします。

http://webaim.org/techniques/screenreader/

1