diff --git a/third_party/aria-practices/src/content/patterns/alertdialog/examples/alertdialog.html b/third_party/aria-practices/src/content/patterns/alertdialog/examples/alertdialog.html
index 890df9c4b831c..be914bd503fc5 100644
--- a/third_party/aria-practices/src/content/patterns/alertdialog/examples/alertdialog.html
+++ b/third_party/aria-practices/src/content/patterns/alertdialog/examples/alertdialog.html
@@ -2,72 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Alert 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/alertdialog.css" rel="stylesheet">
-    <script src="../../../shared/js/utils.js"></script>
     <script src="js/alertdialog.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/138">Related Issues</a></li>
-        <li><a href="../alertdialog-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Alert Dialog Example</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-alertdialog.svg">
-        <p>
-          The below example of a confirmation prompt demonstrates the <a href="../alertdialog-pattern.html">Alert Dialog Pattern</a>.
-          It also includes an example of the <a href="../../alert/alert-pattern.html">Alert Pattern</a> to make comparing the experiences provided by the two patterns easy.
-        </p>
-        <p>To use this example:</p>
-        <ul>
-          <li>
-            Activate the "discard" button to trigger a confirmation dialog that has the <code>alertdialog</code> role.
-            <ul>
-              <li>Activating the "yes" button in the confirmation dialog removes the contents of both the "Notes" text area and local storage of the notes.</li>
-              <li data-test-id="save-button">Activating the "no" button or pressing <kbd>escape</kbd> closes the dialog.</li>
-              <li>The "discard" button is disabled if the notes text area does not contain any text.</li>
-            </ul>
-          </li>
-          <li>
-            Activate the "save" button to trigger an alert when the contents of the "Notes" text area is saved to
-            <a href="https://html.spec.whatwg.org/multipage/webstorage.html#the-localstorage-attribute">local storage</a>.
-            <ul>
-              <li>A successful save triggers a short alert to notify the user that the notes have been saved.</li>
-              <li>The "save" button is disabled if the user's local storage value is the same as the "Notes" field.</li>
-            </ul>
-          </li>
-          <li>Modify the "notes" text area as needed to enable and disable the discard and save functions.</li>
-        </ul>
-        <p>Similar examples include:</p>
-        <ul>
-          <li><a href="../../alert/examples/alert.html">Alert</a>: a basic alert.</li>
-          <li><a href="../../dialog-modal/examples/dialog.html">Modal Dialog Example</a>: An example demonstrating multiple layers of modal dialogs with both small and large amounts of content.</li>
-          <li><a href="../../dialog-modal/examples/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="ex_alertdialog">
           <label for="notes">Notes</label>
           <textarea class="notes" name="notes" id="notes" rows="7">This is an example text box, which unsurprisingly contains text. The user is given the option to save this text - which triggers a basic alert - or to discard the text - which triggers an alert dialog that prompts the user for confirmation.</textarea>
@@ -95,155 +36,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>The accessible name of the alert dialog is set to its heading ("Confirmation").</li>
-          <li>The dialog's prompt ("Are you sure...?") is referenced via <code>aria-describedby</code> to ensure that the user is immediately aware of the prompt.</li>
-          <li>
-            Focus is automatically set to the first focusable element inside the dialog, which is the "No" <code>button</code>.
-            This is the least destructive action, so focusing "No" helps prevent users from accidentally confirming the destructive "Discard" action, which cannot be undone.
-          </li>
-          <li>
-            When the buttons are disabled, <code>aria-disabled</code> is used instead of the HTML <code>disabled</code> attribute so the buttons will remain in the page <kbd>Tab</kbd> sequence.
-            This makes it easier for screen reader users to discover the buttons and discern how the interface works.
-          </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>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>
-              <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>
-            <tr>
-              <th><kbd>Command</kbd> + <kbd>S</kbd></th>
-              <td>(Mac only) Save the contents of the notes <code>textarea</code> when focused.</td>
-            </tr>
-            <tr data-test-id="key-control-s">
-              <th><kbd>Control</kbd> + <kbd>S</kbd></th>
-              <td>(Windows only) Save the contents of the notes <code>textarea</code> when focused.</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="alertdialog-role">
-              <th scope="row"><code>alertdialog</code></th>
-              <td></td>
-              <td><code>div</code></td>
-              <td>Identifies the element that serves as the alert dialog container.</td>
-            </tr>
-            <tr data-test-id="aria-labelledby">
-              <td></td>
-              <th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
-              <td><code>div</code></td>
-              <td>Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.</td>
-            </tr>
-            <tr data-test-id="aria-describedby">
-              <td></td>
-              <th scope="row"><code>aria-describedby="ID_REFERENCE"</code></th>
-              <td><code>div</code></td>
-              <td>Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog.</td>
-            </tr>
-            <tr data-test-id="aria-modal">
-              <td></td>
-              <th scope="row"><code>aria-modal="true"</code></th>
-              <td><code>div</code></td>
-              <td>Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert).</td>
-            </tr>
-            <tr>
-              <th data-test-id="alert-role" scope="row"><code>alert</code></th>
-              <td></td>
-              <td><code>div</code></td>
-              <td>Identifies the element that serves as the alert notification.</td>
-            </tr>
-            <tr>
-              <td></td>
-              <th scope="row"><code>aria-disabled="true"</code></th>
-              <td><code>button</code></td>
-              <td>Tells assistive technology users the button cannot be activated.</td>
-            </tr>
-          </tbody>
-        </table>
-        <h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
-        <ul>
-          <li>
-            The <code>aria-modal</code> property was introduced in ARIA 1.1.
-            As a relatively 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:
-            <ul>
-              <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>
-            </ul>
-          </li>
-        </ul>
-      </section>
-
-      <section>
-        <h2 id="src_label">JavaScript and CSS Source Code</h2>
-        <ul id="css_js_files">
-          <li>CSS: <a href="css/alertdialog.css" type="text/css">alertdialog.css</a></li>
-          <li>JavaScript: <a href="js/alertdialog.js" type="text/javascript">alertdialog.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', 'ex_alertdialog', 'ex_label', 'css_js_files', 'sc1_description');
-          sourceCode.make();
-        </script>
-      </section>
-    </main>
   </body>
 </html>

Key	Function
`Tab`	- - Moves focus to next focusable element inside the dialog. - When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog. - -
`Shift` + `Tab`	- - Moves focus to previous focusable element inside the dialog. - When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog. - -
`Escape`	Closes the dialog.
`Command` + `S`	(Mac only) Save the contents of the notes `textarea` when focused.
`Control` + `S`	(Windows only) Save the contents of the notes `textarea` when focused.
Role	Attribute	Element	Usage
`alertdialog`		`div`	Identifies the element that serves as the alert dialog container.
	`aria-labelledby="ID_REFERENCE"`	`div`	Gives the alert dialog an accessible name by referring to the element that provides the alert dialog title.
	`aria-describedby="ID_REFERENCE"`	`div`	Gives the alert dialog an accessible description by referring to the alert dialog content that describes the primary message or purpose of the alert dialog.
	`aria-modal="true"`	`div`	Tells assistive technologies that the windows underneath the current alert dialog are not available for interaction (inert).
`alert`		`div`	Identifies the element that serves as the alert notification.
	`aria-disabled="true"`	`button`	Tells assistive technology users the button cannot be activated.