Designing for Accessibility and Inclusion

Steven Lambert

​

stevenklambert.com�@StevenKLambert�steven@sklambert.com

�

http://bit.ly/designing-for-a11y

Is this design accessible?

Accessibility is solved at the design stage

What does it mean to design for accessibility?

“Good [accessible] design happens when you view your design from [as] many perspectives, or lenses,” as possible

A lens is “a narrowed filter through which a topic can be considered or examined.”

Lenses of Accessibility

Lens of Animation & Effects

Fast flashing (flashes more than 3 times a second), or high intensity effects or patterns can cause seizures (photosensitive epilepsy)

Parallax or motion effects can cause users to feel dizzy or experience vertigo (vestibular sensitivity)

Users are easily distracted by constant motion, especially to users who have difficulty concentrating

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc luctus, ligula vel finibus molestie, ipsum augue mollis arcu, id rutrum dui nibh ut diam.

​

Pellentesque a ex ornare, mattis nisi nec, ornare ante. Nam in tellus semper metus placerat dignissim id aliquam massa. Nullam consectetur odio non quam ultrices, id interdum nulla egestas.

Animation isn’t bad, just understand why you’re using it and how to design for safer animations

Ask Yourself these Questions

• Are there any effects that could cause a seizure?
• Are there any animations or effects that could cause dizziness or vertigo through use of motion?
• Are there any animations that could be distracting by constantly moving, blinking, or auto-updating?
• Is it possible to provide controls or options to stop, pause, hide, or change the frequency of any animations or effects?

Lens of Audio & Video

Autoplay videos and music. Don’t do it!

Videos should have transcripts and/or subtitles so users can consume it in a way that works best for them

Ask Yourself these Questions

• Are there any audio or video that could be annoying by autoplaying?
• Is it possible to provide controls to stop, pause, or hide any audio or videos that autoplay?
• Do videos have transcripts and/or subtitles?

Lens of Color

Users without color blindness can see the difference

But users with Deuteranopia can’t

Which form field has the error?

Add a non-color identifier (icon, text, pattern, etc.)

Poor contrast between foreground and background make it harder to see for users with low vision, using a low-end monitor, or just in direct sunlight

Also ensure your design works in different variations of Windows High Contrast mode

Ask Yourself these Questions

• If the color was removed from the design, what meaning would be lost?
• How could I provide meaning without using color?
• Are any colors oversaturated or have high contrast that could cause users to become overstimulated or uncomfortable?
• Does the foreground and background color of all text, icons, and focus indicators meet contrast ratio guidelines of 4.5:1?

Lens of Controls

26px minimum touch target (44px recommended), 8px space between elements, visual size should be 60-100% of touch target size

Multiple touch targets all within a single click region can lead to touch errors

​

With no label, it’s hard to tell what the form field is after text is entered

Ask Yourself these Questions

• Are any controls not large enough for someone to touch?
• Are any controls too close together that would make it easy to touch the wrong one?
• Are there any controls inside another control or clickable region?
• Do all controls have a visible text label?

Lens of Font

The design should be flexible enough to allow users to increase font size, line height, or letter spacing to a comfortable reading level

Font styles that pose problems for users with Dyslexia

Ask Yourself these Questions

• Is the design flexible enough that the font could be modified to a comfortable reading level by the user?
• Is the font style easy to read?

Lens of Images & Icons

If this image was not viewable, how would you convey its information?

For the most part, you should describe the information of the image

If this image was not viewable, how would you convey its information?

“It Depends!”

​

​

– Says everyone

Meaning depends on context, or how much textual information is already available that describes the information

What do these icons mean?

Always label icons with text so their meaning is understood

If the user can upload images, you should provide a way for the user to enter the alt text along with the image.

Ask Yourself these Questions

• Does any image contain information that would be lost if it was not viewable?
• How could I provide the information in a non-visual way?
• If the image is controlled by the user, is it possible to provide a way for them to enter the alt text description?

Lens of Keyboard

A user using a keyboard typically uses the tab key to navigate to each control in sequence. (left to right, top to bottom). They must tab through all controls in order before they can get to the one they want.

By making the most important user flows nearer to the top of the tab order, we can help enable our users to be more efficient and effective.

Focus styles should always be visible or a user can become lost

Ask Yourself these Questions

• What keyboard navigation order makes the most sense for the design?
• How could a keyboard user get to what they want in the quickest way possible?
• Is the focus indicator always visible and visually distinct?

Lens of Layout

Layout should have a meaningful and logical sequence

Layout should be resizable to a minimum of 320px, or 400% zoom, with no horizontal scroll bars

Users using a screen magnifier benefit when related content is in close proximity to one another

Keep content that is related or triggered by an action in close proximity to one another so a screen magnifier can see them

Ask Yourself these Questions

• Does the layout have a meaningful and logical sequence?
• What should happen to the layout when it’s viewed on a small screen or zoomed in to 400%?
• Is content that is related or changes due to user interaction in close proximity to one another?

Lens of Material Honesty

Material honesty is an architectural design value that states that a material should be honest to itself and not be used as a substitute for another material

When applied to web design, material honesty means that one element or component shouldn’t look, behave, or function as if it were another element or component.

Can you tell which one of these will navigate you away from the page and which won’t?

Autocomplete menus that are more than just text completion are materially dishonest

Ask Yourself these Questions

• Is the design being honest to the user?
• Are there any elements that behave, look, or function as another element?
• Are there any components that combine distinct behaviors into a single component? Does doing so make the component materially dishonest?

Lens of Readability

Complex language and walls of text can pose problems for users, especially users with cognitive disabilities or who aren’t fluent in the language

Paragraphs should focus on a single idea and keep sentences short.

Break up the content with headings, lists, or images

Ask Yourself these Questions

• Is the language plain and simple?
• Does each paragraph focus on a single idea?
• Are there any long paragraphs or long blocks of unbroken text?
• Are all headings, links, controls, and labels clear and descriptive?

Lens of Structure

A screen reader interacts with the structure (HTML) of the design

How would you know if this design was accessible to a user using a screen reader?

This means you’ll need to understand basic HTML tags and how a screen reader interacts with them

Landmark elements allow a screen reader to jump to important sections in the design

Headings allow a screen reader to get a high level overview of the page, as well as jump to any heading

Lists (<ul> or <ol>) group related items together, and allow a screen reader to easily jump from one item to another

<button>s tigger interactions on the current page while links (<a>) Navigate or retrieve information

Form <label>s are required to allow a screen reader to know what each form �field is

So what can we add to structural design that will help make the design more accessible?

​

​

Enhancing the design with headings and additional information allows screen readers to understand the visual hierarchy of the bracket

You need to make sure that the developer understands what structure you had in mind for the design, otherwise we’ll make everything a <div>.

Ask Yourself these Questions

• Can I outline a rough HTML structure of my design?
• How can I structure the design to better help a screen reader understand the content or find the content they want?
• How can I help the person who will implement the design understand the intended structure?

Lens of Time

Users who need more time to perform an action should be able to adjust or remove a time limit when possible

Ask Yourself these Questions

• Is it possible to provide controls to adjust or remove time limits?

How to use the Lenses

Start with a few at hand, and one at a time carefully analyze the design through a lens

Can use the lenses on the whole design

Animation & Audio

Audio & Video

Color

Controls

Font

Images & Icons

Keyboard

Layout

Material Honesty

Readability

Structure

Time

Audio & Video

Color

Images & Icons

Layout

Or at a component level

Lens of Structure

Can I outline a rough HTML structure of my design?

​

How can I structure the design to better help a screen reader understand the content or find the content they want?

​

How can I help the person who will implement the design understand the intended structure?

Questions

Steven Lambert

​

stevenklambert.com�@StevenKLambert�steven@sklambert.com

�

http://bit.ly/designing-for-a11y