added AT and Resource sections

content/patterns/landmarks/landmarks-pattern.html

@@ -1220,8 +1220,203 @@ <h2>Search Design Pattern</h2>
 
         </section>
 
+<!-- Assistive Technology -->
+
+        <section id="at">
+          <h2>Assistive Technologies</h2>
+
+          <p>The following sections demonstrate how various popular
+            assistive technologies support landmark navigation</p>
+
+            <ul>
+              <li><a href="#jaws">JAWS Screen Reader for Windows</a></li>
+              <li><a href="#nvda">NVDA Screen Reader for Windows</a></li>
+              <li><a href="#vo">VoiceOver Screen Reader for macOS</a></li>
+              <li><a href="#orca">ORCA Screen Reader for Linux/Gnome</a></li>
+              <li><a href="#skipto">SkipTo Landmarks &amp; Headings browser extension</a></li>
+            </ul>
+
+            <section>
+              <h2 id="jaws">JAWS Screen Reader for Windows</h2>
+              <p>The following commands are available in the JAWS screen reader (since version 15) for navigating landmarks:</p>
+
+              <table class="table table-striped table-hover" aria-labelledby="jaws">
+
+                <thead>
+                  <tr>
+                    <th>Command</th>
+                    <th>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>Q</td>
+                    <td>Go to main landmark</td>
+                  </tr>
+                  <tr>
+                    <td>R</td>
+                    <td>Go to next landmark</td>
+                  </tr>
+                  <tr>
+                    <td>Shift+R</td>
+                    <td>Go to previous landmark</td>
+                  </tr>
+                  <tr>
+                    <td>Insert+Control+R</td>
+                    <td>List of landmarks</td>
+                  </tr>
+                </tbody>
+
+              </table>
+
+              <p>Screen shot of list of landmarks in JAWS</p>
+              <p><img src="./images/landmarks-jaws.png" alt="Screen shot of list of landmarks in JAWS"></p>
+
+            </section>
+
+            <section>
+            <h2 id="nvda">NVDA Screen Reader for Windows</h2>
+               <p>The following commands are available in NVDA screen reader (since version 2014.2) for navigating landmarks:</p>
+
+              <table class="table table-striped table-hover" aria-labelledby="nvda">
+
+                <thead>
+                  <tr>
+                    <th>Command</th>
+                    <th>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>D</td>
+                    <td>Go to next landmark</td>
+                  </tr>
+                  <tr>
+                    <td>Shift+D</td>
+                    <td>Go to previous landmark</td>
+                  </tr>
+                  <tr>
+                    <td>NVDA+F7</td>
+                    <td>List of landmarks</td>
+                  </tr>
+                </tbody>
+
+              </table>
+              <p>Screen shot of list of landmarks in NVDA</p>
+                <p><img src="./images/landmarks-nvda.png" alt="Screen shot of list of landmarks in N V D A"></p>
+            </section>
+
+            <section>
+            <h2 id="vo">VoiceOver Screen Reader for macOS</h2>
+               <p>The following commands are available in VoiceOver screen reader for navigating landmarks:</p>
+              <table class="table table-striped table-hover" aria-labelledby="vo">
+
+                <thead>
+                  <tr>
+                    <th>Command</th>
+                    <th>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>W (Quick Nav)</td>
+                    <td>Go to next landmark</td>
+                  </tr>
+                  <tr>
+                    <td>Shift+W (Quick Nav)</td>
+                    <td>Go to previous landmark</td>
+                  </tr>
+                  <tr>
+                    <td>Control+Option+U, then left or right arrow key to landmark list</td>
+                    <td>List of landmarks</td>
+                  </tr>
+                </tbody>
+
+              </table>
+             <p>Screen shot of list of landmarks in VoiceOver</p>
+            <p><img src="./images/landmarks-vo.png" alt="Screen shot of list of landmarks in voice over"></p>
+            </section>
+
+            <section>
+            <h2 id="orca">ORCA Screen Reader for Linux/GNOME</h2>
+              <p>The following commands are available in ORCA Screen reader for navigating landmarks:</p>
+
+              <table class="table table-striped table-hover" aria-labelledby="orca">
+
+                <thead>
+                  <tr>
+                    <th>Command</th>
+                    <th>Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>M</td>
+                    <td>Next landmark</td>
+                  </tr>
+                  <tr>
+                    <td>Shift+M</td>
+                    <td>Previous landmark</td>
+                  </tr>
+                  <tr>
+                    <td>Alt+Shift+M</td>
+                    <td>List of landmarks</td>
+                  </tr>
+                </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>
+
+            <section>
+              <h2 id="skipto">SkipTo.js Browser Extension</h2>
+
+              <p>The SkipTo.js browser extension implements the <a href="https://www.w3.org/TR/UAAG/">User Agent Accessibility Guidelines 1.0</a> requirement <q><a href="https://www.w3.org/TR/UAAG/guidelines.html#tech-nav-structure">9.9 Allow Structured Navigation</a></q>. It does this by providing keyboard navigation to landmarks and headings on any web page.  The keyboard shortcut to open the SkipTo menu is <kbd>alt</kbd> + <kbd>0</kbd> on Windows/Linux and <kbd>option</kbd> + <kbd>0</kbd> on Mac keyboards.  SkipTo.js also includes shortcut keys for sequential navigation to landmark regions and headings.</p>
+
+              <ul style="margin-top: 1em">
+                <li><a href="https://chromewebstore.google.com/detail/skiptojs-for-chrome/mgmnhfooeifhicajoeoamlchoadbioof">SkipTo.js for Chrome</a> and should also work with <a href="https://brave.com">Brave</a> and <a href="https://vivaldi.com">Vivaldi</a> web browsers</li>
+                <li><a href="https://addons.mozilla.org/en-GB/firefox/addon/skipto-js-for-firefox">SkipTo.js for Firefox</a></li>
+                <li><a href="https://addons.opera.com/en/extensions/details/skiptojs-for-opera/">SkipTo.js for Opera</a></li>
+              </ul>
+
+             <p>Screen shot of list of SkipTo.js</p>
+              <p><img src="./images/skipto.png" alt="Screen shot of list of landmarks and headings using SkipTo Landmarks &amp; Headings Browser Extension"></p>
+
+        </section>
+
+<!-- Resources -->
+
+        <section id="resources">
+          <h2>ARIA Landmark Resources</h2>
+
+          <h3>Read More</h3>
+          <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://www.paciellogroup.com/blog/2013/02/using-wai-aria-landmarks-2013/">Using WAI-ARIA Landmarks – 2013</a> (Paciello Group)</li>
+            <li><a href="https://www.paciellogroup.com/blog/2015/01/basic-screen-reader-commands-for-accessibility-testing/">Basic screen reader commands for accessibility testing</a>  (Paciello Group)</li>
+            <li><a href="http://webaim.org/projects/screenreadersurvey9/#landmarks">Screen Reader User Survey #9 Results: Landmarks/Regions</a> (WebAIM)</li>
+          </ul>
+
+          <h3>Tools</h3>
+
+          <ul>
+            <li><a href="https://github.com/skipto-landmarks-headings/page-script-5">SkipTo Landmarks &amp; Headings: Page Script (used on this page), Bookmarklets and Browser Extension</a></li>
+            <li><a href="https://skipto-landmarks-headings.github.io">SkipTo Landmarks &amp; Headings: Browser Extension</a></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="http://whatsock.com/training/matrices/visual-aria.htm">The Visual ARIA Bookmarklet</a></li>
+            <li><a href="https://ainspector.disability.illinois.edu">AInspector for Firefox</a> (Landmark Rule Category)</li>
+          </ul>
+
+        </section>
+
+
       </section>
 
+
       <section id="keyboard_interaction">
         <h2>Keyboard Interaction</h2>
         <p>Not applicable, keyboard interaction is supported by assistive technologies or browser extensions.</p>