fixing <nav> accessibility issue - putting it outside the <header>

carolynshin · Jan 20, 2017 · d8568d8 · d8568d8
1 parent 3b63adf
commit d8568d8
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 61 deletions.
diff --git a/accessibility/assessment-finished/index.html b/accessibility/assessment-finished/index.html
@@ -16,21 +16,22 @@
   <body>
     <header>
       <h1>Welcome to our wildlife website</h1>
-      <nav>
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">Our team</a></li>
-          <li><a href="#">Projects</a></li>
-          <li><a href="#">Blog</a></li>
-        </ul>
-
-        <form class="search">
-          <input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
-          <input type="submit" value="Go!">
-        </form>
-      </nav>
     </header>
 
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Blog</a></li>
+      </ul>
+
+      <form class="search">
+        <input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
+        <input type="submit" value="Go!">
+      </form>
+    </nav>
+
     <main>
       <article>
         <h2>The trouble with Bears</h2>

diff --git a/accessibility/assessment-finished/style.css b/accessibility/assessment-finished/style.css
@@ -51,10 +51,6 @@ p, li, table {
 
 /* || header layout */
 
-header {
-  margin-bottom: 10px;
-}
-
 nav, article, footer, .secondary {
   background-color: white;
 }
@@ -72,6 +68,7 @@ nav {
   background-color: ff80ff;
   display: flex;
   padding: 1% 0;
+  margin-bottom: 10px;
 }
 
 nav ul {

diff --git a/accessibility/assessment-start/index.html b/accessibility/assessment-start/index.html
@@ -16,19 +16,20 @@
   <body>
     <div class="header">
       <font size="7">Welcome to our wildlife website</font>
-      <div class="nav">
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">Our team</a></li>
-          <li><a href="#">Projects</a></li>
-          <li><a href="#">Blog</a></li>
-        </ul>
+    </div>
 
-        <form class="search">
-          <input type="search" name="q" placeholder="Search query">
-          <input type="submit" value="Go!">
-        </form>
-      </div>
+    <div class="nav">
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Blog</a></li>
+      </ul>
+
+      <form class="search">
+        <input type="search" name="q" placeholder="Search query">
+        <input type="submit" value="Go!">
+      </form>
     </div>
 
     <main>

diff --git a/accessibility/assessment-start/style.css b/accessibility/assessment-start/style.css
@@ -51,10 +51,6 @@ p, li, table {
 
 /* || header layout */
 
-header {
-  margin-bottom: 10px;
-}
-
 div[class="nav"], article, footer, .secondary {
   background-color: green;
 }
@@ -72,6 +68,7 @@ div[class="nav"] {
   background-color: ff80ff;
   display: flex;
   padding: 1% 0;
+  margin-bottom: 10px;
 }
 
 div[class="nav"] ul {

diff --git a/css/introduction-to-css/how-css-works/index.html b/css/introduction-to-css/how-css-works/index.html
@@ -9,4 +9,4 @@
     <h1>Hello World!</h1>
     <p>This is my first CSS example</p>
   </body>
-</html> 
+</html>
diff --git a/html/introduction-to-html/document_and_website_structure/index.html b/html/introduction-to-html/document_and_website_structure/index.html
@@ -18,25 +18,23 @@
 
     <header>
       <h1>Header</h1>
+    </header>
 
-      <!-- Even is it's not mandatory, it's common practice to put the main navigation menu within the main header -->
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
 
-      <nav>
-        <ul>
-          <li><a href="#">Home</a></li>
-          <li><a href="#">Our team</a></li>
-          <li><a href="#">Projects</a></li>
-          <li><a href="#">Contact</a></li>
-        </ul>
+      <!-- A Search form is another commmon non-linear way to navigate through a website. -->
 
-        <!-- A Search form is another commmong non-linear way to navigate through a website. -->
-
-        <form>
-          <input type="search" name="q" placeholder="Search query">
-          <input type="submit" value="Go!">
-        </form>
-      </nav>
-    </header>
+      <form>
+        <input type="search" name="q" placeholder="Search query">
+        <input type="submit" value="Go!">
+      </form>
+    </nav>
 
     <!-- Here is our page's main content -->
     <main>
@@ -82,4 +80,4 @@ <h2>Related</h2>
     </footer>
 
   </body>
-</html>
+</html>
diff --git a/html/introduction-to-html/document_and_website_structure/style.css b/html/introduction-to-html/document_and_website_structure/style.css
@@ -50,10 +50,6 @@ p, li {
 
 /* || header layout */
 
-header {
-  margin-bottom: 10px;
-}
-
 nav, article, aside, footer {
   background-color: white;
   padding: 1%;
@@ -63,6 +59,7 @@ nav {
   height: 50px;
   background-color: ff80ff;
   display: flex;
+  margin-bottom: 10px;
 }
 
 nav ul {
@@ -101,15 +98,15 @@ input {
 
 input[type="search"] {
   flex: 3;
-} 
+}
 
 input[type="submit"] {
   flex: 1;
   margin-left: 1rem;
   background: #333;
   border: 0;
-  color: white; 
-} 
+  color: white;
+}
 
 /* || main layout */
 

diff --git a/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html b/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html
@@ -13,11 +13,11 @@
     <h1>Extra video features example</h1>
 
     <video controls width="400" height="400"
-           loop muted
+           loop muted preload="auto"
            poster="poster.png">
       <source src="rabbit320.mp4" type="video/mp4">
       <source src="rabbit320.webm" type="video/webm">
-      <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> 
+      <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
     </video>
   </body>
-</html>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ @@
         <h1>Hello World!</h1>
         <p>This is my first CSS example</p>
       </body>
-    </html>
+    </html>