Enhance accessibility by adding ARIA attributes and IDs to navigation elements

specimen/contexts/archive-page.html

@@ -21,7 +21,7 @@
     <div class="masthead">
         <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
         <button class="expand-menu">Menu</button>
-        <nav class="primary-menu">
+        <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
@@ -30,7 +30,7 @@ <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
             </ul>
         </nav>
 
-        <nav class="ancillary-menu">
+        <nav class="ancillary-menu" aria-label="Ancillary navigation">
             <ul>
                 <li><button class="locale icon-attach fa-globe">English</button></li>
                 <li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
@@ -50,7 +50,7 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside>
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
@@ -115,17 +115,17 @@ <h1>Archives</h1>
 
 <aside class="sidebar">
 
-    <nav class="filter-menu">
-        <h2>Categories</h2>
+    <nav class="filter-menu" aria-labelledby="categories">
+        <h2 id="categories">Categories</h2>
         <ul>
             <li><a href="#">All posts</a></li>
             <li class="current"><a href="#">Open Culture</a></li>
             <li><a href="#">Open Knowledge</a></li>
         </ul>
     </nav>
 
-    <nav class="">
-        <h2>Related Links</h2>
+    <nav class="" aria-labelledby="related-links">
+        <h2 id="related-links">Related Links</h2>
         <ul>
             <li><a href="#">Another place</a></li>
             <li class="current"><a href="#">Law License Blog</a></li>
@@ -213,7 +213,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 
 </article>
 
-<nav class="pagination">
+<nav class="pagination" aria-label="Pagination">
     <ol>
         <li class="current"><a href="#">1</a></li>
         <li><a href="#">2</a></li>
@@ -234,7 +234,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
-    <nav class="footer-menu">
+    <nav class="footer-menu" aria-label="Footer menu">
         <ul>
             <li><a href="/about/contact">Contact</a></li>
             <li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
@@ -251,7 +251,7 @@ <h2>Contact Us</h2>
     <p><a href="mailto:info@creativecommons.org">info@creativecommons.org</a></p>
     <p><a href="tel:+14154296753">+1-415-429-6753</a></p>
 
-    <nav class="social-menu">
+    <nav class="social-menu" aria-label="Social menu">
         <ul>
             <!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
             <li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>

specimen/contexts/blog-index.html

@@ -21,7 +21,7 @@
     <div class="masthead">
         <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
         <button class="expand-menu">Menu</button>
-        <nav class="primary-menu">
+        <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
@@ -30,7 +30,7 @@ <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
             </ul>
         </nav>
 
-        <nav class="ancillary-menu">
+        <nav class="ancillary-menu" aria-label="Ancillary navigation">
             <ul>
                 <li><button class="locale icon-attach fa-globe">English</button></li>
                 <li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
@@ -50,7 +50,7 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside>
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
@@ -519,7 +519,7 @@ <h2>Images Attribution</h2>
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
-    <nav class="footer-menu">
+    <nav class="footer-menu" aria-label="Footer menu">
         <ul>
             <li><a href="/about/contact">Contact</a></li>
             <li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
@@ -536,7 +536,7 @@ <h2>Contact Us</h2>
     <p><a href="mailto:info@creativecommons.org">info@creativecommons.org</a></p>
     <p><a href="tel:+14154296753">+1-415-429-6753</a></p>
 
-    <nav class="social-menu">
+    <nav class="social-menu" aria-label="Social menu">
         <ul>
             <!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
             <li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>

specimen/contexts/blog-post.html

@@ -21,7 +21,7 @@
     <div class="masthead">
         <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
         <button class="expand-menu">Menu</button>
-        <nav class="primary-menu">
+        <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
@@ -30,7 +30,7 @@ <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
             </ul>
         </nav>
 
-        <nav class="ancillary-menu">
+        <nav class="ancillary-menu" aria-label="Ancillary navigation">
             <ul>
                 <li><button class="locale icon-attach fa-globe">English</button></li>
                 <li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
@@ -50,7 +50,7 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside>
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
@@ -275,7 +275,7 @@ <h3><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
-    <nav class="footer-menu">
+    <nav class="footer-menu" aria-label="Footer menu">
         <ul>
             <li><a href="/about/contact">Contact</a></li>
             <li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
@@ -292,7 +292,7 @@ <h2>Contact Us</h2>
     <p><a href="mailto:info@creativecommons.org">info@creativecommons.org</a></p>
     <p><a href="tel:+14154296753">+1-415-429-6753</a></p>
 
-    <nav class="social-menu">
+    <nav class="social-menu" aria-label="Social menu">
         <ul>
             <!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
             <li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>

specimen/contexts/default-page.html

@@ -21,7 +21,7 @@
     <div class="masthead">
         <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
         <button class="expand-menu">Menu</button>
-        <nav class="primary-menu">
+        <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
@@ -30,7 +30,7 @@ <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
             </ul>
         </nav>
 
-        <nav class="ancillary-menu">
+        <nav class="ancillary-menu" aria-label="Ancillary navigation">
             <ul>
                 <li><button class="locale icon-attach fa-globe">English</button></li>
                 <li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
@@ -50,7 +50,7 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside>
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
@@ -107,16 +107,16 @@ <h1>Frequently Asked Questions</h1>
 </header>
 
 <aside class="sidebar">
-    <nav class="contextual-menu">
-        <h2>Registration</h2>
+    <nav class="contextual-menu" aria-labelledby="registration">
+        <h2 id="registration">Registration</h2>
         <ul>
             <li><a href="#">How many hours of work does the Certificate course require?</a></li>
             <li><a href="#">What do I get with the Certificate?</a></li>
         </ul>
     </nav>
 
-    <nav>
-        <h2>Course</h2>
+    <nav aria-labelledby="course">
+        <h2 id="course">Course</h2>
         <ul>
             <li><a href="#">Does everyone participating in the course get a certificate?</a></li>
             <li><a href="#">Can I represent Creative Commons once I am CC Certified?</a></li>
@@ -207,7 +207,7 @@ <h3>Steps to launch</h3>
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
-    <nav class="footer-menu">
+    <nav class="footer-menu" aria-label="Footer menu">
         <ul>
             <li><a href="/about/contact">Contact</a></li>
             <li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
@@ -224,7 +224,7 @@ <h2>Contact Us</h2>
     <p><a href="mailto:info@creativecommons.org">info@creativecommons.org</a></p>
     <p><a href="tel:+14154296753">+1-415-429-6753</a></p>
 
-    <nav class="social-menu">
+    <nav class="social-menu" aria-label="Social menu">
         <ul>
             <!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
             <li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>

specimen/contexts/home-index.html

@@ -21,7 +21,7 @@
     <div class="masthead">
         <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
         <button class="expand-menu">Menu</button>
-        <nav class="primary-menu">
+        <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
@@ -30,7 +30,7 @@ <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
             </ul>
         </nav>
 
-        <nav class="ancillary-menu">
+        <nav class="ancillary-menu" aria-label="Ancillary navigation">
             <ul>
                 <li><button class="locale icon-attach fa-globe">English</button></li>
                 <li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
@@ -50,7 +50,7 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside>
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
@@ -381,7 +381,7 @@ <h2>Images Attribution</h2>
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
-    <nav class="footer-menu">
+    <nav class="footer-menu" aria-label="Footer menu">
         <ul>
             <li><a href="/about/contact">Contact</a></li>
             <li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
@@ -398,7 +398,7 @@ <h2>Contact Us</h2>
     <p><a href="mailto:info@creativecommons.org">info@creativecommons.org</a></p>
     <p><a href="tel:+14154296753">+1-415-429-6753</a></p>
 
-    <nav class="social-menu">
+    <nav class="social-menu" aria-label="Social menu">
         <ul>
             <!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
             <li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>

specimen/contexts/license-page.html

@@ -21,7 +21,7 @@
     <div class="masthead">
         <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
         <button class="expand-menu">Menu</button>
-        <nav class="primary-menu">
+        <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
@@ -30,7 +30,7 @@ <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
             </ul>
         </nav>
 
-        <nav class="ancillary-menu">
+        <nav class="ancillary-menu" aria-label="Ancillary navigation">
             <ul>
                 <li><button class="locale icon-attach fa-globe">English</button></li>
                 <li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
@@ -50,7 +50,7 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside>
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
@@ -110,7 +110,7 @@ <h1>License</h1>
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
-    <nav class="footer-menu">
+    <nav class="footer-menu" aria-label="Footer menu">
         <ul>
             <li><a href="/about/contact">Contact</a></li>
             <li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
@@ -127,7 +127,7 @@ <h2>Contact Us</h2>
     <p><a href="mailto:info@creativecommons.org">info@creativecommons.org</a></p>
     <p><a href="tel:+14154296753">+1-415-429-6753</a></p>
 
-    <nav class="social-menu">
+    <nav class="social-menu" aria-label="Social menu">
         <ul>
             <!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
             <li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>

specimen/contexts/person-page.html

@@ -21,7 +21,7 @@
     <div class="masthead">
         <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
         <button class="expand-menu">Menu</button>
-        <nav class="primary-menu">
+        <nav class="primary-menu" aria-label="Primary navigation">
             <ul>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Contact</a></li>
@@ -30,7 +30,7 @@ <h1><a class="identity-logo product" href="#">Vocabulary</a></h1>
             </ul>
         </nav>
 
-        <nav class="ancillary-menu">
+        <nav class="ancillary-menu" aria-label="Ancillary navigation">
             <ul>
                 <li><button class="locale icon-attach fa-globe">English</button></li>
                 <li><a class="donate icon-attach fa-heart" href="#">Donate</a></li>
@@ -50,7 +50,7 @@ <h2>Our Work Relies On You!</h2>
         <p>Help us keep the internet free and open.</p>
     </aside>
 
-    <nav class="explore-menu">
+    <nav class="explore-menu" aria-label="Explore menu">
         <ul>
             <li>
                 <a href="#">Global Network</a>
@@ -183,7 +183,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
     </article>
 </article>
 
-<nav class="pagination">
+<nav class="pagination" aria-label="Pagination">
     <ol>
         <li class="current"><a href="#">1</a></li>
         <li><a href="#">2</a></li>
@@ -204,7 +204,7 @@ <h2><a href="#">Open Access in Practice: A Conversation with President Larry Kra
 <footer>
     <a class="identity-logo" href="#">Creative Commons</a>
 
-    <nav class="footer-menu">
+    <nav class="footer-menu" aria-label="Footer menu">
         <ul>
             <li><a href="/about/contact">Contact</a></li>
             <li><a href="https://mail.creativecommons.org/subscribe" target="_blank">Newsletter</a></li>
@@ -221,7 +221,7 @@ <h2>Contact Us</h2>
     <p><a href="mailto:info@creativecommons.org">info@creativecommons.org</a></p>
     <p><a href="tel:+14154296753">+1-415-429-6753</a></p>
 
-    <nav class="social-menu">
+    <nav class="social-menu" aria-label="Social menu"
         <ul>
             <!-- <li><a class="icon-replace fa-instagram" href="#">Instagram</a></li> -->
             <li><a class="icon-replace fa-twitter" href="https://twitter.com/creativecommons" target="_blank">Twitter</a></li>