First accessability changes (#200)

* First accessability changes

* Add <main>

* <header>

components/Footer.js

@@ -3,8 +3,8 @@ import Link from 'next/link'
 import { COLORS } from '../lib/constants'
 
 const Footer = props => (
-  <div className="mt3">
+  <footer role="contentinfo" className="mt3">
-    <div className="mt3">
+    <nav role="navigation" className="mt3">
       <Link href="/about">
         <a className="link">about</a>
       </Link>
@@ -14,7 +14,7 @@ const Footer = props => (
       <a className="link" href="https://github.com/dawnlabs/carbon">
         source
       </a>
-    </div>
+    </nav>
     <div className="mt3 mb2">
       a project by{' '}
       <a className="dawn-link" href="https://dawnlabs.io">
@@ -23,7 +23,7 @@ const Footer = props => (
       ¬
     </div>
     <style jsx>{`
-      div > div {
+      footer > div {
         text-align: center;
         font-size: 14px;
         color: ${COLORS.GRAY};
@@ -46,7 +46,7 @@ const Footer = props => (
         color: #fff;
       }
     `}</style>
-  </div>
+  </footer>
 )
 
 export default Footer

components/Header.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Logo from './svg/Logo'
 
 const Header = ({ enableHeroText }) => (
-  <div className="header mb4">
+  <header role="banner" className="header mb4">
     <div className="header-content">
       <a id="link-home" href="/" aria-label="Home">
         <Logo />
@@ -33,7 +33,7 @@ const Header = ({ enableHeroText }) => (
         text-align: center;
       }
     `}</style>
-  </div>
+  </header>
 )
 
 export default Header

components/Page.js

@@ -4,7 +4,7 @@ import Header from './Header'
 import Footer from './Footer'
 
 export default ({ children, enableHeroText }) => (
-  <div className="main mt4 mb4">
+  <main className="main mt4 mb4">
     <Meta />
     <Header enableHeroText={enableHeroText} />
     <div className="page">{children}</div>
@@ -19,5 +19,5 @@ export default ({ children, enableHeroText }) => (
         align-items: center;
       }
     `}</style>
-  </div>
+  </main>
 )