Accessibility 101
Alain Vagner & Anne Cavalier, 05/2018
Forked from:
http://slides.com/annecav/sensibilisation-a-l-accessibilite-octo#/
Or perhaps a little bit, but mainly...
... returns from mountain holidays. He sprained his wrist. Moving the mouse is difficult for him and using the trackpad is worse.
What can we do for him?
Like 10 % of men, he is color blind. It is difficult for him to see certain color differences.
What can we do for him?
... starts developing presbyopia. At the end of the day, the characters of the website she usually visit become too small for her.
What can we do for her?
... is a software developer. He is born blind and has learned how to use a screen reader.
What can we do for him?
... works in an open space. She has muted the sound of her computer to avoid disturbing her colleagues but she would like to see this video.
What can we do for her?
... got a child a few weeks ago. He is tired and it is difficult for him to focus.
What can we do for him?
... codes everywhere, even on his mobile phone. He reads lots of documentation. To avoid spending all his data plan, he disabled images and JavaScript in his Web browser.
What can we do for him?
Source: http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it
Disability is the consequence of an impairment that may be physical, cognitive, mental, sensory, emotional, developmental, or some combination of these that result in restrictions on an individual's ability to participate in what is considered "normal" in their everyday society. A disability may be present from birth, or occur during a person's lifetime.
-- Wikipedia
to enable everyone to use our websites:
Source: http://www.interactiveaccessibility.com/accessibility-statistics
Sources: http://ec.europa.eu/ipg/standards/accessibility/index_en.htm
http://accessibleicon.org/
≃
In the US, lots of class actions
In Luxembourg, no class action, yet...
Information and UI components should be shown to users in a way that enable users to perceive them.
The UI components should be usable.
Informations and usage of the UI should be understandable.
8. Mandatory elements
9. Information structure
10. Information presentation
11. Forms
12. Navigation
13. Explicit User control
Provide a short textual alternative adapted to the context (link, decoration, information)
-> Jobs: front-end dev, writer
Provide to each frame (iframe) a relevant title
-> Jobs: front-end dev, writer
Information should not be given only by color
Check that color contrasts are sufficient
-> Jobs: designer, front-end dev
Each media (temporal or non-temporal) should be compatible with assistive technologies
-> Jobs: front-end dev
Tables should only be used for tabular data!
One should be able to associate each cell with the respective headers
-> Jobs: front-end dev
Dynamic behaviors (JS) should be controllable by keyboard & mouse
-> Jobs: front-end dev
Each web page should have a relevant title.
Example: Search "untitled document" on Google
-> Jobs: front-end dev, writer
Each web page should use the following elements: <header>, <nav>, <main>, <footer>
-> Jobs: front-end dev
The web page should be readable when stylesheets are disabled.
-> Jobs: front-end dev
Each form field should have a label (for/id) with an unique id in the page
-> Jobs: front-end dev
The menu (or the main navigation element) should be at the same place on each page.
-> Jobs: usability expert, designer
The user should be warned when opening a new window (title of the link)
-> Jobs: designer, developer, writer
One random website...
If a JavaScript-based component matches an ARIA design pattern, it should conform to this design pattern.
-> W3C Design patterns WAI-ARIA
Inclusive patterns by Heydon Pickering
Adobe megamenu improved by Terrill Thompson