Accessibility Overview | Contensis User Groups 2015

Taking a look at design, we explore the benefits and pitfalls in creating accessible websites. We look holistically at the process and at real examples of websites that work and those that don’t.

Transcript

2. What is accessibility? Degree to which a website is accessible to as many people as possible.
3. Accessibility •  Isn’t just for “designers” •  It’s the responsibility of the whole team
4. How it can benefit users 1.  Increases access 2.  Reduces friction 3.  Improves emotional cues 4.  Positive experiences for all users
6. 4 main types of disability See blind cataracts distracted driver
7. 4 main types of disability Hear deaf ear infection bartender
8. 4 main types of disability Speak non-verbal laryngitis heavy accent
9. 4 main types of disability Touch one arm arm injury new parent
10. 4 main types of disability What about cognitive disability?
11. 4 areas 1.  Content 2.  Design 3.  Media 4.  Technical
12. Clear content 1.  Make text content easy to read. 2.  Ensure sensible font sizes. 3.  Don’t prevent the user from resizing the fonts themselves in the browser.
13. Content hierarchy 1.  Heading structure is important. 2.  Make the content structure clear and consistent.
14. Navigation Provide consistent ways to help users navigate, find content, and determine where they are.
15. Legibility 1.  Good content is a part of good accessibility. 2.  Keep your text simple and your meaning clear.
16. Colour 1.  Use colour contrast tools to ensure your text is high-contrast enough. 2.  Beware of super-high contrast too.
17. Good :-) Bad :-( http://leaverou.github.io/contrast-ratio/
18. Buttons and links 1.  Make buttons and interactive elements easily distinguishable from non-interactive elements. 2.  Make links easy to recognise by using an underline. 3.  Use link text that makes sense out of context. Don’t use “click here”. 4.  Remember that not all your users are clicking.
19. Media 1.  Provide text transcripts for audio (and video!). 2.  Provide subtitles for video.
20. Alt text Provide text alternatives for images that helps a user understand the context of the image.
21. Forms 1.  Help users correct and avoid mistakes in their input. 2.  Make sure forms are keyboard accessible. 3.  Associate labels with the corresponding form control. 4.  Use the form elements most appropriate for the user - not the most easy for the developer.
22. JavaScript 1.  Use JavaScript with care and load it in a sensible place. 2.  If your web app needs JavaScript, ensure you use ARIA roles to guide assistive technologies.
23. This list has a role of “menubar” and aria-hidden of “false”. <ul class="nav level-1 list-reset" role="menubar" aria-hidden="false"> … </ul> Example of the ARIA role in HTML.
24. Useful accessibility checking tool http://wave.webaim.org/
25. Think about accessibility from the start Consider accessibility at every point of planning. It is content hierarchy, copy, visual design and code. Accessibility as default. Accessibility is easy to consider once you start caring about it.
26. Resources 1.  http://leaverou.github.io/contrast-ratio/ 2.  https://www.microsoft.com/en-us/design/practice#toolkit 3.  http://wave.webaim.org/ 4.  http://bradfrost.com/blog/post/carousels/ 5.  http://khan.github.io/tota11y/ 6.  http://squizlabs.github.io/HTML_CodeSniffer/