Post on 16-Jan-2017
What is accessibility?
Degree to which a website is accessible to as many people as possible.
Accessibility
• Isn’t just for “designers”• It’s the responsibility of the whole
team
How it can benefit users
1. Increases access2. Reduces friction3. Improves emotional cues4. Positive experiences for all users
4 main types of disability
Seeblind cataracts distracted
driver
4 main types of disability
Heardeaf ear
infectionbartender
4 main types of disability
Speaknon-verbal
laryngitis heavy accent
4 main types of disability
Touchone arm
arm injury new parent
4 main types of disability
What about cognitive disability?
4 areas
1. Content2. Design3. Media 4. Technical
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.
Content hierarchy
1. Heading structure is important. 2. Make the content structure clear and
consistent.
Navigation
Provide consistent ways to help users navigate, find content, and determine where they are.
Legibility
1. Good content is a part of good accessibility. 2. Keep your text simple and your meaning clear.
Colour
1. Use colour contrast tools to ensure your text is high-contrast enough.
2. Beware of super-high contrast too.
Good :-) Bad :-(
http://leaverou.github.io/contrast-ratio/
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.
Media
1. Provide text transcripts for audio (and video!).2. Provide subtitles for video.
Alt text
Provide text alternatives for images that helps a user understand the context of the image.
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.
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.
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.
Useful accessibility checking tool
http://wave.webaim.org/
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.
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/