0Pricing
Web Accessibility Academy · レッスン

論理的なTab順序はコンテンツに従う

読む順序に沿ってフォーカスが移動するようにします。

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

フォーカスは経路に沿って移動する

Tabを押すと、フォーカスはページ上の決まった経路を移動します。この経路がタブ順序です。正しく設定すると、ユーザーが現在地を把握しやすくなります。🧭

DOMに従う

デフォルトでは、タブ順序はソース順、つまりHTML内の要素を上から下へ並べた順序に一致します。画面上での見た目の順序とは限りません。

読み上げる順序を一致させる

フォーカスが、人々がページを読む順序と同じように移動することを目指してください。最初にヘッダー、次にメインコンテンツ、最後にフッターという順序が自然です。

CSSは実際と異なる見た目を作れる

flexbox orderなどのレイアウト機能は、ボックスを視覚的に移動しますが、DOMは変更しません。フォーカスはソース順に従うため、見た目と一致しなくなることがあります。

.cards { display: flex; }
.featured { order: -1; }

並べ替えの罠

CSSで要素を並べ替えると、キーボードユーザーが予期せず前後へ移動してしまうことがあります。解決策は、HTMLの順序を見た目の順序に合わせることです。

正のtabindexは絶対に使わない

3のような正のtabindexを指定すると、コントロールが順序の先頭へ移動します。ほとんどの場合、分かりにくく保守しにくい状態を作るだけです。

<button tabindex="3">Avoid this</button>

ソース順こそが本当の解決策

tabindexでつぎはぎするのではなく、要素をマークアップ内の正しい順序に配置してください。ソース順が適切なら、特別な属性は必要ありません。

非表示の要素は順序から外れる

display noneの要素はタブ順序から完全に外れます。再び表示すると、DOM上の位置に静かに戻ります。

動的な挿入に注意する

JavaScriptで新しいコントロールを挿入すると、appendした場所に配置されます。順序が論理的に保たれるよう、適切な位置に挿入してください。

モーダルには注意が必要

ページ末尾に追加したダイアログでは、フォーカスが遠く離れた場所に取り残されることがあります。適切なフォーカス管理により、開いたときにユーザーをモーダル内へ移動させてください。

Tabでテストする

確認方法は簡単です。先頭からTabで移動し、画面上を予期せず飛び越えることなく、フォーカスが自然な順序で移動することを確認してください。

クイックチェック

デフォルトのタブ順序を実際に決めているものを選んでください。

振り返り：論理的なタブ順序

人々が読む順序に沿ってフォーカスを移動させます。ソース順を視覚的なレイアウトに合わせ、正のtabindexを避け、結果をTabでテストしてください。✅

よくある質問

「論理的なTab順序はコンテンツに従う」レッスンは無料ですか？

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

「論理的なTab順序はコンテンツに従う」で何を学びますか？

読む順序に沿ってフォーカスが移動するようにします。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「論理的なTab順序はコンテンツに従う」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Tab、Shift+Tab、Enter、Space：基本キー
  2. フォーカスを見えるようにする：アウトラインを隠さない
  3. 論理的なTab順序はコンテンツに従う
  4. キーボードトラップを見つける
← Web Accessibility Academyに戻る