diff --git a/src/env.d.ts b/src/env.d.ts
index 3d36c0c6..a49df59d 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -5,3 +5,10 @@ declare module '*.astro' {
   const component: AstroComponentFactory;
   export default component;
 }
+
+declare namespace astroHTML.JSX {
+  interface HTMLAttributes {
+    /** @see https://open-ui.org/components/focusgroup.explainer/ */
+    focusgroup?: string;
+  }
+}
diff --git a/src/practices/keyboard-interface/FocusgroupComparisonTable.astro b/src/practices/keyboard-interface/FocusgroupComparisonTable.astro
new file mode 100644
index 00000000..b38699e1
--- /dev/null
+++ b/src/practices/keyboard-interface/FocusgroupComparisonTable.astro
@@ -0,0 +1,171 @@
+---
+/**
+ * Responsive comparison table: Roving tabindex vs aria-activedescendant vs focusgroup.
+ *
+ * - Desktop (md+): standard HTML table
+ * - Mobile (<md): stacked card layout per approach
+ */
+interface Props {
+  locale?: 'en' | 'ja';
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+
+type Row = { aspect: string; roving: string; activedesc: string; focusgroup: string };
+
+const rows: Row[] = isJa
+  ? [
+      { aspect: 'JavaScript の必要性', roving: 'あり', activedesc: 'あり', focusgroup: 'なし' },
+      {
+        aspect: 'Tab ストップ管理',
+        roving: '手動で tabindex を入替え',
+        activedesc: 'コンテナがフォーカスを保持',
+        focusgroup: '自動',
+      },
+      {
+        aspect: '矢印キーの処理',
+        roving: 'カスタム keydown ハンドラ',
+        activedesc: 'カスタム keydown ハンドラ',
+        focusgroup: 'ブラウザ組み込み',
+      },
+      {
+        aspect: 'フォーカス記憶',
+        roving: '手動実装が必要',
+        activedesc: '手動実装が必要',
+        focusgroup: '組み込み（デフォルト動作）',
+      },
+      {
+        aspect: 'ラップ動作',
+        roving: '手動実装が必要',
+        activedesc: '手動実装が必要',
+        focusgroup: 'wrap キーワード',
+      },
+      {
+        aspect: '垂直ナビゲーション',
+        roving: '手動でキー方向を切替',
+        activedesc: '手動でキー方向を切替',
+        focusgroup: 'block キーワード',
+      },
+      {
+        aspect: 'ブラウザサポート',
+        roving: '全ブラウザ',
+        activedesc: '全ブラウザ',
+        focusgroup: 'Chromium 146+（オリジントライアル）',
+      },
+      {
+        aspect: 'スクリーンリーダー対応',
+        roving: '広く対応',
+        activedesc: '対応状況にばらつき',
+        focusgroup: 'ロービング tabindex と同等',
+      },
+    ]
+  : [
+      { aspect: 'JavaScript required', roving: 'Yes', activedesc: 'Yes', focusgroup: 'No' },
+      {
+        aspect: 'Tab stop management',
+        roving: 'Manual tabindex swapping',
+        activedesc: 'Container holds focus',
+        focusgroup: 'Automatic',
+      },
+      {
+        aspect: 'Arrow key handling',
+        roving: 'Custom keydown handler',
+        activedesc: 'Custom keydown handler',
+        focusgroup: 'Built-in',
+      },
+      {
+        aspect: 'Focus memory',
+        roving: 'Must implement manually',
+        activedesc: 'Must implement manually',
+        focusgroup: 'Built-in (default behavior)',
+      },
+      {
+        aspect: 'Wrap behavior',
+        roving: 'Must implement manually',
+        activedesc: 'Must implement manually',
+        focusgroup: 'wrap keyword',
+      },
+      {
+        aspect: 'Vertical navigation',
+        roving: 'Manual key direction switch',
+        activedesc: 'Manual key direction switch',
+        focusgroup: 'block keyword',
+      },
+      {
+        aspect: 'Browser support',
+        roving: 'All browsers',
+        activedesc: 'All browsers',
+        focusgroup: 'Chromium 146+ (origin trial)',
+      },
+      {
+        aspect: 'Screen reader support',
+        roving: 'Widely supported',
+        activedesc: 'Varies',
+        focusgroup: 'Aligned with roving tabindex',
+      },
+    ];
+
+const colHeaders = isJa
+  ? {
+      roving: 'ロービング tabindex（JS）',
+      activedesc: 'aria-activedescendant（JS）',
+      focusgroup: 'focusgroup（HTML）',
+    }
+  : {
+      roving: 'Roving tabindex (JS)',
+      activedesc: 'aria-activedescendant (JS)',
+      focusgroup: 'focusgroup (HTML)',
+    };
+
+const aspectHeader = isJa ? '観点' : 'Aspect';
+---
+
+{/* Desktop: standard table */}
+<div class="hidden overflow-x-auto md:block">
+  <table class="w-full border-collapse text-sm">
+    <thead>
+      <tr class="border-border border-b">
+        <th class="bg-muted py-2 pr-4 text-left font-semibold">{aspectHeader}</th>
+        <th class="bg-muted py-2 pr-4 text-left font-semibold">{colHeaders.roving}</th>
+        <th class="bg-muted py-2 pr-4 text-left font-semibold">{colHeaders.activedesc}</th>
+        <th class="bg-muted py-2 text-left font-semibold">{colHeaders.focusgroup}</th>
+      </tr>
+    </thead>
+    <tbody>
+      {
+        rows.map((row) => (
+          <tr class="border-border border-b">
+            <td class="py-2 pr-4 font-medium">{row.aspect}</td>
+            <td class="py-2 pr-4">{row.roving}</td>
+            <td class="py-2 pr-4">{row.activedesc}</td>
+            <td class="py-2">{row.focusgroup}</td>
+          </tr>
+        ))
+      }
+    </tbody>
+  </table>
+</div>
+
+{/* Mobile: stacked cards per approach */}
+<div class="flex flex-col gap-4 md:hidden">
+  {
+    [
+      { key: 'roving' as const, header: colHeaders.roving },
+      { key: 'activedesc' as const, header: colHeaders.activedesc },
+      { key: 'focusgroup' as const, header: colHeaders.focusgroup },
+    ].map(({ key, header }) => (
+      <div class="rounded-lg border p-4">
+        <h5 class="mb-3 text-sm font-semibold">{header}</h5>
+        <dl class="space-y-2 text-sm">
+          {rows.map((row) => (
+            <div class="flex flex-col">
+              <dt class="text-muted-foreground text-xs font-medium">{row.aspect}</dt>
+              <dd class="mt-0.5">{row[key]}</dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    ))
+  }
+</div>
diff --git a/src/practices/keyboard-interface/FocusgroupDemo.astro b/src/practices/keyboard-interface/FocusgroupDemo.astro
new file mode 100644
index 00000000..08ccda2d
--- /dev/null
+++ b/src/practices/keyboard-interface/FocusgroupDemo.astro
@@ -0,0 +1,229 @@
+---
+/**
+ * Interactive demo for the focusgroup HTML attribute.
+ *
+ * Shows four demos based on the Microsoft Edge focusgroup demos:
+ * 1. No-memory toolbar (focusgroup="toolbar no-memory") — verify token spelling
+ * 2. Basic toolbar (focusgroup="toolbar")
+ * 3. Wrapping toolbar (focusgroup="toolbar wrap")
+ * 4. Vertical toolbar (focusgroup="toolbar block")
+ *
+ * Requires a browser with native focusgroup support (Chromium 146+ origin trial, or 133+ with flag).
+ * A browser support notice is shown dynamically via feature detection.
+ *
+ * @see https://microsoftedge.github.io/Demos/focusgroup/
+ */
+interface Props {
+  locale?: 'en' | 'ja';
+}
+
+const { locale = 'en' } = Astro.props;
+const isJa = locale === 'ja';
+
+const t = {
+  unsupportedTitle: isJa
+    ? 'お使いのブラウザは focusgroup 属性にまだ対応していません。'
+    : 'Your browser does not support the <code>focusgroup</code> attribute yet.',
+  unsupportedDesc: isJa
+    ? '<code>focusgroup</code> 属性は現在、Chromium ベースのブラウザ（Chrome/Edge 146+ オリジントライアル、または 133+ フラグ付き）でサポートされています。以下のデモは意図されたマークアップを示していますが、矢印キーによるナビゲーションにはブラウザのサポートが必要です。'
+    : 'The <code>focusgroup</code> attribute is currently supported in Chromium-based browsers (Chrome/Edge 146+ origin trial, or 133+ with flag). The demos below show the intended markup, but arrow key navigation requires browser support.',
+  supportedTitle: isJa
+    ? 'お使いのブラウザは <code>focusgroup</code> 属性に対応しています！'
+    : 'Your browser supports the <code>focusgroup</code> attribute!',
+  supportedDesc: isJa
+    ? '以下の各デモに Tab キーで移動し、矢印キーでナビゲートしてみてください。ブラウザが自動的にロービング tabindex を処理するため、JavaScript は不要です。'
+    : 'Try tabbing into each demo below and using arrow keys to navigate. Notice how the browser handles roving tabindex automatically — no JavaScript needed.',
+  basicToolbar: isJa ? '基本ツールバー' : 'Basic Toolbar',
+  wrappingToolbar: isJa ? 'ラップツールバー' : 'Wrapping Toolbar',
+  verticalToolbar: isJa ? '垂直ツールバー' : 'Vertical Toolbar',
+  basicDesc: isJa
+    ? 'Tab キーでツールバーに入り、<kbd>&#8592;</kbd> <kbd>&#8594;</kbd> 矢印キーでナビゲートします。もう一度 Tab を押すと離脱します。端でフォーカスが止まります。'
+    : 'Tab to enter the toolbar, then use <kbd>&#8592;</kbd> <kbd>&#8594;</kbd> arrow keys to navigate. Tab again to exit. Focus stops at the edges.',
+  wrapDesc: isJa
+    ? '<kbd>&#8592;</kbd> <kbd>&#8594;</kbd> 矢印キーを使用します。最後から最初へ、またはその逆にフォーカスがラップします。'
+    : 'Use <kbd>&#8592;</kbd> <kbd>&#8594;</kbd> arrow keys. Focus wraps around from last to first and vice versa.',
+  verticalDesc: isJa
+    ? '<kbd>&#8593;</kbd> <kbd>&#8595;</kbd> 矢印キーでナビゲートします。<kbd>&#8592;</kbd> <kbd>&#8594;</kbd> は無効です。<code>block</code> は <code>toolbar</code> のデフォルトのインライン軸を上書きします。'
+    : "Use <kbd>&#8593;</kbd> <kbd>&#8595;</kbd> arrow keys to navigate. <kbd>&#8592;</kbd> <kbd>&#8594;</kbd> do nothing. <code>block</code> overrides <code>toolbar</code>'s default inline axis.",
+  noMemoryToolbar: isJa ? 'No-memory ツールバー' : 'No-memory Toolbar',
+  noMemoryDesc: isJa
+    ? '矢印キーで3番目以降のボタンへ移動してから Tab で離脱し、再度 Tab で戻ります。<code>no-memory</code> が効いていれば常に先頭ボタンにフォーカスが戻ります。記憶されていれば前回のボタンに戻ります。'
+    : 'Move to the 3rd+ button with arrow keys, Tab out, then Tab back in. With <code>no-memory</code>, focus should always return to the first button. If memory is retained, focus returns to the previously focused button.',
+};
+---
+
+<div class="focusgroup-demo space-y-8">
+  {/* Browser support notice — shown dynamically */}
+  <div class="focusgroup-support-notice bg-muted/50 rounded-lg border p-4 text-sm" hidden>
+    <p class="font-semibold"><Fragment set:html={t.unsupportedTitle} /></p>
+    <p class="text-muted-foreground mt-1"><Fragment set:html={t.unsupportedDesc} /></p>
+  </div>
+  <div
+    class="focusgroup-supported-notice rounded-lg border border-green-200 bg-green-50 p-4 text-sm dark:border-green-800 dark:bg-green-950/20"
+    hidden
+  >
+    <p class="font-semibold text-green-800 dark:text-green-200">
+      <Fragment set:html={t.supportedTitle} />
+    </p>
+    <p class="text-muted-foreground mt-1"><Fragment set:html={t.supportedDesc} /></p>
+  </div>
+
+  {/* Demo 1: No-memory toolbar — verify no-memory token spelling */}
+  <figure class="rounded-lg border p-4">
+    <figcaption class="mb-3 text-sm font-semibold">
+      {t.noMemoryToolbar} (<code class="bg-muted rounded px-1 text-xs"
+        >focusgroup="toolbar no-memory"</code
+      >)
+    </figcaption>
+    <div
+      class="flex gap-2"
+      role="toolbar"
+      aria-label="Navigation (focusgroup no-memory demo)"
+      focusgroup="toolbar no-memory"
+    >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Home</button
+      >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >About</button
+      >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Blog</button
+      >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Contact</button
+      >
+    </div>
+    <p class="text-muted-foreground mt-2 text-xs"><Fragment set:html={t.noMemoryDesc} /></p>
+  </figure>
+
+  {/* Demo 2: Basic toolbar */}
+  <figure class="rounded-lg border p-4">
+    <figcaption class="mb-3 text-sm font-semibold">
+      {t.basicToolbar} (<code class="bg-muted rounded px-1 text-xs">focusgroup="toolbar"</code>)
+    </figcaption>
+    <div
+      class="flex gap-2"
+      role="toolbar"
+      aria-label="Text formatting (focusgroup demo)"
+      focusgroup="toolbar"
+    >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Bold</button
+      >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Italic</button
+      >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Underline</button
+      >
+      <button
+        type="button"
+        class="rounded border px-3 py-1.5 text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Strikethrough</button
+      >
+    </div>
+    <p class="text-muted-foreground mt-2 text-xs"><Fragment set:html={t.basicDesc} /></p>
+  </figure>
+
+  {/* Demo 3: Wrapping toolbar */}
+  <figure class="rounded-lg border p-4">
+    <figcaption class="mb-3 text-sm font-semibold">
+      {t.wrappingToolbar} (<code class="bg-muted rounded px-1 text-xs"
+        >focusgroup="toolbar wrap"</code
+      >)
+    </figcaption>
+    <div
+      class="flex gap-2"
+      role="toolbar"
+      aria-label="Color palette (focusgroup wrap demo)"
+      focusgroup="toolbar wrap"
+    >
+      <button
+        type="button"
+        class="h-8 w-8 rounded-full border-2 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        style="background-color: #ef4444;"
+        aria-label="Red"></button>
+      <button
+        type="button"
+        class="h-8 w-8 rounded-full border-2 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        style="background-color: #f97316;"
+        aria-label="Orange"></button>
+      <button
+        type="button"
+        class="h-8 w-8 rounded-full border-2 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        style="background-color: #eab308;"
+        aria-label="Yellow"></button>
+      <button
+        type="button"
+        class="h-8 w-8 rounded-full border-2 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        style="background-color: #22c55e;"
+        aria-label="Green"></button>
+      <button
+        type="button"
+        class="h-8 w-8 rounded-full border-2 transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        style="background-color: #3b82f6;"
+        aria-label="Blue"></button>
+    </div>
+    <p class="text-muted-foreground mt-2 text-xs"><Fragment set:html={t.wrapDesc} /></p>
+  </figure>
+
+  {/* Demo 4: Vertical toolbar */}
+  <figure class="rounded-lg border p-4">
+    <figcaption class="mb-3 text-sm font-semibold">
+      {t.verticalToolbar} (<code class="bg-muted rounded px-1 text-xs"
+        >focusgroup="toolbar block"</code
+      >)
+    </figcaption>
+    <div
+      class="flex w-fit flex-col gap-1"
+      role="toolbar"
+      aria-label="Document actions (focusgroup vertical demo)"
+      aria-orientation="vertical"
+      focusgroup="toolbar block"
+    >
+      <button
+        type="button"
+        class="rounded border px-4 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Cut</button
+      >
+      <button
+        type="button"
+        class="rounded border px-4 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Copy</button
+      >
+      <button
+        type="button"
+        class="rounded border px-4 py-1.5 text-left text-sm transition-colors focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none"
+        >Paste</button
+      >
+    </div>
+    <p class="text-muted-foreground mt-2 text-xs"><Fragment set:html={t.verticalDesc} /></p>
+  </figure>
+</div>
+
+<script>
+  const supported = 'focusgroup' in document.createElement('div');
+  const noticeUnsupported = document.querySelector('.focusgroup-support-notice');
+  const noticeSupported = document.querySelector('.focusgroup-supported-notice');
+
+  if (supported) {
+    noticeSupported?.removeAttribute('hidden');
+  } else {
+    noticeUnsupported?.removeAttribute('hidden');
+  }
+</script>
diff --git a/src/practices/keyboard-interface/content.ja.mdx b/src/practices/keyboard-interface/content.ja.mdx
index 6b687ef0..c94f0263 100644
--- a/src/practices/keyboard-interface/content.ja.mdx
+++ b/src/practices/keyboard-interface/content.ja.mdx
@@ -1,4 +1,6 @@
 import CodeFigure from '@/components/ui/CodeFigure.astro';
+import FocusgroupDemo from './FocusgroupDemo.astro';
+import FocusgroupComparisonTable from './FocusgroupComparisonTable.astro';
 
 ## 概要
 
@@ -303,6 +305,157 @@ class ActiveDescendant {
 </div>
 ```
 
+### focusgroup 属性（新しい標準仕様）
+
+`focusgroup` HTML属性は、**JavaScriptなしで矢印キーナビゲーションを宣言的に実現する**新しいWeb標準です。従来、複合ウィジェット（ツールバー、タブリスト、グリッドなど）のキーボードナビゲーションを実装するには、ロービング tabindex や `aria-activedescendant` を管理するための大量のJavaScriptが必要でした。`focusgroup` 属性は、これをブラウザにネイティブで処理させることを目指しています。
+
+#### 動作の仕組み
+
+コンテナ要素に `focusgroup` を追加すると、ブラウザが以下を自動的に行います：
+
+1. **フォーカス可能な子孫要素を1つのTabストップに集約** — 複数の `<button>` があっても、Tabで到達できるのは1つだけ
+2. **子要素間の矢印キーナビゲーションを有効化**
+3. **ロービング tabindex を自動管理** — ブラウザが内部的に `tabindex` 値を制御
+4. **最後にフォーカスした要素を記憶** — TabでグループToリーブし戻ると、前回フォーカスした要素に戻る
+
+<CodeFigure
+  code={`<!-- 従来: 手動ロービング tabindex（JavaScript が必要） -->
+<div role="toolbar" aria-label="書式設定">
+  <button tabindex="0">太字</button>
+  <button tabindex="-1">斜体</button>
+  <button tabindex="-1">下線</button>
+</div>
+
+<!-- focusgroup: 宣言的（JavaScript 不要） -->
+<div role="toolbar" aria-label="書式設定" focusgroup="toolbar">
+  <button>太字</button>
+  <button>斜体</button>
+  <button>下線</button>
+</div>`}
+  lang="html"
+  caption="focusgroup 属性は手動のロービング tabindex 管理を置き換えます。ブラウザがボタンを1つの Tab ストップに自動的に集約し、矢印キーナビゲーションを有効にします。"
+/>
+
+#### 利用可能な値
+
+`focusgroup` 属性はスペース区切りのトークンでナビゲーション動作を制御します：
+
+| 値         | 動作                                                                             |
+| ---------- | -------------------------------------------------------------------------------- |
+| `toolbar`  | focusgroupを作成し、デフォルトでインライン（水平）方向の矢印キーナビゲーションを有効化 |
+| `inline`   | インライン軸（LTRでは左右）の矢印キーのみでナビゲート                            |
+| `block`    | ブロック軸（上下）の矢印キーのみでナビゲート。`toolbar` のデフォルトのinlineを上書き |
+| `wrap`     | 最後の項目から最初の項目へ（またはその逆に）フォーカスがラップする                |
+| `no-memory` | Tabは常に先頭から入り、フォーカス履歴を無視する                                    |
+| `extend`   | ネストされたfocusgroupを親のfocusgroupに統合し、1つの論理グループとして機能する   |
+| `none`     | 祖先のfocusgroupからサブツリーを除外する                                         |
+
+これらの値を組み合わせることができます：
+
+<CodeFigure
+  code={`<!-- ラップする水平ツールバー -->
+<div role="toolbar" focusgroup="toolbar wrap">
+  <button>切り取り</button>
+  <button>コピー</button>
+  <button>貼り付け</button>
+</div>
+
+<!-- 垂直ツールバー -->
+<div role="toolbar" focusgroup="toolbar block"
+     aria-orientation="vertical">
+  <button>ファイル</button>
+  <button>編集</button>
+  <button>表示</button>
+</div>`}
+  lang="html"
+  caption="異なるナビゲーションパターンに対する focusgroup 値の組み合わせ。"
+/>
+
+#### ネストされた focusgroup と extend
+
+focusgroupがネストされている場合、デフォルトではそれぞれが独立したナビゲーションスコープを作成します。`extend` キーワードを使うと、子のfocusgroupが親に統合され、1つの論理グループとして機能します：
+
+<CodeFigure
+  code={`<!-- 独立したネスト focusgroup -->
+<div focusgroup="toolbar" aria-label="メインツールバー">
+  <button>保存</button>
+  <button>印刷</button>
+  <div role="group" focusgroup="toolbar" tabindex="0"
+       aria-label="テキスト書式設定">
+    <!-- 別スコープ: Tab で入り、矢印キーで内部を移動 -->
+    <button>太字</button>
+    <button>斜体</button>
+  </div>
+  <button>閉じる</button>
+</div>
+
+<!-- extend で統合 -->
+<div focusgroup="toolbar" aria-label="フラットツールバー">
+  <button>A1</button>
+  <div focusgroup="extend">
+    <!-- 親と同じスコープ: A1 → B1 → B2 → A2 -->
+    <button>B1</button>
+    <button>B2</button>
+  </div>
+  <button>A2</button>
+</div>`}
+  lang="html"
+  caption="extend なしではネストされた focusgroup は独立した Tab ストップになります。extend を使うと子の項目が親の矢印キーナビゲーションに統合されます。"
+/>
+
+#### Shadow DOM との連携
+
+`focusgroup` 属性はデフォルトで Shadow DOM 境界を越えて動作します。シャドウホストに宣言されたfocusgroupは、そのホストのシャドウツリー内のフォーカス可能な要素を含みます。シャドウツリー内で除外したい場合は `focusgroup="none"` を使用します。
+
+#### キーの競合処理
+
+focusgroup内に `<input>` や `<textarea>` のようなフォーカス可能な子要素がある場合、矢印キーはインタラクティブ要素のネイティブな用途（カーソル移動など）に使用されます。Tab または Shift+Tab でfocusgroupナビゲーションに戻ることができます。
+
+#### インタラクティブデモ
+
+<FocusgroupDemo locale="ja" />
+
+#### JavaScript ベースのアプローチとの比較
+
+<FocusgroupComparisonTable locale="ja" />
+
+#### ブラウザサポートとプログレッシブエンハンスメント
+
+2026年初頭時点で、スコープ版の `focusgroup` 属性はChromiumベースのブラウザ（Chrome/Edge 146+）でオリジントライアルとして利用可能です。初期のスコープなしプロトタイプは Chrome 133 でフラグ付きで提供されていました。Firefox や Safari ではまだサポートされていません。
+
+**推奨アプローチ**: 既存のJavaScriptベースのキーボードナビゲーションと併用して、`focusgroup` をプログレッシブエンハンスメントとして使用します。これにより、サポートされたブラウザではネイティブ動作が得られ、それ以外はJavaScript実装にフォールバックします：
+
+<CodeFigure
+  code={`<div
+  role="toolbar"
+  aria-label="書式設定"
+  focusgroup="toolbar wrap"
+>
+  <button>太字</button>
+  <button>斜体</button>
+  <button>下線</button>
+</div>
+
+<script>
+  // focusgroup がサポートされていない場合のみ
+  // JS ベースのロービング tabindex を追加
+  if (!('focusgroup' in document.createElement('div'))) {
+    initRovingTabIndex(toolbar, 'button');
+  }
+</script>`}
+  lang="html"
+  caption="プログレッシブエンハンスメント: サポートされている場合は focusgroup を使用し、それ以外は JavaScript ベースのロービング tabindex にフォールバック。"
+/>
+
+#### リソース
+
+- [Request for developer feedback: focusgroup — Chrome for Developers](https://developer.chrome.com/blog/focusgroup-rfc)
+- [Scoped Focusgroup Explainer — Open UI](https://open-ui.org/components/scoped-focusgroup.explainer/)
+- [focusgroup Explainer (original) — Open UI](https://open-ui.org/components/focusgroup.explainer/)
+- [WHATWG HTML Issue #11641 — Focusgroup proposal](https://github.com/whatwg/html/issues/11641)
+- [Focusgroup Explainer — Microsoft Edge](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md)
+- [Focusgroup Interactive Demos — Microsoft Edge](https://microsoftedge.github.io/Demos/focusgroup/)
+
 ### モーダル用のフォーカストラップ
 
 モーダルダイアログ内にフォーカスを閉じ込めます。モーダルを開くとき：
diff --git a/src/practices/keyboard-interface/content.mdx b/src/practices/keyboard-interface/content.mdx
index 8c3c89d8..1dbf5e12 100644
--- a/src/practices/keyboard-interface/content.mdx
+++ b/src/practices/keyboard-interface/content.mdx
@@ -1,4 +1,6 @@
 import CodeFigure from '@/components/ui/CodeFigure.astro';
+import FocusgroupDemo from './FocusgroupDemo.astro';
+import FocusgroupComparisonTable from './FocusgroupComparisonTable.astro';
 
 ## Overview
 
@@ -303,6 +305,157 @@ class ActiveDescendant {
 </div>
 ```
 
+### The focusgroup Attribute (Emerging Standard)
+
+The `focusgroup` HTML attribute is an emerging web standard that enables **declarative arrow-key navigation** without any JavaScript. Traditionally, implementing keyboard navigation for composite widgets (toolbars, tablists, grids, etc.) requires extensive JavaScript to manage roving tabindex or `aria-activedescendant`. The `focusgroup` attribute aims to let browsers handle this natively.
+
+#### How It Works
+
+Adding `focusgroup` to a container element tells the browser to:
+
+1. **Collapse all focusable descendants into a single Tab stop** — even if multiple `<button>` elements are present, only one is reachable via Tab
+2. **Enable arrow-key navigation** between focusable children within the group
+3. **Automatically manage roving tabindex** — the browser handles `tabindex` values internally
+4. **Remember the last-focused item** — when a user Tabs away and back, focus returns to the previously focused item
+
+<CodeFigure
+  code={`<!-- Before: Manual roving tabindex (JavaScript required) -->
+<div role="toolbar" aria-label="Formatting">
+  <button tabindex="0">Bold</button>
+  <button tabindex="-1">Italic</button>
+  <button tabindex="-1">Underline</button>
+</div>
+
+<!-- After: Declarative focusgroup (no JavaScript needed) -->
+<div role="toolbar" aria-label="Formatting" focusgroup="toolbar">
+  <button>Bold</button>
+  <button>Italic</button>
+  <button>Underline</button>
+</div>`}
+  lang="html"
+  caption="The focusgroup attribute replaces manual roving tabindex management. The browser automatically collapses the buttons into a single Tab stop and enables arrow-key navigation."
+/>
+
+#### Available Values
+
+The `focusgroup` attribute accepts space-separated tokens to control navigation behavior:
+
+| Value      | Behavior                                                                             |
+| ---------- | ------------------------------------------------------------------------------------ |
+| `toolbar`  | Creates a focusgroup; defaults to inline (horizontal) arrow-key navigation           |
+| `inline`   | Only inline-axis (left/right in LTR) arrow keys navigate                             |
+| `block`    | Only block-axis (up/down) arrow keys navigate; overrides `toolbar`'s default inline  |
+| `wrap`     | Focus wraps from last item to first (and vice versa) instead of stopping at the edge |
+| `no-memory` | Tab always enters at the start, ignoring focus history                              |
+| `extend`   | Joins a nested focusgroup into its ancestor's focusgroup as a single logical group   |
+| `none`     | Opts a subtree out of an ancestor's focusgroup                                       |
+
+These values can be combined:
+
+<CodeFigure
+  code={`<!-- Horizontal toolbar that wraps -->
+<div role="toolbar" focusgroup="toolbar wrap">
+  <button>Cut</button>
+  <button>Copy</button>
+  <button>Paste</button>
+</div>
+
+<!-- Vertical toolbar -->
+<div role="toolbar" focusgroup="toolbar block"
+     aria-orientation="vertical">
+  <button>File</button>
+  <button>Edit</button>
+  <button>View</button>
+</div>`}
+  lang="html"
+  caption="Combining focusgroup values for different navigation patterns."
+/>
+
+#### Nested Focusgroups and extend
+
+When focusgroups are nested, each creates an independent navigation scope by default. The `extend` keyword merges a child focusgroup into its parent, so they act as a single logical group:
+
+<CodeFigure
+  code={`<!-- Independent nested focusgroups -->
+<div focusgroup="toolbar" aria-label="Main toolbar">
+  <button>Save</button>
+  <button>Print</button>
+  <div role="group" focusgroup="toolbar" tabindex="0"
+       aria-label="Text formatting">
+    <!-- Separate scope: Tab to enter, arrows within -->
+    <button>Bold</button>
+    <button>Italic</button>
+  </div>
+  <button>Close</button>
+</div>
+
+<!-- Merged with extend -->
+<div focusgroup="toolbar" aria-label="Flat toolbar">
+  <button>A1</button>
+  <div focusgroup="extend">
+    <!-- Same scope as parent: A1 → B1 → B2 → A2 -->
+    <button>B1</button>
+    <button>B2</button>
+  </div>
+  <button>A2</button>
+</div>`}
+  lang="html"
+  caption="Without extend, nested focusgroups are independent Tab stops. With extend, child items merge into the parent's arrow-key navigation."
+/>
+
+#### Shadow DOM Integration
+
+The `focusgroup` attribute works across Shadow DOM boundaries by default. A focusgroup declared on a shadow host includes focusable elements inside that host's shadow tree. You can opt out with `focusgroup="none"` inside the shadow tree if needed.
+
+#### Key Conflict Handling
+
+When focusable children like `<input>` or `<textarea>` exist inside a focusgroup, arrow keys are consumed by the interactive element for their native purpose (e.g., cursor movement). Tab or Shift+Tab provides an escape mechanism to re-enter the focusgroup navigation.
+
+#### Interactive Demo
+
+<FocusgroupDemo />
+
+#### Comparison with JavaScript-based Approaches
+
+<FocusgroupComparisonTable locale="en" />
+
+#### Browser Support and Progressive Enhancement
+
+As of early 2026, the scoped `focusgroup` attribute is available in Chromium-based browsers (Chrome/Edge 146+) as an origin trial. An earlier unscoped prototype shipped behind a flag in Chrome 133. It is not yet supported in Firefox or Safari.
+
+**Recommended approach**: Use `focusgroup` as a progressive enhancement alongside existing JavaScript-based keyboard navigation. This way, supported browsers get the native behavior while others fall back to your JavaScript implementation:
+
+<CodeFigure
+  code={`<div
+  role="toolbar"
+  aria-label="Formatting"
+  focusgroup="toolbar wrap"
+>
+  <button>Bold</button>
+  <button>Italic</button>
+  <button>Underline</button>
+</div>
+
+<script>
+  // Only add JS-based roving tabindex if focusgroup is not supported
+  if (!('focusgroup' in document.createElement('div'))) {
+    // Fallback: initialize roving tabindex via JavaScript
+    initRovingTabIndex(toolbar, 'button');
+  }
+</script>`}
+  lang="html"
+  caption="Progressive enhancement: use focusgroup where supported, fall back to JavaScript-based roving tabindex elsewhere."
+/>
+
+#### Resources
+
+- [Request for developer feedback: focusgroup — Chrome for Developers](https://developer.chrome.com/blog/focusgroup-rfc)
+- [Scoped Focusgroup Explainer — Open UI](https://open-ui.org/components/scoped-focusgroup.explainer/)
+- [focusgroup Explainer (original) — Open UI](https://open-ui.org/components/focusgroup.explainer/)
+- [WHATWG HTML Issue #11641 — Focusgroup proposal](https://github.com/whatwg/html/issues/11641)
+- [Focusgroup Explainer — Microsoft Edge](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Focusgroup/explainer.md)
+- [Focusgroup Interactive Demos — Microsoft Edge](https://microsoftedge.github.io/Demos/focusgroup/)
+
 ### Focus Trap for Modals
 
 Keep focus within modal dialogs. On modal open: