diff --git a/third_party/aria-practices/src/content/patterns/dialog-modal/examples/dialog.html b/third_party/aria-practices/src/content/patterns/dialog-modal/examples/dialog.html
index cd50723613bdd..83875bc0bd4d0 100644
--- a/third_party/aria-practices/src/content/patterns/dialog-modal/examples/dialog.html
+++ b/third_party/aria-practices/src/content/patterns/dialog-modal/examples/dialog.html
@@ -2,52 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modal Dialog Example</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/dialog.css" rel="stylesheet">
-    <script src="../../../shared/js/utils.js"></script>
     <script src="js/dialog.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/126">Related Issues</a></li>
-        <li><a href="../dialog-modal-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Modal Dialog Example</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-dialog-modal.svg">
-        <p>
-          Following is an example implementation of the <a href="../dialog-modal-pattern.html">Dialog (Modal) Pattern</a>.
-          The below <q>Add Delivery Address</q> button opens a modal dialog that contains two buttons that open other dialogs.
-          The accessibility features section explains the rationale for initial focus placement and use of <code>aria-describedby</code> in each dialog.
-        </p>
-        <p>Similar examples include:</p>
-        <ul>
-          <li><a href="../../alertdialog/examples/alertdialog.html">Alert Dialog Example</a>: A confirmation prompt that demonstrates an alert dialog.</li>
-          <li><a href="datepicker-dialog.html">Date Picker Dialog example</a>: Demonstrates a dialog containing a calendar grid for choosing a date.</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">
           <button type="button" onclick="openDialog('dialog1', this)">Add Delivery Address</button>
           <div id="dialog_layer" class="dialogs">
@@ -168,205 +129,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>
-        <ol>
-          <li>
-            To make the content easier to read when displayed on small screens, the dialog fills 100% of the screen.
-            Completely covering the background window also hides background movement that occurs on some mobile devices when scrolling content inside the dialog.
-          </li>
-          <li>
-            Focus and accessible descriptions are set based on the content of each dialog.
-            <ol>
-              <li>
-                <q>Add Delivery Address</q> dialog (id=dialog1):
-                <ul>
-                  <li>Initial focus is set on the first input, which is the first focusable element.</li>
-                  <li>The dialog does not need <code>aria-describedby</code> since there is no static text that describes it.</li>
-                  <li>When the dialog closes as a result of the <q>Cancel</q> action, the user's point of regard is maintained by returning focus to the <q>Add Delivery Address</q> button.</li>
-                  <li>When the dialog closes as a result of the <q>Add</q> action and the <q>Address Added</q> dialog replaces the <q>Add Delivery Address</q> dialog, the <q>Add Delivery Address</q> dialog passes a reference to the <q>Add Delivery Address</q> button to the <q>Address Added</q> dialog so that it can maintain the user's point of regard when it closes.</li>
-                </ul>
-              </li>
-              <li>
-                <q>Verification Result</q> dialog (id=dialog2):
-                <ul>
-                  <li>Initial focus is set on the first paragraph because the first interactive element is at the bottom, which is out of view due to the length of the text.</li>
-                  <li>To support screen reader user awareness of the dialog text, the dialog text is wrapped in a <code>div</code> that is referenced by <code>aria-describedby</code>.</li>
-                  <li>When the dialog closes, to maintain the user's point of regard, focus returns to the <q>Verify Address</q> button.</li>
-                  <li>The text of this dialog describes design considerations for initial focus and accessible descriptions in dialogs with large amounts of text.</li>
-                </ul>
-              </li>
-              <li>
-                <q>Address Added</q> dialog (id=dialog3):
-                <ul>
-                  <li>
-                    Initial focus is set on the <q>OK</q> button, which is the last focusable element.
-                    This is for efficiency since most users will simply dismiss the dialog as soon as they have read the message.
-                    Users can press <kbd>Tab</kbd> to focus on the <q>My Profile</q> link.
-                  </li>
-                  <li>The element containing the dialog message is referenced by <code>aria-describedby</code> to hint to screen readers that it should be announced when the dialog opens.</li>
-                  <li>When the dialog closes, the user's point of regard is maintained by setting focus on the <q>Add Delivery Address</q> button.</li>
-                </ul>
-              </li>
-              <li>
-                <q>End of the Road!</q> dialog (id=dialog4):
-                <ul>
-                  <li>This dialog has only one focusable element, which receives focus when the dialog opens.</li>
-                  <li>Like dialog3, <code>aria-describedby</code> is used to facilitate message announcement for screen reader users.</li>
-                  <li>Like all other dialogs in this example except for the <q>Address Added</q> confirmation dialog, when it closes, the user's point of regard is maintained by returning focus to the element that triggered display of the dialog.</li>
-                </ul>
-              </li>
-            </ol>
-          </li>
-        </ol>
-      </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>Moves focus to next focusable element inside the dialog.</li>
-                  <li>When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-shift-tab">
-              <th><kbd>Shift</kbd> + <kbd>Tab</kbd></th>
-              <td>
-                <ul>
-                  <li>Moves focus to previous focusable element inside the dialog.</li>
-                  <li>When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-escape">
-              <th><kbd>Escape</kbd></th>
-              <td>Closes the dialog.</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="dialog-role">
-              <th scope="row"><code>dialog</code></th>
-              <td></td>
-              <td><code>div</code></td>
-              <td>Identifies the element that serves as the dialog container.</td>
-            </tr>
-            <tr data-test-id="aria-labelledby">
-              <td></td>
-              <th scope="row">
-                <code>aria-labelledby=<q>IDREF</q></code>
-              </th>
-              <td><code>div</code></td>
-              <td>Gives the dialog an accessible name by referring to the element that provides the dialog title.</td>
-            </tr>
-            <tr data-test-id="aria-describedby">
-              <td></td>
-              <th scope="row">
-                <code>aria-describedby=<q>IDREF</q></code>
-              </th>
-              <td><code>div</code></td>
-              <td>
-                <ul>
-                  <li>Gives the dialog an accessible description by referring to the dialog content that describes the primary message or purpose of the dialog.</li>
-                  <li>
-                    Used in three of the four dialogs included in the example.
-                    See the above accessibility features section for an explanation.
-                  </li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="aria-modal">
-              <td></td>
-              <th scope="row">
-                <code>aria-modal=<q>true</q></code>
-              </th>
-              <td><code>div</code></td>
-              <td>Tells assistive technologies that the windows underneath the current dialog are not available for interaction (inert).</td>
-            </tr>
-          </tbody>
-        </table>
-        <h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
-        <ol>
-          <li>
-            The <code>aria-modal</code> property was introduced in ARIA 1.1.
-            As a new property, screen reader users may experience varying degrees of support for it.
-          </li>
-          <li>Applying the <code>aria-modal</code> property to the <code>dialog</code> element replaces the technique of using <code>aria-hidden</code> on the background for informing assistive technologies that content outside a dialog is inert.</li>
-          <li>
-            In legacy dialog implementations where <code>aria-hidden</code> is used to make content outside a dialog inert for assistive technology users, it is important that:
-            <ol>
-              <li><code>aria-hidden</code> is set to <code>true</code> on each element containing a portion of the inert layer.</li>
-              <li>The dialog element is not a descendant of any element that has <code>aria-hidden</code> set to <code>true</code>.</li>
-            </ol>
-          </li>
-        </ol>
-      </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-modal-dialog"
-          src="https://aria-at.w3.org/embed/reports/apg/modal-dialog"
-          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/dialog.css" type="text/css">dialog.css</a>
-          </li>
-          <li>
-            JavaScript:
-            <a href="js/dialog.js" type="text/javascript">dialog.js</a>,
-            <a href="../../../shared/js/utils.js">utils.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>
