web-dev-qa-db-ja.com

スクリーンリーダーのコンテンツにページ番号を付けますか、それともユーザーが自分でナビゲートできるようにしますか?

SPAで作業しているときに、他の「ページ」がすでに使用可能であっても、UIの複雑さを減らすためにコンテンツをページ分割することがよくあります。

これをキーボードまたはスクリーンリーダーのユーザーの観点から考えると、ユーザーが「次のページ」を選択し、フォーカスを画面の上部に移動して再度読み上げを再開する必要があるため、ページ付けはより複雑なUIにつながる可能性があるようです。 。スクリーンリーダーがすべてのコンテンツにすぐにアクセスできるようにして、ユーザーが見出しを使用してナビゲートできるようにするほうが良いと思われます

スクリーンリーダーのユーザーは、一度に1つのセクションに集中することを強制するUIを高く評価していますか、それとも、コンテンツのすべてのセクションを自分でナビゲートできるようにした方がよいですか? enter image description here

例:

上の画像には、ユーザーに尋ねられる一連の6つの質問があります。視覚ユーザーは一度に1つの質問を表示します。 1つの質問に回答すると、回答された質問がスライドして表示され、次の質問がスライドして表示されます。右下の矢印を使用すると、ユーザーは質問をスキップしたり、戻ったりすることができます。 JSはユーザーのフォーカスを質問への回答またはスキップとして移動しました。

スクリーンリーダーユーザーの代替ナビゲーションでは、コントロールにaria-hiddenを設定して、次の見出しにスキップすることで、6つの質問すべてを読むことができます。

3
elliottregan

「...ユーザーは「次のページ」を選択してから、画面の上部にフォーカスを移動して、読み直しを再開する必要があります。」

実際、あなたは彼らのためにそれをすべきです。スクリーンリーダーのユーザーとして、「次へ」を選択すると、次のページが表示され、選択肢に焦点を当てて質問が自動的に読み取られることを期待しています。

これは、キーボードユーザーにとってもメリットがあります(必要のない場合もあれば、パワーユーザーの場合もあります)。次のボタンにタブで移動するときに、ページが進み、キーボードフォーカスが選択肢に置かれている場合、答えをすぐに選択して次のページにすばやく移動できます。それは素晴らしいインターフェースです。

また、質問を1つずつ提示することは、アクセシビリティの設計時に見過ごされがちな認知上の問題にも役立ちます。他の質問が目の前の質問の邪魔にならないようにします。認知の問題(おそらく注意の問題や失読症)を抱えるスクリーンリーダーのユーザーは、すべての質問にアクセスする必要はありません。

顧客ベースを分離したくない。すべてのユーザーがアクセスできる1つのインターフェースが必要です。それは大きな挑戦のように聞こえますが、非常に実行可能です。

2
slugolicious

あなたの質問のために:

スクリーンリーダーのユーザーは、一度に1つのセクションに集中することを強制するUIを高く評価していますか、それとも、コンテンツのすべてのセクションを自分でナビゲートできるようにした方が良いですか?

これは、ユーザーがコントロールできるようにするために重要ですが、ガイダンスを提供することも同様に重要です。

これが、ユーザーによってナビゲーションアクションがトリガーされた後に正当な要素にフォーカスを設定することが推奨される理由です。 (たとえば、タブを開くと、フォーカスはコンテンツのタイトルに自動的に移動します)

あなたの例のために:

1つの質問に回答すると、回答された質問がスライドして表示され、次の質問がスライドして表示されます。右下の矢印を使用すると、ユーザーは質問をスキップしたり、戻ったりすることができます。 JSはユーザーのフォーカスを質問への回答またはスキップとして移動しました。

したがって、SRユーザーの場合は、同じように模倣できます。

行う必要があるのは、TABでフォーカス可能な情報メッセージ(通常のユーザーには表示されない)を用意することです。これは、たとえば、「情報:質問に答えると、次の質問に移動します。前に戻って、ナビゲーションボタンの使用」をご覧ください。

このヘッダーを質問のヘッダー(例では "Sleep")の前に使用して、すべての質問でメッセージが繰り返されないようにします

ユーザーが結果を選択したときに、新しい質問のヘッダーにフォーカスを自動的に設定できるようになりました。

次に、ボタンのセットの前に「ナビゲーションボタン」の非表示のヘッダーを追加できます。これで問題ありません。

ユーザーテストでは、これが機能しているかどうかのみを確認できます

1
Leths