Rebuild docs

Author: ericwbailey

docs/index.html

@@ -15,7 +15,7 @@
 
 <h1>Accessible HTML Content Patterns</h1>
 
-<aside id="section__project-link" role="complementary" aria-labelledby="title__project"><!-- Start of #section__project-link -->
+<aside id="section__project-link" aria-labelledby="title__project"><!-- Start of #section__project-link -->
     <a href="https://github.com/ericwbailey/accessible-html-content-patterns">
         <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 250 250" fill="#ffffff" style="position: absolute; top: 0; right: 0">
             <title id="title__project" 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>
@@ -29,7 +29,7 @@ <h1>Accessible HTML Content Patterns</h1>
 
 <main role="main">
 
-<nav id="section__table-of-contents" role="navigation" aria-labelledby="title__table-of-contents"><!-- Start of #section__table-of-contents -->
+<nav id="section__table-of-contents" aria-labelledby="title__table-of-contents"><!-- Start of #section__table-of-contents -->
     <h2 id="title__table-of-contents">Table of Contents</h2>
     <ul>
         <li><a href="#section__about">About</a></li>
@@ -78,7 +78,7 @@ <h2 id="title__table-of-contents">Table of Contents</h2>
 
 <hr />
 
-<aside id="section__about" role="complementary" aria-labelledby="title__about"><!-- Start of #section__about -->
+<aside id="section__about" aria-labelledby="title__about"><!-- Start of #section__about -->
     <h2 id="title__about">About</h2>
 
     <p>
@@ -91,7 +91,7 @@ <h2 id="title__about">About</h2>
 
 <hr />
 
-<section id="section__headings" role="region" aria-labelledby="title__headings"><!-- Start of #section__headings -->
+<section id="section__headings" aria-labelledby="title__headings"><!-- Start of #section__headings -->
     <h2 id="title__headings">Headings</h2>
 
     <h1>First Header h1</h1>
@@ -122,10 +122,10 @@ <h6>Sixth header h6</h6>
 
 <hr />
 
-<section id="section__text-level" role="region" aria-labelledby="title__text-level"><!-- Start of #section__text-level -->
+<section id="section__text-level" aria-labelledby="title__text-level"><!-- Start of #section__text-level -->
     <h2 id="title__text-level">Text-level</h2>
 
-    <div id="subsection__content" role="region" aria-labelledby="subtitle__content"><!-- Start of #subsection__content -->
+    <div id="subsection__content" aria-labelledby="subtitle__content"><!-- Start of #subsection__content -->
         <h3 id="subtitle__content">Content</h3>
         <p>
             And he <em>looked</em> over at <strong>the alarm clock</strong>, ticking on the <i>chest</i> of <b>drawers</b>. "God in <u>Heaven</u>!" he <s>thought</s>. It was <small>half past six</small> and the <abbr>hands</abbr> were <q>quietly moving forwards</q>, it was even later <cite>than half past</cite>, more <dfn>like quarter to seven</dfn>. Had the <sub>alarm</sub> clock not <sup>rung</sup>? He <time>could</time> see from the <code>bed that it had been set</code> for four <kbd>o'clock</kbd> as it <samp>should</samp> have <var>been</var>; it <mark>certainly</mark> must have rung.
@@ -142,7 +142,7 @@ <h3 id="subtitle__content">Content</h3>
             Yes, but was it <bdi>possible</bdi> to <bdo>quietly</bdo> sleep <ruby>through</ruby> that <rt>furniture-rattling</rt> noise? <rp>True</rp>, he <span>had not slept</span> peacefully, but <del>probably</del> all the more <ins>deeply</ins> because of that. What should he do now? The next train went at seven; if he were to catch that he would have to rush like mad and the collection of samples was still not packed, and he did not at all feel particularly fresh and lively.
         </p>
     </div><!-- End of #subsection__content -->
-    <div id="subsection__links" role="region" aria-labelledby="subtitle__links"><!-- Start of #subsection__links -->
+    <div id="subsection__links" aria-labelledby="subtitle__links"><!-- Start of #subsection__links -->
         <h3 id="subtitle__links">Links</h3>
         <p>
             And even if he did catch the <a href="#">train</a> he would not avoid his boss's anger as the <a href="#" rel="external noopener">office assistant</a> would have been there to see the five o'clock train go, he would have put in his report about <a href="https://twitter.com/twitter" rel="external noopener">Gregor</a>'s not being there a long time ago. The office assistant was the boss's man, spineless, and with no understanding. What about if he reported sick? But that would be <a href="#">extremely strained and suspicious as in fifteen years of service Gregor had never once yet been ill</a>. His boss would certainly come round with the doctor from the medical insurance company, accuse his parents of having a lazy son, and accept the doctor's recommendation not to make any claim as the doctor believed that no-one was ever ill but that many were workshy. And what's more, would he have been entirely wrong in this case? Gregor did in fact, apart from excessive sleepiness after sleeping for so long, feel completely well and even felt much hungrier than usual.
@@ -154,7 +154,7 @@ <h2>Block-level link title</h2>
             </p>
         </a>
     </div><!-- End of #subsection__links -->
-    <div id="subsection__lists" role="region" aria-labelledby="subtitle__lists"><!-- Start of #subsection__lists -->
+    <div id="subsection__lists" aria-labelledby="subtitle__lists"><!-- Start of #subsection__lists -->
         <h3 id="subtitle__lists">Lists</h3>
         <h3>Unordered List</h3>
         <ul>
@@ -235,7 +235,7 @@ <h3>Definition List</h3>
             </dd>
         </dl>
     </div><!-- End of #subsection__lists -->
-    <div id="subsection__code" role="region" aria-labelledby="subtitle__code"><!-- Start of #subsection__code -->
+    <div id="subsection__code" aria-labelledby="subtitle__code"><!-- Start of #subsection__code -->
         <h3 id="subtitle__code">Code</h3>
         <code>
             <pre>
@@ -261,7 +261,7 @@ <h3 id="subtitle__code">Code</h3>
             </pre>
         </samp>
     </div><!-- End of #subsection__code -->
-    <div id="subsection__symbols" role="region" aria-labelledby="subtitle__symbols"><!-- Start of #subsection__symbols -->
+    <div id="subsection__symbols" aria-labelledby="subtitle__symbols"><!-- Start of #subsection__symbols -->
         <h3 id="subtitle__symbols">Symbols</h3>
         <ul>
             <li><span role="definition" aria-label="Plus">+</span></li>
@@ -281,7 +281,7 @@ <h3 id="subtitle__symbols">Symbols</h3>
             <small>Note: 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>role="definition"</code> in conjunction with <code>aria-label</code> to ensure the symbol is read.</small>
         </p>
     </div><!-- End of #subsection__symbols -->
-    <div id="subsection__emoji" role="region" aria-labelledby="subtitle__emoji"><!-- Start of #subsection__emoji -->
+    <div id="subsection__emoji" aria-labelledby="subtitle__emoji"><!-- Start of #subsection__emoji -->
         <h3 id="subtitle__emoji">Emoji</h3>
         <ul>
             <li><span role="img" aria-label="Peach emoji">🍑</span></li>
@@ -298,7 +298,7 @@ <h3 id="subtitle__emoji">Emoji</h3>
 
 <hr />
 
-<section id="section__tables" role="region" aria-labelledby="title__tables"><!-- Start of #section__tables -->
+<section id="section__tables" aria-labelledby="title__tables"><!-- Start of #section__tables -->
     <h2 id="title__tables">Tables</h2>
 
     <table>
@@ -396,7 +396,7 @@ <h2 id="title__tables">Tables</h2>
 
 <hr />
 
-<section id="section__embedded" role="region" aria-labelledby="title__embedded"><!-- Start of #section__embedded -->
+<section id="section__embedded" aria-labelledby="title__embedded"><!-- Start of #section__embedded -->
     <h2 id="title__embedded">Embedded</h2>
 
     <h2 id="subsection__image">Image</h2><!-- Start of #subsection__image -->
@@ -561,7 +561,7 @@ <h2 id="subsection__canvas">Canvas</h2><!-- Start of #subsection__canvas -->
 
 <hr />
 
-<section id="section__forms" role="region" aria-labelledby="title__forms"><!-- Start of #section__forms -->
+<section id="section__forms" aria-labelledby="title__forms"><!-- Start of #section__forms -->
     <h2 id="title__forms">Forms</h2>
 
     <form>
@@ -1561,7 +1561,7 @@ <h4 id="subtitle__buttons">Buttons</h4>
 
 <hr />
 
-<footer id="section__credit" role="contentinfo" aria-labelledby="title__credit"><!-- Start of #section__credit -->
+<footer id="section__credit" aria-labelledby="title__credit"><!-- Start of #section__credit -->
     <h2 id="title__credit">Credit</h2>
 
     <p>