w3c · mcking65 · May 22, 2024 · Apr 29, 2024 · Apr 29, 2024 · Apr 29, 2024
diff --git a/content/about/about.html b/content/about/about.html
@@ -58,6 +58,15 @@ <h2><a href="related-specifications/related-specifications.html">Related Specifi
             <a href="related-specifications/related-specifications.html">Related Specifications</a>.
           </p>
         </li>
+        <li>
+          <h2><a href="at-support-tables/at-support-tables.html">Assistive Technology Support Tables</a></h2>
+          <p>
+            Pages that provide example implementations of APG patterns also, when available,  provide a summary of assistive technology support of the ARIA used in those examples.
+            Learn how to interpret and use data in the
+            <a href="at-support-tables/at-support-tables.html">Assistive Technology Support Tables</a>.
+          </p>
+        </li>
+
         <li>
           <h2><a href="coverage-and-quality/coverage-and-quality-report.html">Coverage and Quality Report</a></h2>
           <p>

diff --git a/content/about/at-support-tables/at-support-tables.html b/content/about/at-support-tables/at-support-tables.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta content="width=device-width, initial-scale=1.0" name="viewport">
+  <title>AT Support Tables</title>
+
+  <!-- Core JS and CSS shared by all About content -->
+  <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/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>
+</head>
+
+<body>
+  <main>
+    <h1>Assistive Technology Support Tables</h1>
+    <p>
+      As the <a href="https://aria-at.w3.org/">ARIA and Assistive Technologies Project</a>
+      makes reports on assistive technology interoperability for APG examples available,
+      the APG Task Force adds summaries of assistive technology support to the relevant example pages.
+      This page explains how to interpret and use the assistive technology support summaries.
+    </p>
+
+    <section id="purpose">
+      <h2>Purpose of AT Support Tables</h2>
+      <p>
+        The purpose of the support tables is to provide an actionable summary of the interoperability tests performed by the <a href="http://aria-at.w3.org/">ARIA-AT project</a>.</p>
+    </section>
+
+    <section id="meaning">
+      <h2>Meaning of Support Levels</h2>
+      <p>
+        The assistive technology support tables present two percentages for each assistive technology and browser combination that have been tested: "Must-Have Behaviors" and "Should-Have Behaviors".
+         A behavior designated as “Must-Have" is essential; if not provided, users could be blocked from using the UI element.
+        Failure to provide a “Should-Have” behavior could impede users.
+        Learn more about ARIA-AT’s
+        <a href="https://github.com/w3c/aria-at/wiki/Glossary#assertion-priority">definitions of Must and Should on the project wiki</a>.
+        </p>
+
+      <section>
+        <h3>Examples of Must-Have Behaviors</h3>
+        <ul>
+          <li>Convey the name of a radio button.</li>
+          <li>Convey the state of a checked radio button.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Examples of Should-Have Behaviors</h3>
+        <ul>
+          <li>Convey the position of a radio button in a radio group, e.g., the button is 1 of 3.</li>
+          <li>Convey the number of radio buttons in a radio group.</li>
+        </ul>
+      </section>
+
+      <section>
+        <h3>Important Constraints</h3>
+        <ul>
+          <li>Unless otherwise noted, all testing is done using the assistive technology vendor's default configuration of an assistive technology.</li>
+          <li>
+            ARIA-AT interoperability  tests do not prescribe exactly how to satisfy a need.
+            For example, they do not specify exactly what a screen reader should speak.
+            Two different screen readers may convey the same information in different ways.
+          </li>
+        </ul>
+      </section>
+    </section>
+
+    <section id="recommendations">
+      <h2>Recommendations</h2>
+
+      <section>
+        <h3>Don’t Code to the Bugs</h3>
+        <p>
+          ARIA-AT is working with assistive technology vendors to increase their support levels.
+          This means that assistive technologies that align with ARIA-AT interoperability tests will change over time.
+          Exercise caution when implementing a pattern where support levels are less than 100%.
+          Avoid modifying code to accommodate an assistive technology bug unless you are confident the modified code provides an   experience that:
+        </p>
+        <ul>
+          <li>Works equally well when using assistive technologies that do not exhibit the bug.</li>
+          <li>Will work equally well after the assistive technology bug is fixed.</li>
+        </ul>
+        <p>
+          When possible, test implementations of APG patterns with an assistive technology that provides 100% support for both must-have and should-have behaviors.
+        </p>
+      </section>
+
+      <section>
+        <h3>Design to Mitigate Critical Support Failures</h3>
+        <p>
+          Where feasible, avoid designing experiences that rely on features of APG patterns that have less than 100% support for must-have behaviors.
+          If the must-have support level is less than 100% for one example implementation of a pattern, that does not mean every other way of implementing that pattern will present assistive technology users with the same problems.
+          In these cases:
+        </p>
+        <ol>
+          <li>If there are multiple implementation examples of the pattern, compare support levels across examples to discover whether another method of implementation provides better support.</li>
+          <li>learn about the specific aspects of an example implementation that are not fully supported by navigating to the detailed report with the View Complete Report button.</li>
+            <li>If possible, use the guidelines of the pattern to design interactions such that they avoid the problematic features.</li>
+        </ol>
+      </section>
+
+      <section>
+        <h3>Perform Your Own Tests</h3>
+        <p>
+          A primary purpose of ARIA-AT data is to help assistive technology vendors coordinate interoperable rendering of ARIA.
+          While the ARIA-AT summary tables on APG example pages can be used as a guide of where to prioritize testing, the data is not as a final verdict on whether a feature in a web application will work.
+          It is essential  for all developers to test applications with multiple assistive technologies to ensure a good user experience.
+        </p>
+      </section>
+
+    </section>
+
+
+  </main>
+</body>
+
+</html>
diff --git a/content/patterns/alert/examples/alert.html b/content/patterns/alert/examples/alert.html
@@ -122,6 +122,7 @@ <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>
         <iframe
           class="support-levels-alert"
           src="https://aria-at.w3.org/embed/reports/alert"

diff --git a/content/patterns/button/examples/button.html b/content/patterns/button/examples/button.html
@@ -173,6 +173,7 @@ <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>Command Button</h3>
         <iframe
           class="support-levels-command-button"

diff --git a/content/patterns/dialog-modal/examples/dialog.html b/content/patterns/dialog-modal/examples/dialog.html
@@ -331,6 +331,7 @@ <h3>Notes on <code>aria-modal</code> and <code>aria-hidden</code></h3>
 
       <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/modal-dialog"

diff --git a/content/patterns/link/examples/link.html b/content/patterns/link/examples/link.html
@@ -149,6 +149,7 @@ <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>
         <iframe
           class="support-levels-link-span-text"
           src="https://aria-at.w3.org/embed/reports/link-span-text"

diff --git a/content/patterns/menu-button/examples/menu-button-links.html b/content/patterns/menu-button/examples/menu-button-links.html
@@ -334,6 +334,7 @@ <h3 id="rps2_label">Menu</h3>
 
       <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-navigation"
           src="https://aria-at.w3.org/embed/reports/menu-button-navigation"

diff --git a/content/patterns/radio/examples/radio-activedescendant.html b/content/patterns/radio/examples/radio-activedescendant.html
@@ -247,6 +247,7 @@ <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>
         <iframe
           class="support-levels-radiogroup-aria-activedescendant"
           src="https://aria-at.w3.org/embed/reports/radiogroup-aria-activedescendant"

diff --git a/content/patterns/slider/examples/slider-color-viewer.html b/content/patterns/slider/examples/slider-color-viewer.html
@@ -293,6 +293,7 @@ <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>
         <iframe
           class="support-levels-horizontal-slider"
           src="https://aria-at.w3.org/embed/reports/horizontal-slider"