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
• 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
• 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

[bebraw]

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 ;-)