Keyboard accessibility updates for docs (#69)

* Adds skip to link for keyboard users * Makes navigation wrapper a nav element for screenreader support * Adds role contentinfo to footer for screenreader support * Built doc files
shoelace-style · Dec 11, 2017 · 17b1732 · 17b1732
1 parent aa6ee1b
commit 17b1732
Show file tree

Hide file tree

Showing 21 changed files with 100 additions and 61 deletions.
diff --git a/docs/alerts.html b/docs/alerts.html
@@ -12,6 +12,7 @@
   <title>Alerts</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -83,7 +84,7 @@ <h2 id="variations">Variations</h2>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/attribution.html b/docs/attribution.html
@@ -12,6 +12,7 @@
   <title>Attribution</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -68,7 +69,7 @@ <h2 id="attribution">Attribution</h2>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/badges.html b/docs/badges.html
@@ -12,6 +12,7 @@
   <title>Badges</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -112,7 +113,7 @@ <h3 id="badge-links">Badge Links</h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/browser-support.html b/docs/browser-support.html
@@ -12,6 +12,7 @@
   <title>Browser Support</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -73,7 +74,7 @@ <h2 id="browser-support">Browser Support</h2>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/buttons.html b/docs/buttons.html
@@ -12,6 +12,7 @@
   <title>Buttons</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -169,7 +170,7 @@ <h3 id="loader-buttons">Loader Buttons</h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/content.html b/docs/content.html
@@ -12,6 +12,7 @@
   <title>Content</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -196,7 +197,7 @@ <h3 id="preformatted-text-pre-">Preformatted Text <code>&lt;pre&gt;</code></h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/customizing.html b/docs/customizing.html
@@ -12,6 +12,7 @@
   <title>Customizing</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -110,7 +111,7 @@ <h3 id="creating-custom-components">Creating Custom Components</h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/dropdowns.html b/docs/dropdowns.html
@@ -12,6 +12,7 @@
   <title>Dropdowns</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -196,7 +197,7 @@ <h3 id="interactivity">Interactivity</h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/file-buttons.html b/docs/file-buttons.html
@@ -12,6 +12,7 @@
   <title>File Buttons</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -145,7 +146,7 @@ <h3 id="variations">Variations</h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/forms.html b/docs/forms.html
@@ -13,6 +13,7 @@
   <title>Forms</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -28,7 +29,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -50,7 +51,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -638,7 +639,7 @@ <h3 id="validation">Validation</h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>

diff --git a/docs/grid-system.html b/docs/grid-system.html
@@ -12,6 +12,7 @@
   <title>Grid System</title>
 </head>
 <body>
+  <a href="#content" class="skip">Skip to content</a>
 
   <header id="head" class="text-center">
     <h1>
@@ -27,7 +28,7 @@ <h1>
 
   <main class="container">
     <div class="row">
-      <div class="col-md-3">
+      <nav class="col-md-3">
         <ul id="nav">
           <li><a href="installing.html">Installing</a></li>
           <li><a href="customizing.html">Customizing</a></li>
@@ -49,7 +50,7 @@ <h1>
           <li><a href="browser-support.html">Browser Support</a></li>
           <li><a href="attribution.html">Attribution</a></li>
         </ul>
-      </div>
+      </nav>
 
       <div class="col-md-9">
         <div id="content">
@@ -303,7 +304,7 @@ <h3 id="nested-grids">Nested Grids</h3>
       </div>
   </main>
 
-  <footer id="foot">
+  <footer id="foot" role="contentinfo">
     <a href="../index.html">
       <img src="../source/img/wordmark.svg" alt="Shoelace logo">
     </a>