diff --git a/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-manual.html b/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-manual.html
index 7588b13b9dd0f..0ccb6226eafce 100644
--- a/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-manual.html
+++ b/third_party/aria-practices/src/content/patterns/tabs/examples/tabs-manual.html
@@ -2,53 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Example of Tabs with Manual Activation</title>
 
-    <!-- Core JS and CSS shared by all examples -->
-    <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
-    <link rel="stylesheet" href="../../../shared/css/core.css">
-    <script src="../../../shared/js/examples.js"></script>
-    <script src="../../../shared/js/highlight.pack.js"></script>
-    <script src="../../../shared/js/app.js"></script>
-    <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../../shared/js/skipto.js"></script>
-
     <!-- JS and CSS for this example -->
     <link href="css/tabs.css" rel="stylesheet">
     <script src="js/tabs-manual.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/130">Related Issues</a></li>
-        <li><a href="../tabs-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Example of Tabs with Manual Activation</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-tabs.svg">
-        <p>
-          The below example section demonstrates a tabs widget that implements the <a href="../tabs-pattern.html">Tabs Pattern</a>.
-          In this example, a panel is displayed when users activate its tab with either <kbd>Space</kbd>, <kbd>Enter</kbd>, or a mouse click.
-          So, for keyboard users, activating a tab requires two steps: 1) focus the tab, and 2) activate the tab.
-          This two-step process is referred to as manual activation.
-          Manual activation of tabs is recommended unless panels can be displayed instantly, i.e., all the panel content is present in the DOM.
-          For additional guidance, see <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_selection_follows_focus">Deciding When to Make Selection Automatically Follow Focus</a>.
-        </p>
-        <p>Similar examples include:</p>
-        <ul>
-          <li><a href="tabs-automatic.html">Example of Tabs with Automatic Activation</a>: A tabs widget where tabs are automatically activated and their panel is displayed when they receive focus.</li>
-        </ul>
-      </section>
-
-      <section>
-        <div class="example-header">
-          <h2 id="ex_label">Example</h2>
-        </div>
-        <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
           <div class="tabs">
             <h3 id="tablist-1">Danish Composers</h3>
@@ -102,268 +62,5 @@
             </div>
           </div>
         </div>
-        <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-      </section>
-
-      <section>
-        <h2>Accessibility Features</h2>
-        <ul>
-          <li>
-            To ensure people who rely on browser or operating system high contrast settings can both distinguish the active (selected) tab from other tabs and perceive keyboard focus:
-            <ul>
-              <li>
-                The active tab has a 2 pixel border on its left and right sides and a 4 pixel border on top, while the names of inactive tabs have 1 pixel borders.
-                The active tab is also 4 pixels higher than the inactive tabs.
-              </li>
-              <li>
-                The focus ring is drawn with a CSS border on a child <code>span</code> element of the tab element.
-                This focus span is separated from the tab border by 2 pixels of space to ensure focus and selection are separately perceivable.
-                Note that when a tab element is focused, the outline of the tab element itself is set to 0 so that only one focus ring is displayed.
-              </li>
-              <li>
-                Because transparent borders are visible on some systems when high contrast settings are enabled, only the focused <code>span</code> element has a visible border.
-                When <code>span</code> elements are not indicating focus, they have a 0-width border and additional padding equal in width to the border that is used to indicate focus.
-              </li>
-            </ul>
-          </li>
-          <li>
-            Note that since the first element in every <code>tabpanel</code> is a focusable element (i.e., a link), the <code>tabpanel</code> is <strong>not</strong> included in the page <kbd>Tab</kbd> sequence.
-            To make it easy for screen reader users to navigate from a tab to the beginning of content in the active <code>tabpanel</code>, it is recommended that all <code>tabpanel</code> elements in a tab set are focusable if there are any panels in the set that contain content where the first element in the panel is not focusable.
-          </li>
-          <li>
-             To ensure the tab content remains visible when the screen is magnified, the width of the tabs and tab panels are defined using a percentage of the screen width.  As the page is magnified the height of the tab increases and the tab content re-flows to the new dimensions of the tab.
-         </li>
-        </ul>
-      </section>
-
-      <section>
-        <h2 id="kbd_label">Keyboard Support</h2>
-        <table aria-labelledby="kbd_label" class="def">
-          <thead>
-            <tr>
-              <th>Key</th>
-              <th>Function</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="key-tab">
-              <th><kbd>Tab</kbd></th>
-              <td>
-                <ul>
-                  <li>When focus moves into the tab list, places focus on the active <code>tab</code> element.</li>
-                  <li>When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the <code>a</code> element in <code>tabpanel</code>.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-enter-or-space">
-              <th><kbd>Enter</kbd><br><kbd>Space</kbd></th>
-              <td>When a tab has focus, activates the tab, causing its associated panel to be displayed.</td>
-            </tr>
-            <tr data-test-id="key-right-arrow">
-              <th><kbd>Right Arrow</kbd></th>
-              <td>
-                When a tab has focus:
-                <ul>
-                  <li>Moves focus to the next tab.</li>
-                  <li>If focus is on the last tab, moves focus to the first tab.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-left-arrow">
-              <th><kbd>Left Arrow</kbd></th>
-              <td>
-                When a tab has focus:
-                <ul>
-                  <li>Moves focus to the previous tab.</li>
-                  <li>If focus is on the first tab, moves focus to the last tab.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-home">
-              <th><kbd>Home</kbd></th>
-              <td>When a tab has focus, moves focus to the first tab.</td>
-            </tr>
-            <tr data-test-id="key-end">
-              <th><kbd>End</kbd></th>
-              <td>When a tab has focus, moves focus to the last tab.</td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-        <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
-        <table aria-labelledby="rps_label" class="data attributes">
-          <thead>
-            <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="tablist-role">
-              <th scope="row">
-                <code>tablist</code>
-              </th>
-              <td></td>
-              <td>
-                <code>div</code>
-              </td>
-              <td>Indicates that the element serves as a container for a set of tabs.</td>
-            </tr>
-            <tr data-test-id="tablist-aria-labelledby">
-              <td></td>
-              <th scope="row">
-                <code>aria-labelledby="ID_REFERENCE"</code>
-              </th>
-              <td>
-                <code>div</code>
-              </td>
-              <td>Provides a label that describes the purpose of the set of tabs.</td>
-            </tr>
-            <tr data-test-id="tab-role">
-              <th scope="row">
-                <code>tab</code>
-              </th>
-              <td></td>
-              <td>
-                <code>button</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Indicates the element serves as a tab control.</li>
-                  <li>Provides a title for its associated <code>tabpanel</code>.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="tab-aria-selected">
-              <td></td>
-              <th scope="row">
-                <code>aria-selected="true"</code>
-              </th>
-              <td>
-                <code>button</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Indicates the tab control is activated and its associated panel is displayed.</li>
-                  <li>Set when a user activates a tab.</li>
-                  <li>Does not change when focus moves in the <code>tablist</code>.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="tab-aria-selected">
-              <td></td>
-              <th scope="row">
-                <code>aria-selected="false"</code>
-              </th>
-              <td>
-                <code>button</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Indicates the tab control is not active and its associated panel is <strong>NOT</strong> displayed.</li>
-                  <li>Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="tab-tabindex">
-              <td></td>
-              <th scope="row">
-                <code>tabindex="-1"</code>
-              </th>
-              <td>
-                <code>button</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Removes the element from the page <kbd>Tab</kbd> sequence.</li>
-                  <li>Set when a tab is not selected so that only the selected (active) tab is in the page <kbd>Tab</kbd> sequence.</li>
-                  <li>Since an HTML <code>button</code> element is used for the tab, it is not necessary to set <code>tabindex="0"</code> on the selected (active) tab element.</li>
-                  <li>
-                    This approach to managing focus is described in the section on
-                    <a href="../../../practices/keyboard-interface/keyboard-interface-practice.html#kbd_roving_tabindex">Managing Focus Within Components Using a Roving tabindex</a>.
-                  </li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="tab-aria-controls">
-              <td></td>
-              <th scope="row">
-                <code>aria-controls="ID_REFERENCE"</code>
-              </th>
-              <td>
-                <code>button</code>
-              </td>
-              <td>Refers to the <code>tabpanel</code> element associated with the tab.</td>
-            </tr>
-            <tr data-test-id="tabpanel-role">
-              <th scope="row">
-                <code>tabpanel</code>
-              </th>
-              <td></td>
-              <td>
-                <code>div</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Indicates the element serves as a container for tab panel content.</li>
-                  <li>Is hidden unless its associated <code>tab</code> control is activated.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="tabpanel-aria-labelledby">
-              <td></td>
-              <th scope="row">
-                <code>aria-labelledby="ID_REFERENCE"</code>
-              </th>
-              <td>
-                <code>div</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Refers to the <code>tab</code> element that controls the panel.</li>
-                  <li>Provides an accessible name for the tab panel.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section id="at-support">
-        <h2>Assistive Technology Support</h2>
-        <p><a href="../../../about/at-support-tables/at-support-tables.html">Learn how to interpret and use assistive technology support data</a></p>
-        <iframe
-          class="support-levels-tabs-manual-activation"
-          src="https://aria-at.w3.org/embed/reports/apg/tabs-manual-activation"
-          height="100"
-          allow="clipboard-write"
-          style="border-style: none; width: 100%;">
-        </iframe>
-      </section>
-      
-      <section>
-        <h2>JavaScript and CSS Source Code</h2>
-        <ul id="css_js_files">
-          <li>CSS: <a href="css/tabs.css" type="tex/css">tabs.css</a></li>
-          <li>JavaScript: <a href="js/tabs-manual.js" type="text/javascript">tabs-manual.js</a></li>
-        </ul>
-      </section>
-
-      <section class="example-code">
-        <h2 id="sc1_label">HTML Source Code</h2>
-        <p id="sc1_description">To copy the following HTML code, please open it in CodePen.</p>
-        <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-        <pre><code id="sc1"></code></pre>
-        <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
-        <script>
-          sourceCode.add('sc1', 'ex1', 'ex_label', 'css_js_files', 'sc1_description');
-          sourceCode.make();
-        </script>
-      </section>
-    </main>
   </body>
 </html>

Key	Function
`Tab`	- - When focus moves into the tab list, places focus on the active `tab` element. - When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the `a` element in `tabpanel`. - -
`Enter` `Space`	When a tab has focus, activates the tab, causing its associated panel to be displayed.
`Right Arrow`	- When a tab has focus: - - Moves focus to the next tab. - If focus is on the last tab, moves focus to the first tab. - -
`Left Arrow`	- When a tab has focus: - - Moves focus to the previous tab. - If focus is on the first tab, moves focus to the last tab. - -
`Home`	When a tab has focus, moves focus to the first tab.
`End`	When a tab has focus, moves focus to the last tab.
Role	Attribute	Element	Usage
- `tablist` -		- `div` -	Indicates that the element serves as a container for a set of tabs.
	- `aria-labelledby="ID_REFERENCE"` -	- `div` -	Provides a label that describes the purpose of the set of tabs.
- `tab` -		- `button` -	- - Indicates the element serves as a tab control. - Provides a title for its associated `tabpanel`. - -
	- `aria-selected="true"` -	- `button` -	- - Indicates the tab control is activated and its associated panel is displayed. - Set when a user activates a tab. - Does not change when focus moves in the `tablist`. - -
	- `aria-selected="false"` -	- `button` -	- - Indicates the tab control is not active and its associated panel is NOT displayed. - Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel. - -
	- `tabindex="-1"` -	- `button` -	- - Removes the element from the page `Tab` sequence. - Set when a tab is not selected so that only the selected (active) tab is in the page `Tab` sequence. - Since an HTML `button` element is used for the tab, it is not necessary to set `tabindex="0"` on the selected (active) tab element. - - This approach to managing focus is described in the section on - Managing Focus Within Components Using a Roving tabindex. - - -
	- `aria-controls="ID_REFERENCE"` -	- `button` -	Refers to the `tabpanel` element associated with the tab.
- `tabpanel` -		- `div` -	- - Indicates the element serves as a container for tab panel content. - Is hidden unless its associated `tab` control is activated. - -
	- `aria-labelledby="ID_REFERENCE"` -	- `div` -	- - Refers to the `tab` element that controls the panel. - Provides an accessible name for the tab panel. - -