A11y improvements (#79)

kennethlarsen · phated · commit 09a37f5ab5a4 · 2018-01-16T13:15:26.000-07:00
* Improved color contrast to meet AA standards

* Added missing alt tags to images

* Added landmarkds
diff --git a/css/main.css b/css/main.css
@@ -79,7 +79,7 @@ div.logo-cli {
   margin-top: 10px;
 }
 p.paragraph {
-  color: rgba(0, 0, 0, .5);
+  color: #767676;
 }
 .text-center {
   text-align: center;
@@ -358,7 +358,7 @@ p.paragraph {
   color: rgba(130 ,140,91,1);
 }
 .hljs-built_in {
-  color: rgba(112,75,40,1);
+  color: #7b5c44;
 }
 .editor-prefixed:before {
   content: "$ ";
diff --git a/index.html b/index.html
@@ -11,18 +11,18 @@
 </head>
 
 <body>
-  <header class="header">
+  <header class="header" role="banner">
     <div class="container-lrg">
       <div class="col-12 spread aligncenter">
         <a class="logo mobile-hide">
-          <img class="logo-img" src="img/gulp-white-text.svg">
+          <img class="logo-img" src="img/gulp-white-text.svg" alt="Gulp">
         </a>
-        <div class="nav mobile-col-12 spread">
+        <nav class="nav mobile-col-12 spread" role="navigation">
           <a class="nav-link" href="https://github.com/gulpjs/gulp/blob/master/docs/API.md">Docs</a>
           <a class="nav-link" href="https://gulpjs.com/plugins">Plugins</a>
           <a class="nav-link" href="https://twitter.com/gulpjs">Twitter</a>
           <a class="nav-link" href="https://github.com/gulpjs/gulp/blob/master/CONTRIBUTING.md">Contribute</a>
-        </div>
+        </nav>
       </div>
     </div>
 
@@ -62,24 +62,24 @@ <h2 class="paragraph">
     </div>
   </header>
 
-  <div class="feature3">
+  <main class="feature3" role="main">
     <div class="container-lrg flex baseline">
       <div class="col-4">
-        <b class="svg center"><img class="mask-img" src="img/browser.svg"></b>
+        <b class="svg center"><img class="mask-img" src="img/browser.svg" alt=""></b>
         <h3 class="subheading center">Simple Usage</h3>
         <p class="paragraph">
           By preferring code over configuration, node best practices, and a minimal API surface - gulp makes things simple like never before.
         </p>
       </div>
       <div class="col-4">
-        <b class="svg center"><img class="mask-img" src="img/guage.svg"></b>
+        <b class="svg center"><img class="mask-img" src="img/guage.svg" alt=""></b>
         <h3 class="subheading center">Efficient Builds</h3>
         <p class="paragraph">
           Using the power of node streams, gulp gives you fast builds that don't write intermediary files to disk.
         </p>
       </div>
       <div class="col-4">
-        <b class="svg center"><img class="mask-img" src="img/atom.svg"></b>
+        <b class="svg center"><img class="mask-img" src="img/atom.svg" alt=""></b>
         <h3 class="subheading center">Quality Ecosystem</h3>
         <p class="paragraph">
           By enforcing strict guidelines, we ensure our plugins stay simple and work as expected.
@@ -117,7 +117,7 @@ <h3 class="subheading">
         </p>
       </div>
     </div>
-  </div>
+  </main>
 
   <div class="whatisgulp">
     <div class="container-lrg">
diff --git a/js/script.js b/js/script.js
@@ -59,10 +59,13 @@
       link.className = 'supporter supporter--skeleton';
       if (supporter.website) {
         link.href = supporter.website;
+        img.alt = supporter.website;
       } else if (supporter.twitterHandle) {
         link.href = 'https://twitter.com/' + supporter.twitterHandle
+        img.alt = supporter.twitterHandle;
       } else {
         link.href = 'https://opencollective.com/' + supporter.slug
+        img.alt = supporter.slug;
       }
 
       link.appendChild(img);

Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,7 @@ div.logo-cli {`
`79`	`79`	`margin-top: 10px;`
`80`	`80`	`}`
`81`	`81`	`p.paragraph {`
`82`		`- color: rgba(0, 0, 0, .5);`
	`82`	`+ color: #767676;`
`83`	`83`	`}`
`84`	`84`	`.text-center {`
`85`	`85`	`text-align: center;`
`@@ -358,7 +358,7 @@ p.paragraph {`
`358`	`358`	`color: rgba(130 ,140,91,1);`
`359`	`359`	`}`
`360`	`360`	`.hljs-built_in {`
`361`		`- color: rgba(112,75,40,1);`
	`361`	`+ color: #7b5c44;`
`362`	`362`	`}`
`363`	`363`	`.editor-prefixed:before {`
`364`	`364`	`content: "$ ";`