diff --git a/third_party/aria-practices/src/content/patterns/slider/examples/slider-color-viewer.html b/third_party/aria-practices/src/content/patterns/slider/examples/slider-color-viewer.html
index 5b1b7385340b7..971db185610b7 100644
--- a/third_party/aria-practices/src/content/patterns/slider/examples/slider-color-viewer.html
+++ b/third_party/aria-practices/src/content/patterns/slider/examples/slider-color-viewer.html
@@ -2,62 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Color Viewer Slider 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" type="text/css" href="css/slider-color-viewer.css">
     <script src="js/slider-color-viewer.js"></script>
   </head>
   <body>
-    <nav aria-label="Related Links" class="feedback">
-      <ul>
-        <li><a href="https://github.com/orgs/w3c/projects/124">Related Issues</a></li>
-        <li><a href="../slider-pattern.html">Design Pattern</a></li>
-      </ul>
-    </nav>
-    <main>
-      <h1>Color Viewer Slider Example</h1>
-
-      <section>
-        <h2>About This Example</h2>
-        <div class="advisement">
-          <h3>Warning!</h3>
-          <p>
-            Some users of touch-based assistive technologies may experience difficulty utilizing widgets that implement this slider pattern because the gestures their assistive technology provides for operating sliders may not yet generate the necessary output.
-            To change the slider value, touch-based assistive technologies need to respond to user gestures for increasing and decreasing the value by synthesizing key events.
-            This is a new convention that may not be fully implemented by some assistive technologies.
-            Authors should fully test slider widgets using assistive technologies on devices where touch is a primary input mechanism before considering incorporation into production systems.
-          </p>
-        </div>
-        <img alt="" class="example-page-example-icon" src="../../../images/pattern-slider.svg">
-        <p>
-          Following is an example of a color viewer that demonstrates the <a href="../slider-pattern.html">Slider Pattern</a>.
-          Change the background of the color view box by adjusting the sliders for red, green, and blue values.
-          The HEX and RGB values of the chosen color are displayed by the color view box.
-        </p>
-        <p>Similar examples include:</p>
-        <ul>
-          <li><a href="slider-temperature.html">Vertical Temperature Slider Example</a>: Demonstrates using <code>aria-orientation</code> to specify vertical orientation and <code>aria-valuetext</code> to communicate unit of measure for a temperature input.</li>
-          <li><a href="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="slider-seek.html">Media Seek Slider Example</a>: Horizontal slider that demonstrates using <code>aria-valuetext</code> to communicate current and maximum values of time in media to make the values easy to understand for assistive technology users by converting the total number of seconds to minutes and seconds.</li>
-          <li><a href="../../slider-multithumb/examples/slider-multithumb.html">Horizontal Multi-Thumb Slider Example</a>: Demonstrates using sliders with two thumbs to provide inputs for numeric ranges, such as for searching in a price range.</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="color-viewer-sliders" role="group" aria-labelledby="id-color-viewer">
             <h3 id="id-color-viewer">Color Viewer</h3>
@@ -115,213 +66,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 help assistive technology users understand that the color viewer is made of a group of three sliders, the sliders are wrapped in a <code>group</code> labeled by the heading that labels the color viewer.</li>
-          <li>The placement of the slider value above the thumb makes it easier for users with low vision to see the current value while dragging the thumb.</li>
-          <li>To highlight the interactive nature of the thumb, the focus ring is drawn around the thumb and the value.</li>
-          <li>
-            To ensure the borders of the slider rail, thumb and focus ring have sufficient contrast with the background when high contrast settings invert colors, the CSS <code>currentcolor</code> value for the <code>stroke</code> property is used for the SVG <code>rect</code> elements to synchronize the border color with text content.
-            If specific colors were used to specify the <code>stroke</code> property, the color of these elements would remain the same in high contrast mode, which could lead to insufficient contrast between them and their background or even make them invisible if their color were to match the high contrast mode background.
-            NOTE: The SVG elements need to be inline to use <code>currentcolor</code>.
-          </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-right-arrow">
-              <th><kbd>Right Arrow</kbd></th>
-              <td>Increases slider value one step.</td>
-            </tr>
-            <tr data-test-id="key-up-arrow">
-              <th><kbd>Up Arrow</kbd></th>
-              <td>Increases slider value one step.</td>
-            </tr>
-            <tr data-test-id="key-left-arrow">
-              <th><kbd>Left Arrow</kbd></th>
-              <td>Decreases slider value one step.</td>
-            </tr>
-            <tr data-test-id="key-down-arrow">
-              <th><kbd>Down Arrow</kbd></th>
-              <td>Decreases slider value one step.</td>
-            </tr>
-            <tr data-test-id="key-page-up">
-              <th><kbd>Page Up</kbd></th>
-              <td>
-                Increases slider value multiple steps.
-                In this slider, jumps ten steps.
-              </td>
-            </tr>
-            <tr data-test-id="key-page-down">
-              <th><kbd>Page Down</kbd></th>
-              <td>
-                Decreases slider value multiple steps.
-                In this slider, jumps ten steps.
-              </td>
-            </tr>
-            <tr data-test-id="key-home">
-              <th><kbd>Home</kbd></th>
-              <td>Sets slider to its minimum value.</td>
-            </tr>
-            <tr data-test-id="key-end">
-              <th><kbd>End</kbd></th>
-              <td>Sets slider to its maximum value.</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="group-role">
-              <th scope="row"><code>group</code></th>
-              <td></td>
-              <td><code>div</code></td>
-              <td>
-                <ul>
-                  <li>Identifies the <code>div</code> as a group.</li>
-                  <li>The group and its accessible name inform assistive technology users that the three sliders are related to one another and serve the purpose of choosing a color.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="group-aria-labelledby">
-              <td></td>
-              <th scope="row"><code>aria-labelledby="IDREF"</code></th>
-              <td><code>div</code></td>
-              <td>Refers to the heading element that provides the accessible name for the group.</td>
-            </tr>
-            <tr data-test-id="slider-role">
-              <th scope="row">
-                <code>slider</code>
-              </th>
-              <td></td>
-              <td>
-                <code>div</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Identifies the element as a slider.</li>
-                  <li>Set on the <code>div</code> that represents the movable thumb because it is the operable element that controls the slider value.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="tabindex">
-              <td></td>
-              <th scope="row">
-                <code>tabindex="0"</code>
-              </th>
-              <td>
-                <code>div</code>
-              </td>
-              <td>Includes the slider thumb in the page tab sequence.</td>
-            </tr>
-            <tr data-test-id="aria-valuemax">
-              <td></td>
-              <th scope="row">
-                <code>aria-valuemax="255"</code>
-              </th>
-              <td>
-                <code>div</code>
-              </td>
-              <td>Specifies the maximum value of the slider.</td>
-            </tr>
-            <tr data-test-id="aria-valuemin">
-              <td></td>
-              <th scope="row">
-                <code>aria-valuemin="0"</code>
-              </th>
-              <td>
-                <code>div</code>
-              </td>
-              <td>Specifies the minimum value of the slider.</td>
-            </tr>
-            <tr data-test-id="aria-valuenow">
-              <td></td>
-              <th scope="row">
-                <code>aria-valuenow="NUMBER"</code>
-              </th>
-              <td>
-                <code>div</code>
-              </td>
-              <td>Indicates the current value of the slider.</td>
-            </tr>
-            <tr data-test-id="aria-labelledby">
-              <td></td>
-              <th scope="row">
-                <code>aria-labelledby="IDREF"</code>
-              </th>
-              <td>
-                <code>div</code>
-              </td>
-              <td>Refers to the element containing the name of the slider.</td>
-            </tr>
-            <tr data-test-id="svg-aria-hidden">
-              <td></td>
-              <th scope="row"><code>aria-hidden="true"</code></th>
-              <td><code>svg</code></td>
-              <td>
-                Removes the SVG elements from the accessibility tree.
-                Some assistive technologies will describe the SVG elements, unless they are explicitly hidden.
-              </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-horizontal-slider"
-          src="https://aria-at.w3.org/embed/reports/apg/horizontal-slider"
-          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/slider-color-viewer.css" type="text/css">slider-color-viewer.css</a></li>
-          <li>JavaScript: <a href="js/slider-color-viewer.js" type="text/javascript">slider-color-viewer.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
`Right Arrow`	Increases slider value one step.
`Up Arrow`	Increases slider value one step.
`Left Arrow`	Decreases slider value one step.
`Down Arrow`	Decreases slider value one step.
`Page Up`	- Increases slider value multiple steps. - In this slider, jumps ten steps. -
`Page Down`	- Decreases slider value multiple steps. - In this slider, jumps ten steps. -
`Home`	Sets slider to its minimum value.
`End`	Sets slider to its maximum value.
Role	Attribute	Element	Usage
`group`		`div`	- - Identifies the `div` as a group. - The group and its accessible name inform assistive technology users that the three sliders are related to one another and serve the purpose of choosing a color. - -
	`aria-labelledby="IDREF"`	`div`	Refers to the heading element that provides the accessible name for the group.
- `slider` -		- `div` -	- - Identifies the element as a slider. - Set on the `div` that represents the movable thumb because it is the operable element that controls the slider value. - -
	- `tabindex="0"` -	- `div` -	Includes the slider thumb in the page tab sequence.
	- `aria-valuemax="255"` -	- `div` -	Specifies the maximum value of the slider.
	- `aria-valuemin="0"` -	- `div` -	Specifies the minimum value of the slider.
	- `aria-valuenow="NUMBER"` -	- `div` -	Indicates the current value of the slider.
	- `aria-labelledby="IDREF"` -	- `div` -	Refers to the element containing the name of the slider.
	`aria-hidden="true"`	`svg`	- Removes the SVG elements from the accessibility tree. - Some assistive technologies will describe the SVG elements, unless they are explicitly hidden. -