コンテンツスライダー/カルーセルアクセシビリティのベストプラクティス？
私はニュースサイトのコンテンツスライダーを作成していますが、キーボードと画面読み上げのアクセシビリティの問題に直面しています。
ケース1：純粋な画像スライダー
一般的な画像スライダーの場合、次のように表示されます。-前の次のボタンをフォーカス可能にして、ユーザーが画像を切り替えられるようにします。
フォーカス可能な領域は赤で表示されます
ケース＃2：画像上のコンテンツ
スライド内にリンク/コンテンツを含むコンテンツカルーセルの場合、コンテンツをフォーカス可能にする必要があるため、この方法では機能しません。
その場合、スライド/矢印内でフォーカスがどのように移動するかという慣習が得られないようです。
基本的に2つのオプションがあります。
- スライドの量が少ない：フォーカスは矢印とアクティブなスライド（例：ガーディアン）内でのみ移動するため、次のスライドに移動するには、TABを矢印に移動し、次にSHIFT + TABでスライドのコンテンツをフォーカス可能にします。
- フォーカスは矢印と各スライド内で移動します（Amazon）。したがって、次の矢印に移動するには、最初にすべてのスライドを確認する必要があります。
スクリーンリーダーとスライダー
私はここで迷子になっていると思うので、誰かが何らかの経験を積んでいるなら、感謝されます。矢印とナビゲーションを非表示にしたプレーンリストと同じようにスクリーンリーダーに表示できると思いますか？
ご質問
このための他の（多分もっと良い）規約がありますか？キーボードの矢印を使用してスライド内を移動しますか？矢印で移動できることをユーザーにどのように伝えますか？
たとえば、どのように処理しますか？ドットナビ？
ループスライダーはどのように処理しますか？
実際にはスライダーを使用しないでください。はい、でも...
スライダーを使用するべきではないと主張することができ、そうです。しかし、とにかくそれを使用する人もいるようです。そのため、まったくアクセスできない他のスライダーを見つけるよりも、スライダーをよりアクセスしやすくする方が良いでしょう。
そもそもカルーセルを使用しないことを支持します。明らかに重要なコンテンツを非表示にします。
ただし、それとは別に、タブ順の矢印を無視して、各スライドのクリック可能なコンポーネントに焦点を当てながら、タブを直接使用してスライドを移動することもできます。
これは、各スライドにリンクがあり、ページのさらに下のコンテンツに移動したいユーザーにとって煩わしい（Amazonなどの）リンクではないことを前提としています。
コンテンツタイプ/値は、決定に役立ちます。
例：コンテンツが訪問者にとって重要な視覚情報を含む単なる画像である場合は、最初のケースに進みます。
コンテンツが、訪問者にとって重要な視覚情報とテキストを含む画像である場合、ケース2-1に進みます。
画像よりもテキストの方が重要な場合は、ケース2-2を選択してください。
残りはかなり技術的なものであり、これが答えにふさわしい場所かどうかはわかりません。簡単に説明すると、リンクには画像を含めることができます。リンクをジャンプすると、画像もジャンプすることになります。
インストール ChromeVox 、 www.magnumphotos.com の[その他のテーマ]セクションに移動し、マウスを制御したり、目やタブを閉じたりできないふりをします。