Landmark examples: Update links to related documents and SkipTo scrip…

…t (pull #2624) Minor editorial and code maintenance changes to all landmark example pages: * updated SkipTo script to version 5.2 * Modify Skipto script tag to use new configuration data parameter * updated URL targets in links to two related resources * Update copyright date --------- Co-authored-by: Matt King <[email protected]>
w3c · Jun 11, 2023 · 4adb78e · 4adb78e
1 parent b61ac05
commit 4adb78e
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 211 deletions.
diff --git a/content/patterns/landmarks/examples/HTML5.html b/content/patterns/landmarks/examples/HTML5.html
@@ -121,8 +121,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -141,7 +141,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -152,19 +152,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/at.html b/content/patterns/landmarks/examples/at.html
@@ -221,8 +221,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -241,7 +241,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -253,19 +253,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/banner.html b/content/patterns/landmarks/examples/banner.html
@@ -115,8 +115,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -135,7 +135,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -147,19 +147,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/complementary.html b/content/patterns/landmarks/examples/complementary.html
@@ -177,8 +177,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -197,7 +197,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -209,19 +209,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, except just show h1 and h2 headings
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/contentinfo.html b/content/patterns/landmarks/examples/contentinfo.html
@@ -120,8 +120,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -140,7 +140,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -152,19 +152,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/form.html b/content/patterns/landmarks/examples/form.html
@@ -274,8 +274,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -294,7 +294,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -305,19 +305,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/general-principles.html b/content/patterns/landmarks/examples/general-principles.html
@@ -116,8 +116,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -136,7 +136,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -147,19 +147,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-            positionLeft: '5%',
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/js/skipto.min.js b/content/patterns/landmarks/examples/js/skipto.min.js
diff --git a/content/patterns/landmarks/examples/main.html b/content/patterns/landmarks/examples/main.html
@@ -175,8 +175,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -195,7 +195,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -206,19 +206,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/content/patterns/landmarks/examples/navigation.html b/content/patterns/landmarks/examples/navigation.html
@@ -189,8 +189,8 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://w3c.github.io/aria-practices">WAI-ARIA Authoring Practices 1.2</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">WAI-ARIA 1.2 Specification</a></li>
+              <li><a href="https://w3.org/WAI/ARIA/apg/">ARIA Authoring Practices</a></li>
+              <li><a href="https://www.w3.org/TR/wai-aria-1.2/">ARIA 1.2 Specification</a></li>
 
               <li><a href="https://www.w3.org/TR/accname-1.2/">Accessible Name and Description Computation 1.2</a></li>
               <li><a href="http://www.w3.org/TR/core-aam-1.2/">Core Accessibility API Mappings 1.2</a></li>
@@ -209,7 +209,7 @@ <h2 id="id3">Related Documents</h2>
             W3C ARIA Authoring Practices Task Force
           </div>
           <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-            Copyright 2021
+            Copyright 2023
           </div>
         </footer>
       </div>
@@ -220,19 +220,9 @@ <h2 id="id3">Related Documents</h2>
     <script type="text/javascript" src="js/bootstrap-accessibility-2.js"></script>
     <script type="text/javascript" src="js/visua11y.js"></script>
     <script type="text/javascript" src="js/show.js"></script>
-    <script type="text/javascript">
-      // Use the SkipTo defaults, but just showing custom configuration
-      var SkipToConfig = {
-        settings: {
-          skipTo: {
-            headings: 'h1, h2',
-            attachElement: '#skip-to-attach',
-
-            colorTheme: 'aria',
-          },
-        },
-      };
+    <!-- Customize SkipTo features using the data-skipto attribute -->
+    <script data-skipto="attachElement: #skip-to-attach; colorTheme: aria"
+            src="js/skipto.min.js">
     </script>
-    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>