Accessibility Overview | Contensis User Groups 2015
Transcript of Accessibility Overview | Contensis User Groups 2015
![Page 1: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/1.jpg)
![Page 2: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/2.jpg)
What is accessibility?
Degree to which a website is accessible to as many people as possible.
![Page 3: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/3.jpg)
Accessibility
• Isn’t just for “designers”• It’s the responsibility of the whole
team
![Page 4: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/4.jpg)
How it can benefit users
1. Increases access2. Reduces friction3. Improves emotional cues4. Positive experiences for all users
![Page 5: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/5.jpg)
![Page 6: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/6.jpg)
4 main types of disability
Seeblind cataracts distracted
driver
![Page 7: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/7.jpg)
4 main types of disability
Heardeaf ear
infectionbartender
![Page 8: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/8.jpg)
4 main types of disability
Speaknon-verbal
laryngitis heavy accent
![Page 9: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/9.jpg)
4 main types of disability
Touchone arm
arm injury new parent
![Page 10: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/10.jpg)
4 main types of disability
What about cognitive disability?
![Page 11: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/11.jpg)
4 areas
1. Content2. Design3. Media 4. Technical
![Page 12: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/12.jpg)
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.
![Page 13: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/13.jpg)
Content hierarchy
1. Heading structure is important. 2. Make the content structure clear and
consistent.
![Page 14: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/14.jpg)
Navigation
Provide consistent ways to help users navigate, find content, and determine where they are.
![Page 15: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/15.jpg)
Legibility
1. Good content is a part of good accessibility. 2. Keep your text simple and your meaning clear.
![Page 16: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/16.jpg)
Colour
1. Use colour contrast tools to ensure your text is high-contrast enough.
2. Beware of super-high contrast too.
![Page 17: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/17.jpg)
Good :-) Bad :-(
http://leaverou.github.io/contrast-ratio/
![Page 18: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/18.jpg)
Buttons and links1. 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.
![Page 19: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/19.jpg)
Media
1. Provide text transcripts for audio (and video!).2. Provide subtitles for video.
![Page 20: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/20.jpg)
Alt text
Provide text alternatives for images that helps a user understand the context of the image.
![Page 21: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/21.jpg)
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.
![Page 22: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/22.jpg)
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.
![Page 23: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/23.jpg)
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.
![Page 24: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/24.jpg)
Useful accessibility checking tool
http://wave.webaim.org/
![Page 25: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/25.jpg)
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.
![Page 26: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/26.jpg)
Resources1. 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/
![Page 27: Accessibility Overview | Contensis User Groups 2015](https://reader036.fdocuments.net/reader036/viewer/2022070514/587cde3b1a28abff0b8b6345/html5/thumbnails/27.jpg)