[a11y] Accessibility issues

[kennethlarsen]

I think it's time to make the Ember website more inclusive. I noticed some low hanging fruits which would make emberjs.com more accessible. For developing on this I suggest using the tota11y toolbar to validate fixes.

Frontpage

• Missing alt text in MORE PRODUCTIVE OUT OF THE BOX-section (might need role="presentation" instead)

• Missing alt text in WHO'S USING EMBER.JS?-section. Should at least name the company shown in the image.

• Missing alt text in BUY EMBER.JS GEAR AND SUPPORT DEVELOPMENT-section. Should describe what is shown (e.g "Black Ember.js t-shirt").

Learn

• Nonconsecutive heading level used. FREQUENTLY ASKED QUESTIONS (h1) -> HOW DO I FUTURE-PROOF MY EMBER.JS APPLICATION? (h3). Should be h1 -> h2.

• Quick start, Tutorial and Guides has an empty link text

• DEPRECATION GUIDES has no link text

• SUPER RENTALS has no link text

• BUILDS has no link text

• API DOCS has no link text

Builds

• First heading is not an h1. EMBER.JS RELEASE CYCLE is h2, not h1

Footer

• Heroku and Fastly links have a description of null. Consider rearranging the tags or including special screen reader text.

[MelSumner]

There is a larger effort to address this issue, but if someone wanted to work on this in the meantime, it's great practice!

[danilovaz]

Can I get any of these items to do? I already did some alt and title items. There are also some points that we can improve on semantics rather than using divs. @kennethlarsen Excellent tool, I did not know.

[localpcguy]

Just wanted to say that it's kind of a myth that screen readers don't read dynamic JavaScript:
http://a11yproject.com/posts/myth-screen-readers-dont-use-javascript/

According to a January 2014 survey conducted by WebAIM, 97.6% of screen reader users have JavaScript enabled.

Obviously the thing to do is to actually try the page on a screen reader, but I'm not sure I agree with @ciolt - screen readers are for more than just blind users, and good accessibility helps everyone, not just the disabled.

FWIW, Mac voiceover can read the content for the /builds page just fine.

[kennethlarsen]

Also, aria-live is very helpful for dynamically loaded Javascript
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

[kennethlarsen]

@MelSumner Did you larger effort address this issue or is it still open for PRs?

[MelSumner]

@kennethlarsen a lot of this should be fixed- I will try to make time to go through each one of these (they should be separate issues).