Landmark Region Examples: Update related documents references to late…

…st versions (pull #1882) * Update URIs of links to related documents. * Include latest jumpTo.js * Update resources page. * Add screen shot of Orca with a list of landmarks. Co-authored-by: Matt King <[email protected]>
w3c · Oct 4, 2021 · a5c056f · a5c056f
1 parent d0299b2
commit a5c056f
Show file tree

Hide file tree

Showing 16 changed files with 173 additions and 146 deletions.
diff --git a/examples/landmarks/HTML5.html b/examples/landmarks/HTML5.html
@@ -8,12 +8,13 @@
     <link href="css/bootstrap-accessibility.css" rel="stylesheet" media="screen"/>
     <link href="css/visua11y.css" rel="stylesheet" media="screen"/>
     <link href="css/common.css" rel="stylesheet" media="screen"/>
+
   </head>
   <body>
     <div class="container">
       <header class="row">
-        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-          <img src="images/w3c.png" alt="W3C Logo" />
+        <div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
+          <img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
         </div>
         <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
           <h1>ARIA Landmarks Example</h1>
@@ -120,12 +121,12 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
-              <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
+              <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://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>
+              <li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
               <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -158,11 +159,13 @@ <h2 id="id3">Related Documents</h2>
         "settings": {
           "skipTo": {
             "headings": "h1, h2",
-            "attachElement": "header"
+            "attachElement": "#skip-to-attach",
+
+            "colorTheme": "aria"
           }
         }
       };
     </script>
-    <script type="text/javascript" src="js/SkipTo.min.js"></script>
+    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/examples/landmarks/at.html b/examples/landmarks/at.html
@@ -12,8 +12,8 @@
   <body>
     <div class="container">
       <header class="row">
-        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-          <img src="images/w3c.png" alt="W3C Logo" />
+        <div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
+          <img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
         </div>
         <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
           <h1>ARIA Landmarks Example</h1>
@@ -184,6 +184,8 @@ <h2 id="orca">ORCA Screen Reader for Linux/GNOME</h2>
                 </tbody>
 
               </table>
+             <p>Screen shot of list of landmarks in Orca</p>
+            <p><img src="images/landmarks-orca.png" alt="Screen shot of list of landmarks in orca"></p>
             </section>
 
 
@@ -204,12 +206,12 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
-              <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
+              <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://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>
+              <li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
               <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -243,11 +245,13 @@ <h2 id="id3">Related Documents</h2>
         "settings": {
           "skipTo": {
             "headings": "h1, h2",
-            "attachElement": "header"
+            "attachElement": "#skip-to-attach",
+
+            "colorTheme": "aria"
           }
         }
       };
     </script>
-    <script type="text/javascript" src="js/SkipTo.min.js"></script>
+    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/examples/landmarks/banner.html b/examples/landmarks/banner.html
@@ -12,8 +12,8 @@
   <body>
     <div class="container">
       <header class="row">
-        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-          <img src="images/w3c.png" alt="W3C Logo" />
+        <div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
+          <img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
         </div>
         <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
           <h1>ARIA Landmarks Example</h1>
@@ -46,7 +46,7 @@ <h1>ARIA Landmarks Example</h1>
             <h1 id="id1"> Banner Landmark</h1>
             <p>A <code>banner</code> landmark identifies site-oriented content at the beginning of each page within a website. Site-oriented content typically includes things such as the logo or identity of the site sponsor, and site-specific search tool. A banner usually appears at the top of the page and typically spans the full width.
             </p>
-            <p>ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#banner"><code>banner</code> landmark</a>.</p>
+            <p>ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#banner"><code>banner</code> landmark</a>.</p>
             <h2>Design Patterns</h2>
             <ul>
               <li>Each page may have one <code>banner</code> landmark.</li>
@@ -115,12 +115,12 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
-              <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
+              <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://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>
+              <li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
               <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -154,11 +154,13 @@ <h2 id="id3">Related Documents</h2>
         "settings": {
           "skipTo": {
             "headings": "h1, h2",
-            "attachElement": "header"
+            "attachElement": "#skip-to-attach",
+
+            "colorTheme": "aria"
           }
         }
       };
     </script>
-    <script type="text/javascript" src="js/SkipTo.min.js"></script>
+    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/examples/landmarks/complementary.html b/examples/landmarks/complementary.html
@@ -12,8 +12,8 @@
   <body>
     <div class="container">
       <header class="row">
-        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-          <img src="images/w3c.png" alt="W3C Logo" />
+        <div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
+          <img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
         </div>
         <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
           <h1>ARIA Landmarks Example</h1>
@@ -46,7 +46,7 @@ <h1>ARIA Landmarks Example</h1>
             <h1 id="id1"> Complementary Landmark</h1>
             <p>A <code>complementary</code> landmark is a supporting section of the document, designed to be complementary to the main content at a similar level in the DOM hierarchy, but remains meaningful when separated from the main content.
             </p>
-            <p>ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#complementary"><code>complementary</code> landmark</a></p>
+            <p>ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#complementary"><code>complementary</code> landmark</a></p>
             <h2>Design Patterns</h2>
             <ul>
               <li><code>complementary</code> landmarks should be top level landmarks (e.g. not contained within any other landmarks).</li>
@@ -177,12 +177,12 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
-              <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
+              <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://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>
+              <li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
               <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -216,11 +216,13 @@ <h2 id="id3">Related Documents</h2>
         "settings": {
           "skipTo": {
             "headings": "h1, h2",
-            "attachElement": "header"
+            "attachElement": "#skip-to-attach",
+
+            "colorTheme": "aria"
           }
         }
       };
     </script>
-    <script type="text/javascript" src="js/SkipTo.min.js"></script>
+    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/examples/landmarks/contentinfo.html b/examples/landmarks/contentinfo.html
@@ -12,8 +12,8 @@
   <body>
     <div class="container">
       <header class="row">
-        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-          <img src="images/w3c.png" alt="W3C Logo" />
+        <div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
+          <img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
         </div>
         <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
           <h1>ARIA Landmarks Example</h1>
@@ -45,7 +45,7 @@ <h1>ARIA Landmarks Example</h1>
           <main>
             <h1 id="id1"> Contentinfo Landmark</h1>
             <p> A <code>contentinfo</code> landmark is a way to identify common information at the bottom of each page within a website, typically called the "footer" of the page, including information such as copyrights and links to privacy and accessibility statements. </p>
-             <p> ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#contentinfo"><code>contentinfo</code> landmark</a>.</p>
+             <p> ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#contentinfo"><code>contentinfo</code> landmark</a>.</p>
             <h2>Design Patterns</h2>
             <ul>
               <li>Each page may have one <code>contentinfo</code> landmark.</li>
@@ -120,12 +120,12 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
-              <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
+              <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://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>
+              <li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
               <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -159,11 +159,13 @@ <h2 id="id3">Related Documents</h2>
         "settings": {
           "skipTo": {
             "headings": "h1, h2",
-            "attachElement": "header"
+            "attachElement": "#skip-to-attach",
+
+            "colorTheme": "aria"
           }
         }
       };
     </script>
-    <script type="text/javascript" src="js/SkipTo.min.js"></script>
+    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/examples/landmarks/form.html b/examples/landmarks/form.html
@@ -44,8 +44,8 @@
   <body>
     <div class="container">
       <header class="row">
-        <div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
-          <img src="images/w3c.png" alt="W3C Logo" />
+        <div id="skip-to-attach" class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
+          <img src="images/w3c.png" alt="W3C Logo" style="margin-top: 2em" />
         </div>
         <div class="col-xs-12 col-sm-9 col-md-9 col-lg-10">
           <h1>ARIA Landmarks Example</h1>
@@ -77,7 +77,7 @@ <h1>ARIA Landmarks Example</h1>
           <main>
             <h1 id="id1"> Form Landmark</h1>
             <p> A <code>form</code> landmark identifies a region that contains a collection of items and objects that, as a whole, combine to create a form when no other named landmark is appropriate (e.g. main or search). </p>
-             <p> ARIA 1.1 Specification: <a href="https://www.w3.org/TR/wai-aria-1.1/#form"><code>form</code> landmark</a></p>
+             <p> ARIA 1.2 Specification: <a href="https://www.w3.org/TR/wai-aria-1.2/#form"><code>form</code> landmark</a></p>
             <h2>Design Patterns</h2>
             <ul>
               <li>Use the <code>search</code> landmark instead of the <code>form</code> landmark when the form is used for search functionality.</li>
@@ -274,12 +274,12 @@ <h2 id="id4">Landmarks</h2>
           <aside aria-labelledby="id3">
             <h2 id="id3">Related Documents</h2>
             <ul>
-              <li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/">WAI-ARIA Authoring Practices 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/2014/REC-wai-aria-20140320/">WAI-ARIA 1.0 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA 1.1 Specification</a></li>
-              <li><a href="https://www.w3.org/TR/accname-aam-1.1/">Accessible Name and Description: Computation and API Mappings 1.1</a></li>
-              <li><a href="http://www.w3.org/TR/core-aam-1.1/">Core Accessibility API Mappings 1.1</a></li>
-              <li><a href="https://www.w3.org/TR/html-aam-1.0/">HTML Accessibility API Mappings 1.0</a></li>
+              <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://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>
+              <li><a href="https://w3c.github.io/html-aam/">HTML Accessibility API Mappings (latest editors draft)</a></li>
               <li><a href="https://html.spec.whatwg.org/">HTML Specification</a></li>
               <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a></li>
               <li><a href="https://www.w3.org/TR/using-aria/">Using ARIA in HTML</a></li>
@@ -312,11 +312,13 @@ <h2 id="id3">Related Documents</h2>
         "settings": {
           "skipTo": {
             "headings": "h1, h2",
-            "attachElement": "header"
+            "attachElement": "#skip-to-attach",
+
+            "colorTheme": "aria"
           }
         }
       };
     </script>
-    <script type="text/javascript" src="js/SkipTo.min.js"></script>
+    <script type="text/javascript" src="js/skipto.min.js"></script>
   </body>
 </html>
diff --git a/examples/landmarks/images/landmarks-orca.png b/examples/landmarks/images/landmarks-orca.png