diff --git a/third_party/aria-practices/src/content/patterns/radio/examples/radio-rating.html b/third_party/aria-practices/src/content/patterns/radio/examples/radio-rating.html
index 97f559e1b80fe..f178814c909aa 100644
--- a/third_party/aria-practices/src/content/patterns/radio/examples/radio-rating.html
+++ b/third_party/aria-practices/src/content/patterns/radio/examples/radio-rating.html
@@ -2,51 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Rating Radio Group 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 rel="stylesheet" href="css/radio-rating.css">
     <script src="js/radio-rating.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/139">Related Issues</a></li>
-        <li><a href="../radio-group-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Rating Radio Group Example</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-radio.svg">
-        <p>
-          Following is an example of a rating input that demonstrates the <a href="../radio-group-pattern.html">Radio Group Pattern.</a>
-          The rating is indicated by the number of stars selected by the user.
-        </p>
-        <p>Similar examples include:</p>
-        <ul>
-          <li><a href="../../slider/examples/slider-rating.html">Rating Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to make it easy for assistive technology users to understand the meaning of the current value chosen on a ten-point satisfaction scale.</li>
-          <li><a href="radio-activedescendant.html">Radio Group Example Using aria-activedescendant</a>: Radio button group that uses <code>aria-activedescendant</code> for managing keyboard focus.</li>
-          <li><a href="radio.html">Radio Group Example Using Roving tabindex</a>: A radio button group that uses roving <code>tabindex</code> for managing keyboard 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="rating-radio" role="radiogroup" aria-labelledby="id-rating-label" data-rating-value="">
             <div id="id-rating-label" class="label">Rating</div>
@@ -87,213 +49,5 @@
             </svg>
           </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 enhance perceivability when operating the radios, visual keyboard focus and hover are styled using CSS:
-            <ul>
-              <li>The focus ring has a width of 2 pixels and at least 2 pixels of spacing between it and the star borders.</li>
-              <li>The cursor changes to a pointer when hovering over the stars so it is easier to perceive that the rating stars are interactive.</li>
-            </ul>
-          </li>
-          <li>
-            To ensure the borders of the stars and the focus ring have sufficient contrast with the background when high contrast settings invert colors, the color of the borders are synchronized with the color of the text content.
-            For example, the color of the focus ring border 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> property of the inline SVG <code>polygon</code> to draw the star borders and <code>rect</code> element used to draw the focus ring border.
-            To make the background of the <code>polygon</code> and <code>rect</code> elements match the high contrast background color, the <code>fill-opacity</code> attribute of the <code>rect</code> is set to zero.
-            If specific colors were instead used to specify the <code>stroke</code> and <code>fill</code> properties, those colors would remain the same in high contrast mode, which could lead to insufficient contrast between the star and the background or even make them invisible if their 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>
-                <ul>
-                  <li>Moves focus to the checked <code>radio</code> button in the <code>radiogroup</code>.</li>
-                  <li>If a <code>radio</code> button is not checked, focus moves to the first <code>radio</code> button in the group.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-space">
-              <th><kbd>Space</kbd></th>
-              <td>
-                <ul>
-                  <li>If the <code>radio</code> button with focus is not checked, changes the state to <code>checked</code>.</li>
-                  <li>Otherwise, does nothing.</li>
-                  <li>Note: The state where a radio is not checked only occurs on page load.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-down-right-arrow">
-              <th><kbd>Down arrow</kbd><br><kbd>Right arrow</kbd></th>
-              <td>
-                <ul>
-                  <li>Moves focus to and checks the next <code>radio</code> button in the group.</li>
-                  <li>If focus is on the last <code>radio</code> button, moves focus to the first <code>radio</code> button.</li>
-                  <li>The state of the previously checked radio button is changed to unchecked.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="key-up-left-arrow">
-              <th><kbd>Up arrow</kbd><br><kbd>Left arrow</kbd></th>
-              <td>
-                <ul>
-                  <li>Moves focus to and checks the previous <code>radio</code> button in the group.</li>
-                  <li>If focus is on the first <code>radio</code> button, moves focus to and checks the last <code>radio</code> button.</li>
-                  <li>The state of the previously checked radio button is changed to unchecked.</li>
-                </ul>
-              </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">Attributes</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="svg-none">
-              <th scope="row">
-                <code>none</code>
-              </th>
-              <td></td>
-              <td>
-                <code>svg</code>
-              </td>
-              <td>The use of the <code>none</code> role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.</td>
-            </tr>
-            <tr data-test-id="radiogroup-role">
-              <th scope="row"><code>radiogroup</code></th>
-              <td></td>
-              <td><code>div</code></td>
-              <td>
-                <ul>
-                  <li>Identifies the <code>div</code> element as a container for a group of <code>radio</code> buttons.</li>
-                  <li>Is not focusable because focus is managed using a roving tabindex strategy as described below.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="radiogroup-aria-labelledby">
-              <td></td>
-              <th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
-              <td><code>div</code></td>
-              <td>Refers to the element that contains the label of the radio group.</td>
-            </tr>
-            <tr data-test-id="radio-role">
-              <th scope="row"><code>radio</code></th>
-              <td></td>
-              <td><code>g</code></td>
-              <td>Identifies the <code>g</code> element as an ARIA <code>radio</code> button.</td>
-            </tr>
-            <tr data-test-id="radio-aria-label">
-              <td></td>
-              <th scope="row"><code>aria-label="<em>name</em>"</code></th>
-              <td><code>g</code></td>
-              <td>Defines an accessible name that identifies the number of stars associated with the radio button (e.g. "one star", two stars", ..).</td>
-            </tr>
-            <tr data-test-id="radio-tabindex">
-              <td></td>
-              <th scope="row"><code>tabindex="-1"</code></th>
-              <td><code>g</code></td>
-              <td>
-                <ul>
-                  <li>Makes the element focusable but not part of the page <kbd>Tab</kbd> sequence.</li>
-                  <li>Applied to all radio buttons contained in the radio group except for one that is included in the page <kbd>Tab</kbd> sequence.</li>
-                  <li>
-                    This approach to managing focus is described in the practice for
-                    <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="radio-tabindex">
-              <td></td>
-              <th scope="row"><code>tabindex="0"</code></th>
-              <td><code>g</code></td>
-              <td>
-                <ul>
-                  <li>Makes the radio button focusable and includes it in the page <kbd>Tab</kbd> sequence.</li>
-                  <li>Set on only one radio in the radio group.</li>
-                  <li>On page load, is set on the first radio button in the radio group.</li>
-                  <li>Moves with focus inside the radio group so the most recently focused radio button is included in the page <kbd>Tab</kbd> sequence.</li>
-                  <li>
-                    This approach to managing focus is described in the practice for
-                    <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="radio-aria-checked">
-              <td></td>
-              <th scope="row"><code>aria-checked="false"</code></th>
-              <td><code>g</code></td>
-              <td>
-                <ul>
-                  <li>Identifies <code>radio</code> buttons which are not checked.</li>
-                  <li>CSS attribute selectors (e.g. <code>[aria-checked="false"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
-                  <li>The CSS <code>::before</code> pseudo-element is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="radio-aria-checked">
-              <td></td>
-              <th scope="row"><code>aria-checked="true"</code></th>
-              <td><code>g</code></td>
-              <td>
-                <ul>
-                  <li>Identifies the <code>radio</code> button which is checked.</li>
-                  <li>CSS attribute selectors (e.g. <code>[aria-checked="true"]</code>) are used to synchronize the visual states with the value of the <code>aria-checked</code> attribute.</li>
-                  <li>The CSS <code>::before</code> pseudo-element is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-        <h2>JavaScript and CSS Source Code</h2>
-        <ul id="css_js_files">
-          <li>CSS: <a href="css/radio-rating.css" type="text/css">radio-rating.css</a></li>
-          <li>JavaScript: <a href="js/radio-rating.js" type="text/javascript">radio-rating.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 focus to the checked `radio` button in the `radiogroup`. - If a `radio` button is not checked, focus moves to the first `radio` button in the group. - -
`Space`	- - If the `radio` button with focus is not checked, changes the state to `checked`. - Otherwise, does nothing. - Note: The state where a radio is not checked only occurs on page load. - -
`Down arrow` `Right arrow`	- - Moves focus to and checks the next `radio` button in the group. - If focus is on the last `radio` button, moves focus to the first `radio` button. - The state of the previously checked radio button is changed to unchecked. - -
`Up arrow` `Left arrow`	- - Moves focus to and checks the previous `radio` button in the group. - If focus is on the first `radio` button, moves focus to and checks the last `radio` button. - The state of the previously checked radio button is changed to unchecked. - -
Role	Attributes	Element	Usage
- `none` -		- `svg` -	The use of the `none` role on the SVG element ensures assistive technologies do not interpret the SVG element as an image or some other role.
`radiogroup`		`div`	- - Identifies the `div` element as a container for a group of `radio` buttons. - Is not focusable because focus is managed using a roving tabindex strategy as described below. - -
	`aria-labelledby="ID_REFERENCE"`	`div`	Refers to the element that contains the label of the radio group.
`radio`		`g`	Identifies the `g` element as an ARIA `radio` button.
	`aria-label="name"`	`g`	Defines an accessible name that identifies the number of stars associated with the radio button (e.g. "one star", two stars", ..).
	`tabindex="-1"`	`g`	- - Makes the element focusable but not part of the page `Tab` sequence. - Applied to all radio buttons contained in the radio group except for one that is included in the page `Tab` sequence. - - This approach to managing focus is described in the practice for - Managing Focus Within Components Using a Roving tabindex. - - -
	`tabindex="0"`	`g`	- - Makes the radio button focusable and includes it in the page `Tab` sequence. - Set on only one radio in the radio group. - On page load, is set on the first radio button in the radio group. - Moves with focus inside the radio group so the most recently focused radio button is included in the page `Tab` sequence. - - This approach to managing focus is described in the practice for - Managing Focus Within Components Using a Roving tabindex. - - -
	`aria-checked="false"`	`g`	- - Identifies `radio` buttons which are not checked. - CSS attribute selectors (e.g. `[aria-checked="false"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. - The CSS `::before` pseudo-element is used to indicate visual state of unchecked radio buttons to support high contrast settings in operating systems and browsers. - -
	`aria-checked="true"`	`g`	- - Identifies the `radio` button which is checked. - CSS attribute selectors (e.g. `[aria-checked="true"]`) are used to synchronize the visual states with the value of the `aria-checked` attribute. - The CSS `::before` pseudo-element is used to indicate visual state of checked radio buttons to support high contrast settings in operating systems and browsers. - -