SWELLのキーボード操作を調べる｜Tabキーで本文に着くまでを実測する

2026.09.202026.10.31

Tabキーの実際の移動先は、リンクやボタンのDOM順に加え、tabindex、非表示状態、無効化、ブラウザーの設定などで変わります。

querySelectorAllで集めた要素数を、そのままTab回数として扱うことはできません。

以前掲載していた112個・本文まで50回という値は、候補要素の集計と実際のキー操作を混同していたため撤回しました。

このページでは、実操作と候補一覧を分けて確認します。

最初に実際のTab操作を記録する

ログアウトした公開ページを開き、URL・WordPressとSWELLの版・ブラウザー・画面幅・メニューの開閉状態を控えます。

PC幅とスマホ相当の幅では別々に記録してください。

開発者ツールからTabを押し始めるとページ以外へ移動するため、ページへフォーカスを戻してから始めます。

Tabで次へ、Shift＋Tabで前へ移動し、フォーカスが見える要素の名前を順に記録します。

リンクはEnter、ボタンはEnterとSpaceで操作します。

本文へ進むスキップリンクがあれば、見た目のスクロールだけでなく次のTabが本文側へ移るかも確認してください。

メニューを閉じた状態、開いた状態、Escapeで閉じた状態を分けて確認します。

閉じたメニューへフォーカスが入る、閉じたあと元のボタンへ戻れないなど、再現できた操作を記録します。

サイト全体で一律に発生すると決めつけないでください。

記録は「押したキー・移動先・結果」を1操作ずつ残す

確認する部品をメニュー、検索、本文リンク、目次、フォームなどに分けます。

各部品で「開始位置」「押したキー」「移動先」「枠線が見えるか」「操作できたか」「閉じた後の戻り先」を記録すると、修正前後を比較できます。

確認していない部品は未確認のまま残します。

例えば「閉じたメニューのボタンにフォーカス → Enter → メニューが開く → Tabで項目へ移動 → 閉じる操作 → 元のボタンへ戻る」という流れを記録します。

これは記録形式の例で、このページでSWELLの実動作を測った結果ではありません。

フォームは検証用の送信先で確認し、本番への意図しない送信を避けます。

モーダルの内部でTabが循環すること自体は、不具合とは限りません。

キーボードで閉じて外へ戻れるかを確認します。

抜け出す手段が分からない、または操作できない状態を優先して調べます。

W3Cのキーボードトラップ解説も参照してください。

開発者ツールで候補の属性を確認する

次のJavaScriptは、調べたい公開ページの開発者ツールのコンソールに一度実行します。

投稿本文やfunctions.phpへ貼るコードではありません。

DOMを書き換えず、候補の属性を表に出力します。

解除用コードは不要です。

(() => {
  const selector = 'a[href],button,input,select,textarea,summary,[tabindex]';
  const candidates = [...document.querySelectorAll(selector)];
  console.table(candidates.map((el, index) => ({
    DOM位置: index + 1,
    要素: el.tagName.toLowerCase(),
    名前: (el.getAttribute('aria-label') || el.textContent || '').trim().slice(0, 60),
    tabindex: el.tabIndex,
    disabled: el.matches(':disabled'),
    inert内: Boolean(el.closest('[inert]')),
    描画領域あり: el.getClientRects().length > 0,
    visibility: getComputedStyle(el).visibility
  })));
})();

表の「名前」はaria-labelまたはテキストから取った調査用の目印です。

label要素やaria-labelledbyなどを含むアクセシブルな名前の計算ではなく、空欄でも直ちに名前がないとは判断できません。

ブラウザーのアクセシビリティ情報も確認してください。

これは候補一覧であり、Tab順や回数を算出しません。

ラジオボタンのグループ、閉じたdetails、iframeやShadow DOM、祖先のスタイルなどは別途確認が必要です。

tabindexが正の要素はDOM順より前に移動する場合があり、負の値は通常のTab移動から外れます。