17

以下のように、カルーセルにはどのWAI-ARIA ロールを使用する必要がありますか?

USA.gov カルーセルの例

ノート:

  • スライダーの役割はよく知っていますが、これは別の種類のウィジェットを指します。
  • 例はUSA.govからのもので、カルーセルに関連して使用されている唯一の aria ロールはaria-live、個々のスライドにあります。
4

6 に答える 6

12

あなたが正しく言うように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 ロールを追加します。私はそれを使用することを提案していませんが、確かにそれが何をするかを推測し、必要に応じてマークアップで複製することができます.

于 2013-06-03T14:31:20.213 に答える
6

を使用した多くの例を見てきrole="listbox"ましたが、これは私には正しくないと感じています。リストボックスは、ユーザーからの選択を取得するフォーム コントロールです。カルーセルの目的がユーザーにオプションを選択させることである場合は、 を使用しますlistboxが、ほとんどの人はこの方法でカルーセル コンポーネントを使用しません。より良い役割はtablist. タブリストは、(オプションをキャプチャするのではなく) データを表すために使用されます。カルーセルはデータを表します。特定の画像を表示するリンクには の役割がtabあり、キャプションなどの対応するデータを含む各画像には の役割がありtabpanelます。

http://www.w3.org/TR/2010/WD-wai-aria-practices-20100916/#tabpanelを参照

于 2013-06-25T18:11:17.207 に答える