Add accessibility specs / resolve accessibility errors.

[cycomachead]

• creates specs/ and a specs.yml workflow which run axe on all pages
• "pages" are determined by what's in sitemap.xml which means the (trivial) redirect page isn't tested.
• We currently only test *.html and / (e.g /index.html) pages. I don't believe any *.shtml or other renderable pages exist.
• The only supported CI browser is the current version of Chrome via Selenium webdriver. Others can be easily added in the future if necessary. (See the configs in beautyjoy/BJC-Teacher-Tracker for examples)

To run tests locally:

• bundle install
• bundle exec rspec
• If you see a lot of failures I recommend bundle exec rspec --next-failure to quickly iterate through tests 1 by 1

you will need Google Chrome and a matching chromedriver installed (brew install chromedriver works well.)

Customizing Tests

• By default the tests are only running WCAG 2.0 AA. That's because in terms of compliance that's the legal target.
• We should be passing however all the tests for 2.2AA and likely Axe's best practices suite.
• Some elements (for valid reasons) cannot meet accessibility requirements. :( This site currently only has on case, a stripe button. However, the tests provide a workaround:

Workarounds

Having a Green CI suite is very useful. Don't let tests fail because there's one impossible condition. Use the attribute data-a11y-external-errors="true" to exclude an element from the axe test failures.

<div data-a11y-external-errors="true">
My Inaccessible Content Is here...
</div>

⚠️ Be careful: Obviously, you can overuse this. This name was chosen because we had an external iframe (stripe) embedding a button we couldn't control... So that's why it's called "external". You can add HTML selectors as needed to the excluded_elements array in the accessibility specs. (See https://github.com/beautyjoy/beautyjoy.github.io/pull/269/files#diff-4aa11e0c6d635527894cafc21aa2fb01be2a447bd92fd2e410463e45310bd025R43) ...Arguably, we should disable as few tests as possible for specific elements, though this can lead to more confusion than necessary at times.

The name of these exclusions is intended to make it clear that some element is inaccessible. It should be clear to other authors that this is something that should be addressed in the future.

---

Accessibility Changes:

• minor color changes for links. Mostly just darkening the defaults.
• lots of images needed alt text.
• darkened the home page buttons (which cannot pass automatic color contrast tests due to transparency..)
• removed social share links (twitter and tumblr) due to inaccessibility and because well not one should use them...
• tidied a few messed up aria roles