Improve accessibility

[sapegin]

I've done a quick a11y audit, and here are some things we can improve. Most of the changes are trivial.

• [ ] Add eslint-plugin-jsx-a11y
• [ ] Add focused style for links (disabled with outline:0)
• [ ] Enable page zooming on mobile devices <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
• [ ] Improve colors contrast ratio (required 4.5:1)
  • [ ] Links (current ratio is 2.29:1)
  • [ ] Check other colors too
• [ ] Hide heading links from screen readers Right now we have two tags without any content. I guess we can use only one link.
  Screenshot

  
• [ ] Ensures all content is contained within a landmark region
  • [ ] Wrap main content in a main landmark element (<main role="main">)
  • [ ] Wrap heading and footer in and
    tags
• [x] Use one level of headings on the homepage for “Learn JavaScript. SurviveJS will…”
  Screenshot

  
• [ ] Make search more accessible. It has some aria-attributes but there’s no way to know that it’s a search field
• [ ] Make sure that all input fields have accessible labels
• [x] Add accessible titles books in the footer (right now we only have an image with an alt like “Book name cover”)
• [ ] Make sure that the hamburger menu is accessible
• [ ] Subscription form: add focus style to the submit button
• [ ] Add "skip navigation" link

Looks good. Maybe you can do a couple of passes (separate PRs) on this as you prefer. 👍

[sapegin]

Yeah, there would be too much to do at once ;-)