aXe fixes

Author: ericwbailey

partials/section.about.hbs

@@ -1,5 +1,5 @@
-<!-- Start of #about -->
-<aside id="about" aria-labelledby="title-about">
+<!-- Start of #section-about -->
+<aside id="section-about" aria-labelledby="title-about">
     <h2 id="title-about">About</h2>
     <p>
         Accessible, semantic markup patterns for HTML content. Uses the full <a rel="external noopener" href="http://html5doctor.com/element-index/"><cite>HTML5 Doctor Element Index</cite></a>, minus the <code translate="no">&lt;command&gt;</code> and <code translate="no">&lt;menu&gt;</code> tags.
@@ -8,4 +8,4 @@
         Reference <a rel="external noopener" href="http://alistairduggin.co.uk/">Alistair Duggin</a>'s <a rel="external noopener" href="http://aduggin.github.io/accessibility-fails/"><cite>Accessibility Fails</cite></a> for common markup pattern accessibility mistakes, and <a rel="external noopener" href="http://pauljadam.com/">Paul J. Adam</a>'s <a rel="external noopener" href="http://pauljadam.com/demos/landmarks.html"><cite>WAI-ARIA Landmarks Site Navigation Structure Demo</cite></a> for semantic, accessible page landmarks.
     </p>
 </aside>
-<!-- End of #about -->
+<!-- End of #section-about -->

partials/section.embedded.hbs

@@ -47,7 +47,7 @@
         </figcaption>
     </figure>
 
-    <h3>Notes:</h3>
+    <h3 id="notes-inline-svg">Notes:</h3>
     <ul>
         <li>
             <small>Be sure to provide values for the <code translate="no">height</code> and <code translate="no">width</code> attributes so <abbr>SVGs</abbr> won't expand to fill the page if styles don't load.</small>
@@ -142,7 +142,7 @@
         Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a> or <a download href="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4">download a file</a> for offline viewing.
     </video>
 
-    <h3>Notes:</h3>
+    <h3 id="notes-video">Notes:</h3>
     <p>
         <small>Accessibility errors concerning the video's missing audio description should go away once the <code translate="no">&lt;track&gt;</code>'s source is linked to a valid caption file.</small>
     </p>
@@ -186,9 +186,9 @@
         Please <a rel="external noopener" href="http://browsehappy.com/">consider upgrading your browser</a>.
     </canvas>
 
-    <h3>Notes:</h3>
+    <h3 id="notes-canvas">Notes:</h3>
     <p>
-        <small>Add <code translate="no">role="presentation"</code> to <code translate="no">&lt;track&gt;</code> to <a rel="external noopener" href="https://twitter.com/stevefaulkner/status/1039470607719694336">mute epeated announcement of graphic role by some screen readers</a>.
+        <small>Add <code translate="no">role="presentation"</code> to <code translate="no">&lt;track&gt;</code> to <a rel="external noopener" href="https://twitter.com/stevefaulkner/status/1039470607719694336">mute epeated announcement of graphic role by some screen readers</a>.</small>
     </p>
     <!-- End of #subsection-canvas -->
 </section>

partials/section.footer.hbs

@@ -1,5 +1,5 @@
 <!-- Start of #section-credit -->
-<footer id="section-credit" aria-labelledby="title-credit" role="contentinfo">
+<footer id="section-credit" role="contentinfo">
     <h2 id="title-credit">Credit</h2>
     <p>
         Inspired by <a rel="external noopener" href="http://mrmrs.cc/">Adam Morse</a>'s <a rel="external noopener" href="https://github.com/mrmrs/html"><cite>mrmrs/html</cite></a>.

partials/section.forms.hbs

@@ -3,7 +3,7 @@
     <h2 id="title-forms">Forms</h2>
     <form>
         <!-- Start of #subsection-text-input -->
-        <fieldset id="subsection-text-input" role="region" aria-labelledby="subtitle-text-input">
+        <fieldset id="subsection-text-input">
             <legend>
                 <h3 id="subtitle-text-input">Text Input</h3>
             </legend>
@@ -163,7 +163,7 @@
         <!-- End of #subsection-text-input -->
 
         <!-- Start of #subsection-non-text-input -->
-        <fieldset id="subsection-non-text-input" role="region" aria-labelledby="subtitle-non-text-input">
+        <fieldset id="subsection-non-text-input">
             <legend>
                 <h3 id="subtitle-non-text-input">Non-text Input</h3>
             </legend>
@@ -192,15 +192,15 @@
                     type="range" />
             </label>
 
-            <h4>Notes:</h4>
+            <h4 id="notes-non-text-input">Notes:</h4>
             <p>
                 <small>Some pointers on <a rel="external noopener" href="https://css-tricks.com/sliding-nightmare-understanding-range-input/">styling the range input</a>.</small>
             </p>
         </fieldset>
         <!-- End of #subsection-non-text-input -->
 
         <!-- Start of #subsection-select -->
-        <fieldset id="subsection-select" role="region" aria-labelledby="subtitle-select">
+        <fieldset id="subsection-select">
             <legend>
                 <h3 id="subtitle-select">Select</h3>
             </legend>
@@ -255,7 +255,7 @@
         <!-- End of #subsection-select -->
 
         <!-- Start of #subsection-checkboxes-and-radios -->
-        <fieldset id="subsection-checkboxes-and-radios" role="region" aria-labelledby="subtitle-checkboxes-and-radio-buttons">
+        <fieldset id="subsection-checkboxes-and-radios">
             <legend>
                 <h3 id="subtitle-checkboxes-and-radio-buttons">Checkboxes and Radio Buttons</h3>
             </legend>
@@ -379,7 +379,7 @@
         <!-- End of #subsection-checkboxes-and-radios -->
 
         <!-- Start of #subsection-buttons -->
-        <fieldset id="subsection-button-states" role="region" aria-labelledby="subtitle-button-states">
+        <fieldset id="subsection-button-states">
             <legend>
                 <h3 id="subtitle-button-states">Buttons</h3>
             </legend>
@@ -428,7 +428,7 @@
                 Text Button
             </span>
 
-            <h4>Notes:</h4>
+            <h4 id="notes-buttons">Notes:</h4>
             <ul>
                 <li>
                     <small>Add <code translate="no">type="button"</code> to <code translate="no">&lt;button&gt;</code> elements placed outside of forms to prevent some browsers from attempting to submit form data.</small>
@@ -447,7 +447,7 @@
         <!-- End of #subsection-buttons -->
 
         <!-- Start of #subsection-output -->
-        <fieldset id="subsection-output" role="region" aria-labelledby="subtitle-output">
+        <fieldset id="subsection-output">
             <legend>
                 <h3 id="subtitle-output">Output</h3>
             </legend>
@@ -473,7 +473,7 @@
         <!-- End of #subsection-output -->
 
         <!-- Start of #subsection-lockup -->
-        <fieldset id="subsection-lockup" role="region" aria-labelledby="subtitle-lockup">
+        <fieldset id="subsection-lockup">
             <legend>
                 <h3 id="subtitle-lockup">Lockup</h3>
             </legend>
@@ -496,15 +496,15 @@
                 I agree
             </label>
 
-            <h4>Notes:</h4>
+            <h4 id="notes-lockup">Notes:</h4>
             <p>
                 <small>Place messaging above the input field so as to not be lost when magnification or focus on mobile occurs.</small>
             </p>
         </fieldset>
         <!-- End of #subsection-lockup -->
 
         <!-- Start of #subsection-states-and-validation -->
-        <fieldset id="subsection-states-and-validation" role="region" aria-labelledby="subtitle-states-and-validation">
+        <fieldset id="subsection-states-and-validation">
             <legend>
                 <h3 id="subtitle-states-and-validation">States and Validation</h3>
             </legend>
@@ -630,7 +630,7 @@
                     Loading
                 </button>
 
-                <h5>Notes:</h5>
+                <h5 id="notes-button-states-and-validation">Notes:</h5>
                 <p>
                     <small>Use <code translate="no">:hover</code>, <code translate="no">:focus</code>, and <code translate="no">:active</code> selectors to control the other button states. Learn more about <a rel="external noopener" href="https://css-tricks.com/user-facing-state/">semantically managing state</a> and using <a rel="external noopener" href="https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23#.b1p96hsrw"><cite>Buttons in Design Systems</cite></a>.</small>
                 </p>
@@ -640,7 +640,7 @@
         <!-- End of #subsection-states-and-validation -->
 
         <!-- Start of #subsection-autocomplete -->
-        <fieldset role="region" aria-labelledby="subtitle-autocomplete" id="subsection-autocomplete">
+        <fieldset id="subsection-autocomplete">
             <legend>
                 <h3 id="subtitle-autocomplete">Autocomplete</h3>
             </legend>
@@ -787,7 +787,7 @@
                 <input
                     id="input-autocomplete-street-address"
                     name="autocomplete-street-address"
-                    autocomplete="street-address"
+                    autocomplete="shipping street-address"
                     autocorrect="off"
                     type="text" />
             </label>
@@ -836,7 +836,7 @@
                     novalidate
                     id="input-autocomplete-postal-code"
                     name="autocomplete-postal-code"
-                    autocomplete="postal-code"
+                    autocomplete="shipping postal-code"
                     autocorrect="off"
                     type="number" />
             </label>
@@ -1053,11 +1053,10 @@
                     type="file" />
             </label>
 
-            <h4>Notes:</h4>
+            <h4 id="notes-autocomplete">Notes:</h4>
             <p>
                 <small>Be sure to reference the <a rel="external noopener" href="http://spaceninja.com/2015/12/08/falsehoods-programmers-believe/"><cite>Falsehoods Programmers Believe</cite></a> collection for creating bulletproof inputs.</small>
             </p>
-
         </fieldset>
         <!-- End of #subsection-autocomplete -->
     </form>

partials/section.headings.hbs

@@ -37,7 +37,7 @@
         <p>Subtitle</p>
     </header>
 
-    <h2>Notes:</h2>
+    <h2 id="notes-headings">Notes:</h2>
     <p>
         <small>Ensure that headings create a logical order. Apply <abbr="Cascading Style Sheets">CSS</abbr> classes to control visual presentation (e.g. <code translate="no">&lt;h2 class=&quot;type-size-medium color-blue-dark&quot;&gt;Our services&lt;/h2&gt;</code> ).</small>
     </p>

partials/section.interactive.hbs

@@ -9,7 +9,7 @@
         <p>We accept cash, Visa, American Express, money orders, and personal checks.</p>
     </details>
 
-    <h4>Notes:</h4>
+    <h4 id="notes-details">Notes:</h4>
     <p>
         <small>The <code translate="no">details</code> element is currently not supported by Microsoft Edge or Internet Explorer. These browsers will <a rel="external noopener" href="https://css-tricks.com/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion/">display the content in an opened state</a>, as if the <code translate="no">open</code> attribute was applied.</small>
     </p>
@@ -24,7 +24,7 @@
         </button>
     </dialog>
 
-    <h4>Notes:</h4>
+    <h4 id="notes-dialog">Notes:</h4>
     <p>
         <small>The <code translate="no">dialog</code>'s interactivity needs to be controlled with JavaScript.</small>
     </p>

partials/section.project-link.hbs

@@ -1,5 +1,5 @@
 <!-- Start of #section-project-link -->
-<aside id="section-project-link" aria-labelledby="title-project">
+<aside id="section-project-link">
     <a href="https://github.com/ericwbailey/accessible-html-content-patterns">
         <svg aria-labelledby="project-title project-description" xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#ffffff" role="img" style="position: absolute; top: 0; right: 0">
             <title id="project-title" style="border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;">View project repository on GitHub</title>

partials/section.table-of-contents.hbs

@@ -1,5 +1,6 @@
 <!-- Start of #section-table-of-contents -->
 <nav id="section-table-of-contents" aria-labelledby="title-table-of-contents">
+    <h1>Accessible HTML Content Patterns</h1>
     <h2 id="title-table-of-contents">Table of Contents</h2>
 
     <ol>
@@ -16,12 +17,13 @@
             </ol>
         </li>
         <li><a href="#section-tables">Tables</a></li>
-        <li><a href="#section-interactive">Interactive</a></li>
+        <li><a href="#section-interactive">Interactive</a>
             <ol>
                 <li><a href="#subsection-details">Details</a></li>
                 <li><a href="#subsection-dialog">Dialog</a></li>
             </ol>
-        <li><a href="#section-embedded">Embedded</a></li>
+        </li>
+        <li><a href="#section-embedded">Embedded</a>
             <ol>
                 <li><a href="#subsection-image">Image</a></li>
                 <li><a href="#subsection-broken-image">Broken Image</a></li>
@@ -35,6 +37,7 @@
                 <li><a href="#subsection-object">Object</a></li>
                 <li><a href="#subsection-canvas">Canvas</a></li>
             </ol>
+        </li>
         <li><a href="#section-forms">Forms</a>
             <ol>
                 <li><a href="#subsection-text-input">Text Input</a></li>

partials/section.tables.hbs

@@ -89,10 +89,9 @@
         </tfoot>
     </table>
 
-    <h3>Notes:</h3>
+    <h3 id="notes-tables">Notes:</h3>
     <p>
         <small>Use <code translate="no">id</code> and <code translate="no">header</code> attributes for tables with complicated markup (colspans, row headers, etc.).</small>
     </p>
-
 </section>
 <!-- End of #section-tables -->

partials/section.text-level.hbs

@@ -22,7 +22,8 @@
         <p>
             The French phrase, <cite lang="fr" translate="no">C'est le ton qui fait la chanson</cite>, might apply here.
         </p>
-        <h4>Notes:</h4>
+
+        <h4 id="notes-ins-del">Notes:</h4>
         <ul>
             <li>
                 <small><code translate="no">&lt;mark&gt;</code>, <code translate="no">&lt;ins&gt;</code>, <code translate="no">&lt;del&gt;</code>, and <code translate="no">&lt;s&gt;</code> elements are not announced by screen readers. Consider <a rel="external noopener" href="https://developer.paciellogroup.com/blog/2017/12/short-note-on-making-your-mark-more-accessible/">using CSS to indicate their presence</a>.</small>
@@ -79,7 +80,7 @@
             <li>Blackcurrant</li>
         </ul>
 
-        <h4>Notes:</h4>
+        <h4 id="notes-lists">Notes:</h4>
         <p>
             <small>VoiceOver will not <a rel="external noopener" href="https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/">announce unordered lists properly when either the list-style-type is set to none or display is set to inline</a>.</small>
         </p>
@@ -166,7 +167,7 @@ drwxr-xr-x 9 eric staff   306 Mar 24 13:36 .git/
             </pre>
         </samp>
 
-        <h4>Notes:</h4>
+        <h4 id="notes-code">Notes:</h4>
         <p>
             <small>Apply <code translate="no">translate="no"</code> to markup that contains code examples to prevent keywords from being automatically translated.</small>
         </p>
@@ -191,7 +192,7 @@ drwxr-xr-x 9 eric staff   306 Mar 24 13:36 .git/
             <li><span role="definition" aria-label="Not equals">≠</span></li>
         </ul>
 
-        <h4>Notes:</h4>
+        <h4 id="notes-symbols">Notes:</h4>
         <p>
             <small>Certain screen readers will not <a rel="external noopener" href="http://www.deque.com/blog/dont-screen-readers-read-whats-screen-part-1-punctuation-typographic-symbols/">read certain symbols out loud</a>. Use <code translate="no">role="definition"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read.</small>
         </p>
@@ -209,7 +210,7 @@ drwxr-xr-x 9 eric staff   306 Mar 24 13:36 .git/
             <li><span role="img" aria-label="Beer emoji">🍺</span></li>
         </ul>
 
-        <h4>Notes:</h4>
+        <h4 id="notes-emoji">Notes:</h4>
         <p>
             <small>Certain screen readers will not <a rel="external noopener" href="http://tink.uk/accessible-emoji/">expose emoji as images in the accessibility treee</a>. Use <code translate="no">role="img"</code> in conjunction with <code translate="no">aria-label</code> to ensure the symbol is read.</small>
         </p>