0Pricing
Web Accessibility Academy · レッスン

ウィジェットでroving tabindexを管理する

矢印キーで複合コントロール内を移動できるようにします。

「ウィジェットでroving tabindexを管理する」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。

ウィジェット全体を1か所で停止する

ツールバーやラジオボタングループでは、Tabで各項目ではなくウィジェットに1回だけ到達するようにします。これを実現するパターンがroving tabindexです。

基本的な考え方

一度にtabindex="0"を持つ項目は1つだけにします。それ以外の項目にはtabindex="-1"を設定し、Tabでグループ内の1か所から入れるようにします。

初期設定

読み込み時に、最初の項目または選択中の項目へtabindex="0"を設定し、それ以外にはtabindex="-1"を設定します。これがグループの待機状態です。

<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>

矢印キーで内部を移動する

フォーカスがグループ内に入ったら、Tabではなく矢印キーで項目間を移動します。Tabではウィジェット全体から抜けます。

rovingの手順

矢印キーが押されたら、2つの処理を行います。以前の項目を-1にし、新しい項目を0にしてから、新しい項目でfocus()を呼び出します。🧭

old.tabIndex = -1;
next.tabIndex = 0;
next.focus();

0を1つだけにする理由

単一のtabindex="0"を維持すると、Tabは常にユーザーが最後に使った項目へ移動するため、ウィジェットに戻る操作が自然になります。

APGのパターンに合わせる

ARIA Authoring Practices Guideでは、各ウィジェットに必要なキーが正確に定められています。独自のものを考えず、指定されたキーボード操作の対応表に従ってください。

循環移動は任意

多くのウィジェットでは矢印キーによる移動が循環します。最後の項目で右矢印キーを押すと、最初の項目に戻る仕組みです。パターンを循環させるべきかどうかは、APGで確認してください。

Home と End も追加

複合ウィジェットでは、最初と最後の項目に移動するためにHome と Endを追加することがよくあります。小さな工夫ですが、ナビゲーションが速くなります。

roving tabindex と aria-activedescendant

roving tabindex は実際の DOM フォーカスを移動させます。もう一つの方法である aria-activedescendant では、コンテナーにフォーカスを置いたまま、仮想的なアクティブ項目を指し示します。

一連の流れ全体をテストする

Tab で中に入り、すべての項目を矢印キーで移動し、Tab で外に出ます。その後もう一度 Tab で入り、フォーカスが最後に使用した項目に戻ることを確認してください。

クイックチェック

roving tabindex を使うツールバーでは、どの時点でも tabindex="0" になっている項目はいくつありますか？

まとめ

roving tabindexをマスターしました。1つの項目を 0、残りを -1 に設定し、矢印キーで 0 を項目間で移動させ、Tab でウィジェット全体を通過します。🚀

よくある質問

「ウィジェットでroving tabindexを管理する」レッスンは無料ですか？

はい。「ウィジェットでroving tabindexを管理する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。

「ウィジェットでroving tabindexを管理する」で何を学びますか？

矢印キーで複合コントロール内を移動できるようにします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Web Accessibility Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「ウィジェットでroving tabindexを管理する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このWeb Accessibility Academyレッスンでコードを書いて実行できますか？

はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. tabindex 0、-1、そして正の値は使わない
  2. アクション後にフォーカスを移動する
  3. レイヤーを閉じたときにフォーカスを戻す
  4. ウィジェットでroving tabindexを管理する
← Web Accessibility Academyに戻る