「さらに読み込む」コンテンツボタンがクリックされたときにキーボードフォーカスを移動する場所
「さらに読み込む」ボタンがクリックされたとき、キーボードフォーカスはどこに移動する必要がありますか？この機能を示すWebサイト。ボタンをクリックすると、フォーカスがページの上部に移動するか、フォーカスが新しいコンテンツを超えて移動します。
キーボードのユーザーと支援技術のユーザーは、新しいコンテンツがどこから始まっているのかを知っているので、これらの方法には問題があると思います。
私は解決策を探しています。これに対処する方法はいくつか考えられますが、アクセシビリティの観点からの最良のアプローチはわかりません。
- フォーカスが新しいコンテンツの先頭に移動します。これは、tabindex-1とスクリプトを使用してフォーカスを設定することで実現できます。
- 「さらに読み込む」ボタンを配置した後、新しいコンテンツが読み込まれ、ボタンにフォーカスが残ります。新しいコンテンツの最後に、新しい「さらに読み込む」ボタンが表示されます。
私もアクセス可能なベストプラクティス機能を探しています
「さらに読み込む」コンテンツボタンの機能が既に確認されているサイト
最後のリクエストで読み込まれた最初のアイテムにフォーカスを設定しないと、ユーザーはシーケンスを追跡できなくなります。見逃したものにアクセスするには、Shiftキーを押しながらTabキーを押して戻る必要があります。これは、視力のあるキーボードユーザーにとっても悪いことです。
番号はフォーカスシーケンスを示します。 [さらに読み込む]を押した後、9番に焦点が当てられたままの状態をご覧ください。シーケンスは維持されます。スクリーンリーダーは、レンダリングされるとすぐにアイテム9を読み上げます。
一般的に、ユーザーのフォーカスを移動するのはしないのが最善です。したがって、新しいコンテンツがロードされた後も「load more」ボタンがページに表示されている場合、フォーカスはそのボタンにとどまるはずです。 「さらに読み込む」に焦点を当てることは、準拠に役立ちます WCAG 3.2.2
また、アクセシビリティの目的で、どれだけ多くの「もの」がロードされたかを発表するのは良いことです。 aria-live ウェブページを作成している場合は、StackExchange向けではない実装の詳細であるため、これ以上の詳細は控えます。 StackOverflowでaria-liveに関する情報を見つけることができます。
明確な解決策はありません。
複数のユーザーに、自分にとって何が便利かを尋ねる価値があります。私の意見では、画面がまだ所定の位置にある場合、画面は動かないままにしておく必要があります-リスト上の項目の数が画面上で見えなくなると、画面の位置が最初の新しい表示リスト要素に変わるはずです
このソリューションの起源は、認知過負荷を減らすことを目的としていますミラーの法則-平均的な人は、作業メモリに7（プラスまたはマイナス2）アイテムしか保持できません。これにより、多くのコレクションの閲覧が簡単になります。