Tabキーの実際の移動先は、リンクやボタンのDOM順に加え、tabindex、非表示状態、無効化、ブラウザーの設定などで変わります。querySelectorAllで集めた要素数を、そのままTab回数として扱うことはできません。
以前掲載していた112個・本文まで50回という値は、候補要素の集計と実際のキー操作を混同していたため撤回しました。このページでは、実操作と候補一覧を分けて確認します。
最初に実際のTab操作を記録する
ログアウトした公開ページを開き、URL・WordPressとSWELLの版・ブラウザー・画面幅・メニューの開閉状態を控えます。PC幅とスマホ相当の幅では別々に記録してください。開発者ツールからTabを押し始めるとページ以外へ移動するため、ページへフォーカスを戻してから始めます。
Tabで次へ、Shift＋Tabで前へ移動し、フォーカスが見える要素の名前を順に記録します。リンクはEnter、ボタンはEnterとSpaceで操作します。本文へ進むスキップリンクがあれば、見た目のスクロールだけでなく次のTabが本文側へ移るかも確認してください。
メニューを閉じた状態、開いた状態、Escapeで閉じた状態を分けて確認します。閉じたメニューへフォーカスが入る、閉じたあと元のボタンへ戻れないなど、再現できた操作を記録します。サイト全体で一律に発生すると決めつけないでください。
開発者ツールで候補の属性を確認する
次の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
})));
})();これは候補一覧であり、Tab順や回数を算出しません。ラジオボタンのグループ、閉じたdetails、iframeやShadow DOM、祖先のスタイルなどは別途確認が必要です。tabindexが正の要素はDOM順より前に移動する場合があり、負の値は通常のTab移動から外れます。
見えないメニューを診断する
opacity:0だけでは通常Tab移動から外れません。ただし、opacityが0で子リンクが存在するだけでは不具合の証明になりません。祖先のdisplay・visibility・inert、要素のtabindexやdisabledを調べ、実際にTabで入れるかを確かめます。SWELLの版、追加CSS、メニュー拡張によって状態は異なります。
閉じたメニューを修正する場合は、開くと操作できること、Escapeや閉じるボタンで閉じられること、フォーカスが戻ることまでテスト環境で確認します。常時inertを付けると開いたメニューも操作できなくなります。テーマ本体を直接編集せず、追加した処理だけを外せる形にします。
フォーカスの見た目と修正後の確認
枠線を一律に消すCSSは避けます。:focus-visibleはブラウザーがフォーカス表示の必要性を判断する仕組みで、キーボード操作だけに限定されるとは限りません。背景に埋もれない線の色と太さを選び、メニュー・検索・本文リンクで確認します。
修正前と同じURL・幅・メニュー状態で再確認し、操作の順番と不具合が解消した箇所を記録します。要素数が減っただけでは改善と判断しません。追加CSSやスクリプトの場所と変更前の内容を保存し、不具合が出たら追加部分を外して戻します。
本文末の図版で確認した範囲は、2026年10月1日の幅390pxの検証用ページにおけるフォーカス移動です。その図版のWordPress・SWELL・ブラウザーの版は本文に記録していません。SWELLサイト全体のTab回数や、各メニュー・検索・目次の組み合わせごとの操作結果は、この図版では確認していません。
仕様はMDNのtabindexとinertを参照してください。動く部品の見本はSWELLブロック見本集にあります。
