ARIA: toolbar ロール

解説

ツールバーとは、ボタンやチェックボックスなど、よく使われるコントロールをコンパクトな視覚形式でグループ化したものです。 toolbar ロールを使うと、スクリーンリーダーのユーザーにこのグループ化の存在と目的を伝えることができ、キーボードユーザーのタブストップの数を減らすのに役立ちます。 toolbar ロールは、3 つ以上のコントロールをグループ化する場合にのみ使ってください。

ツールバーは、一般的にユーザーの操作を楽にするため menubar に含まれる機能のサブセットとして使われます。メニューバーに複数のツールバーがある場合、各ツールバーにはラベルが必要です。ラベルは、aria-labelledby または aria-label を使って追加できます。

ツールバーを作る際は、ツールバー内でフォーカス管理とキーボード操作を実装する必要があります。ツールバー内と組み込まれたネイティブコントロールのどちらも同じキーボード操作が使われる場合の処理も重要です。水平ツールバーでは、コントロール間の移動に Right Arrow と Left Arrow を使います。垂直ツールバーの場合は、Up Arrow と Down Arrow を使います（垂直ツールバーの場合は、aria-orientation="vertical"も追加する必要があります）。水平ツールバーの場合は、垂直方向の矢印キーで操作するスピンボタンなどのコントロールの操作用に予約しておくこともできます。

ツールバーナビゲーションに矢印キーを使うコントロールは含めないようにしてください。どうしても含める必要がある場合は、ツールバーの最後に置いてください。例えば、横長のツールバーでは、テキストボックスを最後の要素として置けます。

ツールバー内のインタラクティブな要素が一時的に使えない場合は、スクリーンリーダーのユーザーがその存在を分かれるよう、フォーカスできる状態にしておくことを考えてください。

関連する WAI-ARIA ロール、状態、プロパティ

aria-orientation

ロールが toolbar の要素は、暗黙的に aria-orientation の値が horizontal になります。

aria-labelledby / aria-label

ツールバーに表示できるラベルがある場合は、aria-labelledby 属性で ID を指定して参照します。そうでない場合は、aria-label を指定します。メニューに複数のツールバーがある場合は、名前を指定する必要があります。

キーボード操作

フォーカス管理を実装し、キーボードの Tab キー操作でツールバーに移せるようにし、矢印キーでツールバー内のコントロール間でフォーカスを移せるようにします。

Tab および Shift + Tab

ツールバーへのフォーカスの出し入れします。ツールバーにフォーカスが移す場合：

• 初めてツールバーにフォーカスが移す場合、無効になっていない最初のコントロールにフォーカスが設定されます。
• ツールバーが前にフォーカスがあった場合、最後にフォーカスがあったコントロールにフォーカスが設定される場合もあります。そうでない場合は、無効になっていない最初のコントロールにフォーカスが設定されます。

Home (オプション)

最初の要素にフォーカスを移します。

End (オプション)

最後の要素にフォーカスを移します。

水平ツールバー

ロールが「toolbar」の要素は、暗黙的に aria-orientation の値が「horizontal」になります。ツールバーが実際に水平方向の場合、以下のキーボード操作を実装する必要があります。

Right Arrow

フォーカスを前のコントロールに移します。オプションで、フォーカスの移動は最初の要素から最後の要素までループする場合があります。

Left Arrow

フォーカスを次のコントロールに移します。オプションで、フォーカスの移動は最後の要素から最初の要素までループする場合があります。

複数の行のコントロールを持つツールバーでは、左矢印と右矢印が各行をループするようにし、垂直方向の矢印キーは、ラジオボタン間のナビゲーションや数値スピナーの増減など、コントロールの操作に使えるようにしてください。

縦型ツールバー

ツールバーが縦型の場合、aria-orientation="vertical" が設定され、以下のキーボード操作が実装されていることを確かめてください。

Up Arrow

フォーカスを前のコントロールに移します。オプションで、フォーカスの移動は最初の要素から最後の要素までループする場合があります。

Down Arrow

フォーカスを次のコントロールに移します。オプションで、フォーカスの移動は最後の要素から最初の要素までループする場合があります。

必要な JavaScript 機能

フォーカス管理を実装し、キーボードのタブキー操作でツールバーにフォーカスが移せるようにし、矢印キーでツールバー内のコントロール間をフォーカスが移せるようにします。タブキーでツールバーに移した場合、フォーカスは最後にフォーカスを持っていたコントロールに戻ります。

ツールバー要素自体はフォーカスを受け取りませんが、ツールバーへの移動、ツールバーからの移動、およびツールバー内での移動時のフォーカス管理が必要です。読み込み時、ツールバー内のタブキー操作で最初にフォーカスが移す要素には tabindex="0" が設定され、ツールバー内の他のフォーカスできる要素には tabindex="-1" が設定されます。キーボード操作に応じて、フォーカスを受け取る要素には tabindex="0" が設定され、フォーカスを失った要素には tabindex="-1" が設定されます。 tabindex="0" を持つ要素にフォーカスを element.focus() で設定します。これは「ロービングタブインデックス」と呼ばれます。フォーカス管理にロービング tabindex を使う利点は、ブラウザーが新しくフォーカスされた要素を画面内にスクロールしてくれることです。

ユーザーが Tab または Shift + Tab でツールバーにフォーカスを移した際に、特定の要素にフォーカスを当てる必要がある場合は、ツールバーがフォーカスを失ったときに、その対象要素の tabindex="0" が設定されているかどうかを確かめてください。

ツールバー内にフォーカスがある場合は、視覚的な合図を表示してください。ツールバー内の要素にフォーカスがある場合、ツールバー自体（矢印キーによる方向ナビゲーションをサポートするため）とフォーカスを持つコントロールのどちらも視覚的な合図を含める必要があります。どちらの要素を対象とするには、CSS 擬似クラスの :focus と :focus-within が使えます。

例

ARIAオーサリングプラクティスガイド（APG）からのツールバーの例

アクセシビリティに関する懸念

ツールバーのナビゲーションに使う矢印キー（左右の矢印キー、または縦型ツールバーの場合は上下の矢印キー）を必要とするコントロールは、ツールバーに含めないようにしてください。どうしてもそのようなコントロールを含める必要がある場合は、ツールバーの最後の要素にしてください。例えば、横型ツールバーの場合、テキストボックスを最後の要素として含めることができます。

ツールバー内のインタラクティブな要素が使えない場合は、スクリーンリーダーのユーザーがその存在を分かれるよう、フォーカスできる状態にしておくことを考えてください。

仕様書

関連情報

• CSS の擬似クラス :focus
• CSS の擬似クラス :focus-within