以下のように、カルーセルにはどのWAI-ARIA ロールを使用する必要がありますか?
ノート:
以下のように、カルーセルにはどのWAI-ARIA ロールを使用する必要がありますか?
ノート:
あなたが正しく言うようにrole=slider
、カルーセルには適していません。あなたが使うべきものはrole=listbox
MDN からの引用 (以下のリンクを参照):
listbox ロールは、静的で、HTML 要素とは異なり、画像を含む可能性のある 1 つ以上の項目をユーザーが選択できるリストを作成する要素を識別するために使用されます。
リストボックスの各エントリなど、使用する必要があるその他の ARIA ロールに関する追加情報については、 https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_roleを参照してください。role=option
この YUI プラグインも参照できます (YUI 2 は非推奨ですが、質問の目的でドキュメントは引き続き有効です) http://yui.github.io/yui2/docs/yui_2.9.0_full/examples/carousel /carousel-ariaplugin.html
javascript を介して既存のカルーセルに aria ロールを追加します。私はそれを使用することを提案していませんが、確かにそれが何をするかを推測し、必要に応じてマークアップで複製することができます.
を使用した多くの例を見てきrole="listbox"
ましたが、これは私には正しくないと感じています。リストボックスは、ユーザーからの選択を取得するフォーム コントロールです。カルーセルの目的がユーザーにオプションを選択させることである場合は、 を使用しますlistbox
が、ほとんどの人はこの方法でカルーセル コンポーネントを使用しません。より良い役割はtablist
. タブリストは、(オプションをキャプチャするのではなく) データを表すために使用されます。カルーセルはデータを表します。特定の画像を表示するリンクには の役割がtab
あり、キャプションなどの対応するデータを含む各画像には の役割がありtabpanel
ます。
http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#tabpanelを参照