Accessibility Improvements (#67)

hgallop · SchaeStewart · commit 29dcbdef87d0 · 2019-11-13T20:16:23.000-05:00
* Replace Favicon. Add alt Attribute to logo. Add target attribute to footer link and Join page links.

Replace favicon and add touch icon.
Add alt attribute to img tag for logo to improve accessibility.
Add target attribute with value of blank on link to github, meetup and slack.
Add padding to slack and meetup logos.

* Repair page overflowing container. Remove duplicate H1.

Remove the combination of hard-coded heights and margins to allow page to flow naturally.  Remove unused H1 tag from page.js to improve SEO performance and accessibility. Format links in join.js to match.

* Accessibility Improvements

Adjust nav/header color to improve contrast for accessibility.
Convert h5 tags in About page to p tags with a class of content-heading to improve accessibility.
 Convert Leadership heading to an h2 tag to imrove SEO and accessibility.
diff --git a/pages/about.js b/pages/about.js
@@ -26,7 +26,7 @@ const About = () => (
                     through technology.
                 </p>
 
-                <h5>For Example</h5>
+                <p className="content-heading">For Example</p>
 
                 <p>
                     What sorts of projects do we do? Mapping and recording the
@@ -38,7 +38,7 @@ const About = () => (
                     an entire city — can sometimes be forgotten.
                 </p>
 
-                <h5>Is This Just For Coders?</h5>
+                <p className="content-heading">Is This Just For Coders?</p>
 
                 <p>
                     The short answer is, {'"'}nope{'"'}. We need people from all
@@ -51,7 +51,7 @@ const About = () => (
                     we need the <em>community</em>.
                 </p>
 
-                <h5>What goes on at our meetups?</h5>
+                <p className="content-heading">What goes on at our meetups?</p>
 
                 <p>
                     We start every meetup with introductions and a welcome to
@@ -85,7 +85,7 @@ const About = () => (
                 </p>
             </div>
         </div>
-        <h1 className="subtitle is-2 content">LeaderShip</h1>
+        <h2 className="subtitle is-2 content">Leadership</h2>
         <div className="content container">add content</div>
         <h2 className="subtitle is-2">Sponsors</h2>
         <div className="content container">add content</div>
diff --git a/styles.scss b/styles.scss
@@ -2,7 +2,7 @@
 
 // app colors
 $red: hsl(9, 69%, 49%);
-$green: hsl(180, 76%, 31%);
+$green: hsl(180, 76%, 29%);
 $lightgreen: hsl(180, 76%, 40%);
 $text-white: hsl(0, 0%, 100%);
 $text-black: hsl(3, 0%, 0%);
@@ -163,6 +163,14 @@ footer a:hover {
   object-position: 100% 25%;
 }
 
+.content-heading {
+  color: #363636;
+  font-weight: 600;
+  line-height: 1.125;
+  font-size: 1.125em;
+  margin-bottom: 0.8888em;
+}
+
 .home .hero-image img {
   object-position: 0% 40%;
 }
