CSS :focus-visibleの使い方【キーボード操作に強いUI】

WordPressオリジナルテーマでボタンやリンクを作るとき、見た目を整えるために outline: none; を入れてしまうと、キーボード操作のユーザーが現在位置を見失いやすくなります。

そこで使いたいのが CSS の :focus-visible です。マウス操作では過剰にフォーカスリングを出さず、キーボード操作など必要な場面で見えるフォーカスを出しやすくなります。

完成イメージ

• Tabキーでリンクやボタンへ移動したときだけ、見やすいリングを表示する
• クリック時に毎回リングが出る違和感を減らす
• 古いブラウザ向けに @supports でフォールバックを書く
• 色はCSS変数で管理し、テーマ全体で再利用する

HTML

<nav class="demo-nav" aria-label="デモナビゲーション">
  <a href="#">記事一覧</a>
  <a href="#">制作メモ</a>
  <button type="button">保存する</button>
</nav>

CSS

:root {
  --color-text: #111827;
  --color-bg: #ffffff;
  --color-border: #d1d5db;
  --color-brand: #0057ff;
  --color-focus: #ffbf1f;
}

.demo-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  background: var(--color-bg);
}

.demo-nav a,
.demo-nav button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fff;
  color: var(--color-text);
  font: inherit;
  text-decoration: none;
}

.demo-nav a:hover,
.demo-nav button:hover {
  border-color: var(--color-brand);
}

.demo-nav a:focus-visible,
.demo-nav button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
  border-color: var(--color-brand);
}

@supports not selector(:focus-visible) {
  .demo-nav a:focus,
  .demo-nav button:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }
}

実装のポイント

WordPressテーマで使う場所

まず入れるべき場所は、ヘッダーナビ、記事カード、検索フォーム、ページネーション、CTAボタンです。特に記事一覧やカテゴリページはリンク数が多いので、Tabキーで一通り操作して確認しておくとテーマの完成度が上がります。

あわせて読みたい

• CSS @layerでWordPressテーマのCSS設計を整理する方法
• CSS subgridの使い方【記事カードの中身を揃える実装例】
• CSSだけで作るボタンデザイン集
• WordPressオリジナルテーマで記事カード一覧を作る方法

参考資料

• MDN :focus-visible CSS pseudo-class
• W3C WAI Technique C45