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
Thanks for reading!
Top comments (0)