diff --git a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-faq.html b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-faq.html
index 38e2fd598e6ef..c13938def2750 100644
--- a/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-faq.html
+++ b/third_party/aria-practices/src/content/patterns/disclosure/examples/disclosure-faq.html
@@ -2,55 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</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/disclosure-faq.css" rel="stylesheet">
     <script src="js/disclosure-button.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/132">Related Issues</a></li>
-        <li><a href="../disclosure-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Example Disclosure (Show/Hide) for Answers to Frequently Asked Questions</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-disclosure.svg">
-        <p>
-          The following example demonstrates using the <a href="../disclosure-pattern.html">Disclosure Pattern</a> to create a set of frequently asked questions where the answers may be independently shown or hidden.
-        </p>
-        <p>Similar examples include:</p>
-        <ul>
-          <li>
-            <a href="disclosure-image-description.html">Example Disclosure (Show/Hide) for an Image Description</a>
-          </li>
-          <li>
-            <a href="disclosure-navigation.html">Example Disclosure Navigation Menu</a>
-          </li>
-          <li><a href="disclosure-navigation-hybrid.html">Example Disclosure Navigation Menu with Top-Level Links</a></li>
-          <li><a href="disclosure-card.html">Disclosure (Show/Hide) Card</a></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">
           <h3>Parking <abbr title="Frequently Asked Questions">FAQ</abbr>s</h3>
           <ul class="faq">
@@ -86,158 +44,5 @@
             </li>
           </ul>
         </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>
-            The semantic structure of the FAQ list is conveyed with native <code>ul</code> and <code> li</code> elements.
-            To ensure the list structure is communicated to assistive technologies, a <code>button</code> element containing the question and a <code>div</code> element containing answer are children of an <code>li</code> element.  NOTE: The <code>button</code> actions are used to hide and show the <code>div</code> element with the answer.
-          </li>
-          <li>To help people with visual impairments identify the disclosure as interactive and make it easier to perceive that clicking either the disclosure button or its label changes the expanded state, when a pointer hovers over the button or its label, the background color changes, a border appears, and the cursor changes to a pointer.</li>
-          <li>
-            Because transparent borders are visible on some systems with operating system high contrast settings enabled, transparency cannot be used to create a visual difference between the element that is focused and other elements.
-            Instead of using transparency, the focused element has a thicker border and less padding.
-            When an element receives focus, its border changes from 0 to 2 pixels and padding is reduced by 2 pixels.
-            When an element loses focus, its border changes from 2 pixels to 0 and padding is increased by 2 pixels.
-          </li>
-          <li>
-            To ensure the inline SVG arrow graphics in the CSS have sufficient contrast with the background when high contrast settings invert colors, the color of the arrows are synchronized with the color of the text content.
-            For example, the color of the arrow is set to match the foreground color of high contrast mode text by specifying the CSS <code>currentcolor</code> value for the <code>stroke</code> and <code>fill</code> properties of the <code>polygon</code> elements used to draw the arrows.
-            If specific colors were instead used to specify the <code>polygon</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the arrows and the background or even make the arrows invisible if the color matched the high contrast mode background.<br>
-            Note: The SVG element needs to have the CSS <code>forced-color-adjust</code> property set to <code>auto</code> for the <code>currentcolor</code> value to be updated in high contrast mode.
-            Some browsers do not use <code>auto</code> for the default value.
-          </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>Moves keyboard focus to the disclosure button.</td>
-            </tr>
-            <tr data-test-id="key-enter-or-space">
-              <th>
-                <kbd>Space</kbd> or <br>
-                <kbd>Enter</kbd>
-              </th>
-              <td>Activates the disclosure button, which toggles the visibility of the answer to the question.</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="button-aria-controls">
-              <td></td>
-              <th scope="row">
-                <code>aria-controls="ID_REFERENCE"</code>
-              </th>
-              <td><code>button</code></td>
-              <td>Identifies the element controlled by the disclosure button.</td>
-            </tr>
-            <tr data-test-id="button-aria-expanded">
-              <td></td>
-              <th scope="row">
-                <code>aria-expanded="false"</code>
-              </th>
-              <td>
-                <code>button</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>hidden</em>.</li>
-                  <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
-                  </li>
-                  <li>The visual indicator of the show/hide state is created using CSS <code>:before</code> pseudo element and <code>content</code> property so the image is reliably rendered in high contrast mode of operating systems and browsers.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="button-aria-expanded">
-              <td></td>
-              <th scope="row">
-                <code>aria-expanded="true"</code>
-              </th>
-              <td>
-                <code>button</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Indicates that the container controlled by the disclosure button is <em>visible</em>.</li>
-                  <li>
-                    CSS attribute selectors (e.g. <code>[aria-expanded="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-expanded</code> attribute.
-                  </li>
-                  <li>The visual indicator of the show/hide state is created using CSS <code>:before</code> pseudo element and <code>content</code> property so the image is reliably rendered in high contrast mode of operating systems and browsers.</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-disclosure-faq"
-          src="https://aria-at.w3.org/embed/reports/apg/disclosure-faq"
-          height="100"
-          allow="clipboard-write"
-          style="border-style: none; width: 100%;">
-        </iframe>
-      </section>
-      
-      <section>
-        <h2>JavaScript and CSS Source Code</h2>
-        <!--  After the js and css files are named with the name of this example, change the href and text of the following 2 links to refer to the appropriate js and css files.  -->
-        <ul id="css_js_files">
-          <li>
-            CSS:
-            <a href="css/disclosure-faq.css" type="tex/css">disclosure-faq.css</a>
-          </li>
-          <li>
-            JavaScript:
-            <a href="js/disclosure-button.js" type="text/javascript">disclosureButton.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` -	Moves keyboard focus to the disclosure button.
- `Space` or - `Enter` -	Activates the disclosure button, which toggles the visibility of the answer to the question.
Attribute	Element	Usage
- `aria-controls="ID_REFERENCE"` -	`button`	Identifies the element controlled by the disclosure button.
- `aria-expanded="false"` -	- `button` -	- - Indicates that the container controlled by the disclosure button is hidden. - - CSS attribute selectors (e.g. `[aria-expanded="false"]`) are used to synchronize the visual states with the value of the `aria-expanded` attribute. - - The visual indicator of the show/hide state is created using CSS `:before` pseudo element and `content` property so the image is reliably rendered in high contrast mode of operating systems and browsers. - -
- `aria-expanded="true"` -	- `button` -	- - Indicates that the container controlled by the disclosure button is visible. - - CSS attribute selectors (e.g. `[aria-expanded="true"]`) are used to synchronize the visual states with the value of the `aria-expanded` attribute. - - The visual indicator of the show/hide state is created using CSS `:before` pseudo element and `content` property so the image is reliably rendered in high contrast mode of operating systems and browsers. - -