Multiple Example Pages: Fix source URI for AT support tables and add new AT support tables where available (pull #3386)

mcking65 · web-flow · commit d847aad4a09e · 2026-01-19T22:18:35.000-08:00
The URI for sourcing AT support table data has changed, and more support tables are now available. This change:
1. Modifies the path of the source URI for existing AT support tables to include "/apg".
2. Adds assistive technology support tables for the below list of examples.

Modified existing examples:

1. Alert Example
2. Color Viewer Slider
3. Command Button Example
4. Link Example 1 (span element with text content)
5. Modal Dialog Example
6. Navigation Menu Button
7. Radio Group Example Using aria-activedescendant, CANDIDATE report
8. Toggle Button

Examples with newly added AT support tables:

9. accordion
10. Action Menu Button Example Using aria-activedescendant
11. Action Menu Button Example Using element.focus
12. Disclosure Navigation Menu Example
13. Disclosure of Answers to Frequently Asked Questions Example
14. Link Example 2 (img element with alt attribute)
15. Link Example 3 (CSS :before content property on a span element)
16. Media Seek Slider
17. Radio Group Example Using Roving tabindex
18. Switch Example
19. Switch Example Using HTML Button
20. Tabs with Manual Activation
21. Vertical Temperature Slider
diff --git a/content/patterns/accordion/examples/accordion.html b/content/patterns/accordion/examples/accordion.html
@@ -247,6 +247,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-accordion"
+        src="https://aria-at.w3.org/embed/reports/apg/accordion"
+          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">
diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html
@@ -125,7 +125,7 @@ <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-alert"
-          src="https://aria-at.w3.org/embed/reports/alert"
+          src="https://aria-at.w3.org/embed/reports/apg/alert"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html
@@ -177,7 +177,7 @@ <h2>Assistive Technology Support</h2>
         <h3>Command Button</h3>
         <iframe
           class="support-levels-command-button"
-          src="https://aria-at.w3.org/embed/reports/command-button"
+          src="https://aria-at.w3.org/embed/reports/apg/command-button"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
@@ -186,7 +186,7 @@ <h3>Command Button</h3>
         <h3>Toggle Button</h3>
         <iframe
           class="support-levels-toggle-button"
-          src="https://aria-at.w3.org/embed/reports/toggle-button"
+          src="https://aria-at.w3.org/embed/reports/apg/toggle-button"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
@@ -334,7 +334,7 @@ <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/modal-dialog"
+          src="https://aria-at.w3.org/embed/reports/apg/modal-dialog"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
diff --git a/content/patterns/disclosure/examples/disclosure-faq.html b/content/patterns/disclosure/examples/disclosure-faq.html
@@ -200,6 +200,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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.  -->
diff --git a/content/patterns/disclosure/examples/disclosure-navigation.html b/content/patterns/disclosure/examples/disclosure-navigation.html
@@ -347,6 +347,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-navigation"
+          src="https://aria-at.w3.org/embed/reports/apg/disclosure-navigation"
+          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.  -->
diff --git a/content/patterns/link/examples/link.html b/content/patterns/link/examples/link.html
@@ -150,9 +150,26 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
       <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>
+        <h3>Example 1: Link on a <code>span</code> Element with Text Content</h3>
         <iframe
           class="support-levels-link-span-text"
-          src="https://aria-at.w3.org/embed/reports/link-span-text"
+          src="https://aria-at.w3.org/embed/reports/apg/link-span-text"
+          height="100"
+          allow="clipboard-write"
+          style="border-style: none; width: 100%;">
+        </iframe>
+        <h3>Example 2: Link on an <code>img</code> Element with <code>alt</code> Attribute</h3>
+        <iframe
+          class="support-levels-link-img-alt"
+          src="https://aria-at.w3.org/embed/reports/apg/link-img-alt"
+          height="100"
+          allow="clipboard-write"
+          style="border-style: none; width: 100%;">
+        </iframe>
+        <h3>Example 3: Link on a <code>span</code> Element with CSS <code>:before</code> Content Property</h3>
+        <iframe
+          class="support-levels-link-span-css"
+          src="https://aria-at.w3.org/embed/reports/apg/link-span-css"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
diff --git a/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html b/content/patterns/menu-button/examples/menu-button-actions-active-descendant.html
@@ -329,6 +329,18 @@ <h3 id="rps2_label">Menu</h3>
         </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-menu-button-actions-active-descendant"
+          src="https://aria-at.w3.org/embed/reports/apg/menu-button-actions-active-descendant"
+          height="100"
+          allow="clipboard-write"
+          style="border-style: none; width: 100%;">
+        </iframe>
+      </section>
+
       <section>
         <h2>JavaScript and CSS Source Code</h2>
 
diff --git a/content/patterns/menu-button/examples/menu-button-actions.html b/content/patterns/menu-button/examples/menu-button-actions.html
@@ -308,6 +308,18 @@ <h3 id="rps2_label">Menu</h3>
         </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-menu-button-actions"
+          src="https://aria-at.w3.org/embed/reports/apg/menu-button-actions"
+          height="100"
+          allow="clipboard-write"
+          style="border-style: none; width: 100%;">
+        </iframe>
+      </section>
+
       <section>
         <h2>JavaScript and CSS Source Code</h2>
 
diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html
@@ -337,7 +337,7 @@ <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-menu-button-navigation"
-          src="https://aria-at.w3.org/embed/reports/menu-button-navigation"
+          src="https://aria-at.w3.org/embed/reports/apg/menu-button-navigation"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html
@@ -250,7 +250,7 @@ <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-radiogroup-aria-activedescendant"
-          src="https://aria-at.w3.org/embed/reports/radiogroup-aria-activedescendant"
+          src="https://aria-at.w3.org/embed/reports/apg/radiogroup-aria-activedescendant"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
diff --git a/content/patterns/radio/examples/radio.html b/content/patterns/radio/examples/radio.html
@@ -246,6 +246,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-radiogroup-roving-tabindex"
+          src="https://aria-at.w3.org/embed/reports/apg/radiogroup-roving-tabindex"
+          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">
diff --git a/content/patterns/slider/examples/slider-color-viewer.html b/content/patterns/slider/examples/slider-color-viewer.html
@@ -296,7 +296,7 @@ <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/horizontal-slider"
+          src="https://aria-at.w3.org/embed/reports/apg/horizontal-slider"
           height="100"
           allow="clipboard-write"
           style="border-style: none; width: 100%;">
diff --git a/content/patterns/slider/examples/slider-seek.html b/content/patterns/slider/examples/slider-seek.html
@@ -298,6 +298,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-seek-slider"
+          src="https://aria-at.w3.org/embed/reports/apg/seek-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">
diff --git a/content/patterns/slider/examples/slider-temperature.html b/content/patterns/slider/examples/slider-temperature.html
@@ -279,6 +279,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-vertical-temperature-slider"
+          src="https://aria-at.w3.org/embed/reports/apg/vertical-temperature-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">
diff --git a/content/patterns/switch/examples/switch-button.html b/content/patterns/switch/examples/switch-button.html
@@ -211,6 +211,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-switch-button"
+          src="https://aria-at.w3.org/embed/reports/apg/switch-button"
+          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.  -->
diff --git a/content/patterns/switch/examples/switch.html b/content/patterns/switch/examples/switch.html
@@ -182,6 +182,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-switch"
+          src="https://aria-at.w3.org/embed/reports/apg/switch"
+          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">
diff --git a/content/patterns/tabs/examples/tabs-manual.html b/content/patterns/tabs/examples/tabs-manual.html
@@ -333,6 +333,18 @@ <h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>
         </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-tabs-manual-activation"
+          src="https://aria-at.w3.org/embed/reports/apg/tabs-manual-activation"
+          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">
