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/