updated landmark design pattern

content/patterns/landmarks/landmarks-pattern.html

@@ -38,23 +38,56 @@ <h2>About This Pattern</h2>
       </section>
 
       <section id="examples">
-        <img alt="" src="../../images/pattern-landmarks.svg">
         <h2>Examples</h2>
-        <ul>
-          <li><a href="examples/main.html">Main Landmark Example</a></li>
-          <li><a href="examples/navigation.html">Navigation Landmark Example</a></li>
-          <li><a href="examples/search.html">Search Landmark Example</a></li>
-          <li><a href="examples/banner.html">Banner Landmark Example</a></li>
-          <li><a href="examples/contentinfo.html">Contentinfo Landmark Example</a></li>
-          <li><a href="examples/complementary.html">Complementary Landmark Example</a></li>
-          <li><a href="examples/form.html">Form Landmark Example</a></li>
-          <li><a href="examples/region.html">Region Landmark Example</a></li>
-        </ul>
+
+        <p>The following table provides information on the landmark regions used on this page.</p>
+
+        <table class="data attributes">
+          <caption>
+            Landmark Roles Used on this Page
+          </caption>
+          <thead>
+            <tr>
+              <th>Landmark Role</th>
+              <th>Usage</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><code>complementary</code></td>
+              <td>An <code>aside</code> element with a <code>aria-label</code> is used to define a <code>complementary</code> region with the accessible name of "feedback".</td>
+            </tr>
+            <tr>
+              <td><code>contentinfo</code></td>
+              <td>A <code>footer</code> element with a <code>aria-label</code> is used to define a <code>contentinfo</code> region with the accessible name of "site".</td>
+            </tr>
+            <tr>
+              <td><code>banner</code></td>
+              <td>A <code>header</code> element is used to define a <code>banner</code> region.  Since there is only one banner landmark on the page, no accessible name is needed.</td>
+            </tr>
+            <tr>
+              <td><code>main</code></td>
+              <td>A <code>main</code> element is used to define a <code>main</code> region.  Since there is only one main landmark on the page, no accessible name is needed.</td>
+            </tr>
+            <tr>
+              <td><code>navigation</code></td>
+              <td>There are two <code>navigation</code> regions on the page.  The both use the <code>nav</code> element to create the navigation regions.  The accessible name "APG" for the first one is defined using <code>aria-label</code> and second on with the name "Page Contents" is defined using <code>aria-labelledby</code> to reference the associated <code>h2</code> element.</td>
+            </tr>
+            <tr>
+              <td><code>region</code></td>
+              <td>There are no <code>region</code> regions defined on this page.</td>
+            </tr>
+            <tr>
+              <td><code>search</code></td>
+              <td>There are no <code>search</code> regions defined on this page.</td>
+            </tr>
+          </tbody>
+        </table>
       </section>
 
       <section id="keyboard_interaction">
         <h2>Keyboard Interaction</h2>
-        <p>Not applicable.</p>
+        <p>Web browsers currently do not provide keyboard support for navigation to landmark regions.  Screen readers and other types of assistive technology do provide their own keyboard support to view and navigate landmarks regions.</p>
       </section>
 
       <section id="roles_states_properties">
@@ -64,6 +97,35 @@ <h2>WAI-ARIA Roles, States, and Properties</h2>
         </p>
       </section>
 
+<!-- Resources -->
+
+        <section id="resources">
+          <h2>ARIA Landmark Resources and Tools</h2>
+
+          <h2>Read More</h2>
+          <ul>
+            <li><a href="https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA11">ARIA11: Using ARIA landmarks to identify regions of a page</a> (WCAG 2.0 Technique)</li>
+            <li><a href="https://www.w3.org/TR/WCAG20-TECHS/aria#ARIA20">ARIA20: Using the region role to identify a region of the page</a> (WCAG 2.0 Technique)</li>
+            <li><a href="https://alistapart.com/column/wai-finding-with-aria-landmark-roles">WAI-finding with ARIA Landmark Roles</a> (A List Apart)</li>
+            <li><a href="https://vispero.com/resources/using-wai-aria-landmark-roles/">Using WAI-ARIA Landmarks – updated</a> (Vispero)</li>
+            <li><a href="https://vispero.com/resources/basic-screen-reader-commands-for-accessibility-testing/">Basic screen reader commands for accessibility testing</a>  (Vispero)</li>
+            <li><a href="https://webaim.org/projects/screenreadersurvey10/#landmarks">Screen Reader User Survey #10 Results: Landmarks/Regions</a> (WebAIM)</li>
+          </ul>
+
+          <h2>Tools</h2>
+
+          <ul>
+            <li><a href="https://opena11y.github.io/h2l-side-panel/">Headings, Landmarks and Links Browser Extensions</a> (H2L)</li>
+            <li><a href="https://skipto-landmarks-headings.github.io/page-script-5/extensions.html">SkipTo.js: Browser Extensions</a></li>
+            <li><a href="https://skipto-landmarks-headings.github.io/page-script-5/page-script.html">SkipTo.js: Page Script</a> <em>(used on this page)</em></li>
+            <li><a href="http://matatk.agrip.org.uk/landmarks/">Landmarks Browser Extension</a></li>
+            <li><a href="https://accessibility-bookmarklets.org/">Accessibility Bookmarklets: Landmark Bookmarklet</a></li>
+            <li><a href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm">The Visual ARIA Bookmarklet</a></li>
+            <li><a href="https://opena11y.github.io/ainspector/">Accessibility Inspector for WCAG Evaluation</a> (Landmark Rule Category)</li>
+          </ul>
+
+        </section>
+
     </main>
   </body>
 </html>

content/practices/landmark-regions/js/image-resizing.js

@@ -0,0 +1,24 @@
+/*
+ *   This content is licensed according to the W3C Software License at
+ *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ *   File:  image-resizing.js
+ *
+ *   Desc:   Resizes images to fit in figure elements
+ */
+
+'use strict';
+
+function resizeImagesInFigures() {
+  const figures = document.querySelectorAll('#at figure');
+  for (let i = 0; i < figures.length; i++) {
+    const image = figures[i].querySelector('img');
+    if (image) {
+      const rect = figures[i].getBoundingClientRect();
+      image.style.width = rect.width - 16 + 'px';
+    }
+  }
+}
+
+window.addEventListener('load', resizeImagesInFigures);
+window.addEventListener('resize', resizeImagesInFigures);

content/practices/landmark-regions/landmark-regions-practice.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="../../shared/css/core.css">
     <script src="../../shared/js/highlight.pack.js"></script>
     <script src="../../shared/js/app.js"></script>
+    <script src="./js/image-resizing.js"></script>
     <script data-skipto="colorTheme:aria; displayOption:popup; containerElement:div" src="../../shared/js/skipto.js"></script>
   </head>
   <body>
@@ -143,7 +144,7 @@ <h3 class="widget-name">Banner</h3>
 
             <li>The <code>banner</code> landmark should be a top-level landmark.</li>
 
-            <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements), each <code>document</code> or <code>application</code> role may have one <code>banner</code> landmark.</li>
+            <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and custom elements), each <code>document</code> or <code>application</code> role may have one <code>banner</code> landmark.</li>
 
             <li>If a page includes more than one <code>banner</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
           </ul>
@@ -170,11 +171,6 @@ <h4>ARIA Techniques</h4>
             <p>If the HTML <code>header</code> element technique is not being used, a <code>role=&quot;banner&quot;</code> attribute should be used to define a <code>banner</code> landmark.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-
-            <p><a href="../../patterns/landmarks/examples/banner.html">Banner Landmark Example</a></p>
-          </section>
         </section>
 
         <section id="aria_lh_complementary">
@@ -202,11 +198,6 @@ <h4>ARIA Technique</h4>
             <p>If the HTML <code>aside</code> element technique is not being used, use a <code>role=&quot;complementary&quot;</code> attribute to define a <code>complementary</code> landmark.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-
-            <p><a href="../../patterns/landmarks/examples/complementary.html">Complementary Landmark Example</a></p>
-          </section>
         </section>
 
         <section id="aria_lh_contentinfo">
@@ -219,7 +210,7 @@ <h3 class="widget-name">Contentinfo</h3>
 
             <li>The <code>contentinfo</code> landmark should be a top-level landmark.</li>
 
-            <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements), each <code>document</code> or <code>application</code> role may have one <code>contentinfo</code> landmark.</li>
+            <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and custom elements), each <code>document</code> or <code>application</code> role may have one <code>contentinfo</code> landmark.</li>
 
             <li>If a page includes more than one <code>contentinfo</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
           </ul>
@@ -247,10 +238,6 @@ <h4>ARIA Technique</h4>
             <p>If the HTML <code>footer</code> element technique is not being used, a <code>role=&quot;contentinfo&quot;</code> attribute should be used to define a <code>contentinfo</code> landmark.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-            <p><a href="../../patterns/landmarks/examples/contentinfo.html">Contentinfo Landmark Example</a></p>
-          </section>
         </section>
 
         <section id="aria_lh_form">
@@ -291,11 +278,6 @@ <h4>ARIA Technique</h4>
             <p>Use the <code>role=&quot;form&quot;</code> to identify a region of the page; do not use it to identify every form field.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-
-            <p><a href="../../patterns/landmarks/examples/form.html">Form Landmark Example</a></p>
-          </section>
         </section>
 
         <section id="aria_lh_main">
@@ -308,7 +290,7 @@ <h3 class="widget-name">Main</h3>
 
             <li>The <code>main</code> landmark should be a top-level landmark.</li>
 
-            <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and <code>frame</code> elements), each <code>document</code> or <code>application</code> role may have one <code>main</code> landmark.</li>
+            <li>When a page contains nested <code>document</code> and/or <code>application</code> roles (e.g. typically through the use of <code>iframe</code> and custom elements), each <code>document</code> or <code>application</code> role may have one <code>main</code> landmark.</li>
 
             <li>If a page includes more than one <code>main</code> landmark, each should have a unique label (see <a href="#aria_lh_step3">Step 3</a> above).</li>
           </ul>
@@ -323,11 +305,6 @@ <h4>ARIA Technique</h4>
             <p>If the HTML <code>main</code> element technique is not being used, use a <code>role=&quot;main&quot;</code> attribute to define a <code>main</code> landmark.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-
-            <p><a href="../../patterns/landmarks/examples/main.html">Main Landmark Example</a></p>
-          </section>
         </section>
 
         <section id="aria_lh_navigation">
@@ -351,11 +328,6 @@ <h4>ARIA Technique</h4>
             <p>If the HTML <code>nav</code> element technique is not being used, use a <code>role=&quot;navigation&quot;</code> attribute to define a <code>navigation</code> landmark.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-
-            <p><a href="../../patterns/landmarks/examples/navigation.html">Navigation Landmark Example</a></p>
-          </section>
         </section>
 
         <section id="aria_lh_region">
@@ -381,11 +353,6 @@ <h4>ARIA Technique</h4>
             <p>If the HTML <code>section</code> element technique is not being used, use a <code>role=&quot;region&quot;</code> attribute to define a <code>region</code> landmark.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-
-            <p><a href="../../patterns/landmarks/examples/region.html">Region Landmark Example</a></p>
-          </section>
         </section>
 
         <section id="aria_lh_search">
@@ -409,13 +376,9 @@ <h4>ARIA Technique</h4>
             <p>If the HTML <code>search</code> element technique is not being used, use a <code>role=&quot;search&quot;</code> attribute to define a <code>search</code> landmark.</p>
           </section>
 
-          <section>
-            <h4>Examples</h4>
-
-            <p><a href="../../patterns/landmarks/examples/search.html">Search Landmark Example</a></p>
-          </section>
         </section>
       </section>
+
     </main>
   </body>
 </html>