<button>
や <input>
などの標準 HTML 要素にキーボード アクセシビリティ対応
可能な限り使用してください。ただし、
カスタムのインタラクティブ要素を追加し、想定されるユーザー行動を
tabindex
を追加しています。
対応ブラウザ
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
tabindex
はインタラクティブなコンテンツにのみ追加します。たとえコンテンツが
重要な画像などが用意されており、スクリーン リーダーのユーザーは、その内容がなくても内容を理解できます。
焦点を当てます
tabindex とは
組み込みのデフォルトのタブオーダーを変更する必要がある場合、
tabindex
HTML 属性を使用して、明示的に
要素のタブ位置を指定します。
tabindex
は任意の要素に適用できますが、適用する必要があるのは
インタラクティブ要素であり、整数値の範囲を取ります。あり
tabindex
。フォーカス可能なページ要素の明示的な順序を指定できます。
フォーカス不可能な要素をタブオーダーに挿入し、要素を削除する
移動することもできます例:
tabindex="0"
: 自然なタブオーダーに要素を挿入します。この要素は、
Tab キーを押してフォーカスします。要素にフォーカスするには、
その focus()
メソッドで確認できます。
tabindex="-1"
: 通常のタブオーダーから要素を削除しますが、
focus()
メソッドを呼び出して、引き続きフォーカスできる場合
tabindex="5"
: 0
より大きい tabindex を指定すると、その要素が前面に表示されます。
おすすめしますtabindex を持つ要素が複数ある場合は、
0
より大きい場合、タブオーダーは 0 より大きい最小値から始まります
順調に進んでいきます0
より大きい tabindex を使用すると、
アンチパターン。
キーボードで操作できることを確認する
Lighthouse などのツールは特定のアクセシビリティを自動的に検出できる 一部のテストは依然として人間が手動で実施する必要があります。
Tab
キーを押して、サイト内を移動してみてください。
どうすればよいでしょうか。使用できない場合は、必要に応じて
tabindex
コントロールのフォーカス性を向上させます
ページレベルでフォーカスを管理する
tabindex
はシームレスなユーザー エクスペリエンスの実現に役立ちます。たとえば
複数のコンテンツ セクションを含む堅牢な単一ページを作成し、
コンテンツがページ読み込みのさまざまな時点で非表示になります。たとえば
表示されるコンテンツは、ページを更新しなくても、ナビゲーション リンクで変更できます。
この場合、選択したコンテンツ エリアを特定し、tabindex
を次の値にします。
-1
を呼び出して、その focus
メソッドを呼び出します。これにより、特定のルールでコンテンツが
おすすめしますフォーカスの管理と呼ばれるこの手法は、
ユーザーが認識したコンテキストを、サイトのビジュアル コンテンツと同期させる。
コンポーネントのフォーカスの管理
場合によっては、コントロール レベルでもフォーカスを管理する必要があります。 カスタム要素。
どのキーボード動作を実装すべきかを判断するのは難しい場合があります。「 Accessible Rich Internet Applications(ARIA)オーサリング プラクティス には、コンポーネントのタイプと、コンポーネントがサポートするキーボード操作が記載されています。
タブオーダーに要素を挿入する
tabindex="0"
を使用して、ナチュラル タブオーダーに要素を挿入します。例:
<div tabindex="0">Focus me with the TAB key</div>
要素をフォーカスするには、Tab
キーを押すか、要素の focus()
メソッドを呼び出します。
タブオーダーから要素を削除する
tabindex="-1"
を使用して要素を削除します。例:
<button tabindex="-1">Can't reach me with the TAB key!</button>
元のタブオーダーから要素が削除されますが、引き続き
focus()
メソッドを呼び出して、フォーカスを移動します。
要素に tabindex="-1"
を適用しても、その子には影響しません。
自然にタブオーダーにある場合や tabindex
値が原因である場合、
タブオーダーに残ります
タブオーダーから要素とそのすべての子を削除するには、
WICG の inert
ポリフィルです。
ポリフィルは、指定された inert
属性の動作をエミュレートします。
支援技術によって要素が選択または読み取られるのを防ぎます。
tabindex > 0
を避ける
tabindex
が 0 より大きい場合、要素はナチュラルタブの前に移動されます。
できます。tabindex
が 0 より大きい要素が複数ある場合、タブは
ゼロより大きい最小値から順に増えていきます。
0 より大きい tabindex
を使用すると、アンチパターンとみなされます。その理由は、
スクリーン リーダーは、タブ順ではなく DOM 順にページを移動します。必要に応じて
要素をタブオーダー内で先頭に移動する場合は、
説明します。
Lighthouse では、tabindex
> を使用して要素を識別できます。0.次のコマンドを実行します。
ユーザー補助の監査([Lighthouse] > [Options] > [Accessibility])に移動して、
「[tabindex]
値が 0 より大きい要素はありません」という結果監査です。
「tabindex
の移動」を使用
複雑なコンポーネントを作成する場合は、キーボードの追加が必要になる場合があります。
焦点を絞ることなく
サポートを提供します可能であれば、組み込みの select
要素を使用します。です。
選択可能で、矢印キーで選択可能な
。
同様の機能を独自のコンポーネントに実装するには、
「tabindex
」として移動します。tabindex の移動は、tabindex
を -1 に設定することで機能します。
すべての子に適用されます。コンポーネントはキーボードを使用して
ユーザーが押したキーを判別するイベント リスナー。
この場合、コンポーネントは以前にフォーカスされていた子の tabindex
を設定します。
-1 に設定して、フォーカスされる子の tabindex
を 0 に設定し、focus()
を呼び出します。
メソッドを呼び出します。
変更前
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
変更後
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
キーボード アクセスのレシピ
カスタム コンポーネントがサポートしているキーボードのレベルがわからない場合は、 詳しくは、 ARIA Authoring Practices 1.1 このガイドでは、一般的な UI パターンと、 サポートすべきコンポーネントを定義します。