A11y

#a11y

Web Accessibility: also known as A11y (a numeronum A(11 chars)Y pronounced ally.

I went to an A11y talk by Alex Brenon who is a member of the accessibility github team.
Her slides are available here

She talked about the less obvious use cases for making your site more accessible as well as the hearing and site impaired.

Is it important to consider the cases where a site may be difficult to use.

The standards for accessibility are set out by

. W3CAG: pronounced wocag.
. WAI
. W3C

Some non obvious cases to affect a sites use is:
. Low internet speed
. Temporary injuries people get, can’t type for a while

Everyone benefits from it.

Tota11y is common tag, as well as #a11y

Highlights from the overview:
Alt-text: description should be good, but not too wordy just important parts
Also helps with SEO (search engines)
Screen readers read the alt tags.

If Slow network the alt shows us first so everyone gains.

Never use words such as 'pic of' or 'image' in alt text

W3c site helps create a ratio for colour ratio: higher the better
AA - levels of how much you are conforming to standards
AAA - full set

Think about how Perceivable you site is:
Colours / alt text

Is your site Operable?

i.e. Keyboard friendly without mouse and Tab index accessibile and it makes sense sequentially and the Ordering: make sure there are Skiplinks at the top of page, brings you to the main content, without the navigation.

The 3rd step of wcag is making your site understandable.

Lang attribute in header, and when language changes within content
With span.

Final thing is Robustness
Good Html practices , Tag id once only, classnames clear.

Check your site with an auto and manual Audit:
Wave - by webaim

Axe - a chrome extension you can add

Always check:
Can you mute the sound?
No mouse - Can you tab through
No sight - alt tags for images.

For further reading on ReactJS sites

Screen readers to check : Jaws and Nba
Other usefull tools: Chrome lense

Resources:
https://a11yproject.com/about

https://theblog.adobe.com/different-breaking-accessibility-universality-inclusion-design/

https://www.w3schools.com/html/html_accessibility.asp

Alex is available at;
@staralexb