Merge branch 'main' into read-this-first-at-source

# Conflicts: # ARIA/apg/patterns/patterns.md # ARIA/apg/practices/practices.md # _external/aria-practices # content-assets/wai-aria-practices/shared/js/read-this-first.js
w3c · howard-e · Sep 2, 2025 · Jul 28, 2025 · Jul 28, 2025 · Jul 28, 2025
commit 7aa132958cefb6b7727bd941d9ee6ac2a3629ddd
diff --git a/ARIA/apg/patterns/accordion/accordion-pattern.md b/ARIA/apg/patterns/accordion/accordion-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/alert/alert-pattern.md b/ARIA/apg/patterns/alert/alert-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md b/ARIA/apg/patterns/alertdialog/alertdialog-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md b/ARIA/apg/patterns/breadcrumb/breadcrumb-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/button/button-pattern.md b/ARIA/apg/patterns/button/button-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/carousel/carousel-pattern.md b/ARIA/apg/patterns/carousel/carousel-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/checkbox/checkbox-pattern.md b/ARIA/apg/patterns/checkbox/checkbox-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/combobox/combobox-pattern.md b/ARIA/apg/patterns/combobox/combobox-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md b/ARIA/apg/patterns/dialog-modal/dialog-modal-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/disclosure/disclosure-pattern.md b/ARIA/apg/patterns/disclosure/disclosure-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/feed/feed-pattern.md b/ARIA/apg/patterns/feed/feed-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/grid/grid-pattern.md b/ARIA/apg/patterns/grid/grid-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/landmarks/landmarks-pattern.md b/ARIA/apg/patterns/landmarks/landmarks-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/link/link-pattern.md b/ARIA/apg/patterns/link/link-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/listbox/listbox-pattern.md b/ARIA/apg/patterns/listbox/listbox-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/menu-button/menu-button-pattern.md b/ARIA/apg/patterns/menu-button/menu-button-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md b/ARIA/apg/patterns/menubar/menu-and-menubar-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/meter/meter-pattern.md b/ARIA/apg/patterns/meter/meter-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/patterns.md b/ARIA/apg/patterns/patterns.md
@@ -28,6 +28,11 @@ lang: en
 <script src="../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 <script src="../../../content-assets/wai-aria-practices/shared/js/filterBySearch.js"></script>
 
+<script
+  data-read-this-first="showImage:true"
+  src="../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"
@@ -53,6 +58,18 @@ lang: en
 
 
 
+    <div class="read-this-first">
+      <div class="text">
+        <img src="../../../content-images/wai-aria-practices/images/read-this-first.svg" width="178" alt="Illustration of a brown-skinned woman with a slight smile gesturing towards the right with her hand">
+        <h2>Read This First</h2>
+        <p>
+          No ARIA is better than Bad ARIA. Before using any ARIA, <a href="../practices/read-me-first/" aria-label="Read this to understand why no ARIA is better than bad ARIA">read this to understand why</a>.
+        </p>
+      </div>
+    </div>
+
+
+
     <section class="pattern-filter-section">
       <h2>Filter Patterns</h2>
       <div class="pattern-filter-flex-container">
@@ -475,8 +492,4 @@ lang: en
   src="{{ '/content-assets/wai-aria-practices/shared/js/skipto.js' | relative_url }}"
   data-skipto="colorTheme:aria; displayOption:popup; containerElement:div"
 ></script>
-<script
-  src="{{ '/content-assets/wai-aria-practices/shared/js/read-this-first.js' | relative_url }}"
-  data-read-this-first="showImage:true"
-></script>
 
diff --git a/ARIA/apg/patterns/radio/radio-group-pattern.md b/ARIA/apg/patterns/radio/radio-group-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/slider-multithumb/slider-multithumb-pattern.md b/ARIA/apg/patterns/slider-multithumb/slider-multithumb-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/slider/slider-pattern.md b/ARIA/apg/patterns/slider/slider-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md b/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/switch/switch-pattern.md b/ARIA/apg/patterns/switch/switch-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/table/table-pattern.md b/ARIA/apg/patterns/table/table-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/tabs/tabs-pattern.md b/ARIA/apg/patterns/tabs/tabs-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/toolbar/toolbar-pattern.md b/ARIA/apg/patterns/toolbar/toolbar-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/tooltip/tooltip-pattern.md b/ARIA/apg/patterns/tooltip/tooltip-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/treegrid/treegrid-pattern.md b/ARIA/apg/patterns/treegrid/treegrid-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/treeview/treeview-pattern.md b/ARIA/apg/patterns/treeview/treeview-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"

diff --git a/ARIA/apg/patterns/windowsplitter/windowsplitter-pattern.md b/ARIA/apg/patterns/windowsplitter/windowsplitter-pattern.md
@@ -26,6 +26,11 @@ lang: en
 <script src="../../../../content-assets/wai-aria-practices/shared/js/highlight.pack.js"></script>
 <script src="../../../../content-assets/wai-aria-practices/shared/js/app.js"></script>
 
+<script
+  data-read-this-first="showImage:false"
+  src="../../../../content-assets/wai-aria-practices/shared/js/read-this-first.js"
+></script>
+
 
 <link 
   rel="stylesheet"