7 Things Every Designer Needs to Know about Accessibility

Jesse Hausler
Apr 15, 2015 · 14 min read

1. Accessibility is not a barrier to innovation.

Eager to escape the tech bubble for a weekend, Designer Dude and his circle of start-up friends went to Yosemite, where he spent most of his time dribbbling on a slack-line near their basecamp.
Design for everyone.

2. Don’t use color as the only visual means of conveying information.

How many fields are in an error state?
Turning on the color reveals a different story altogether.

3. Ensure sufficient contrast between text and its background.

#959595 text on a white background.
#767676 text on a white background.
Only the letter M meets minimum contrast standards.
An example of passing color contrast usage
Passing colors in Salesforce1

4. Provide visual focus indication for keyboard focus.

:focus {outline: 0;}

Default visual focus states for Chrome and Firefox
While ugly, this isn’t “caused” by accessibility.

5. Be careful with forms.

Forms without Borders

A modest text input field
Where would I click if I wanted to enter in a search term? The cursor was removed for emphasis.
Where does one click to tell their story?
If you click outside of the blue box, nothing will happen.
Non-standard, but still with enough cues for users with disabilities

Forms without Labels

Only the “Search Twitter” placeholder has the minimum required contrast level.
Without labels, it may be difficult to know what to type in an input.
Compound fields with visible labels

6. Avoid component identity crises.

Q: When is a menu no longer a menu?

A: When it’s a non-modal dialog.

A simple autocomplete typeahead
In this autocomplete, icons are used for object disambiguation.
An autocomplete with a hidden feature set that cannot be communicated to assistive technology through standard techniques.
The “From” dropdown is a menu. The “Guests” dropdown is a non-modal dialog as defined by the W3C’s WAI.

7. Don’t make people hover to find things.

Dragon identifying hyperlinks by number. Say the number out loud to click a link.

“Simple things should be simple, complex things should be possible.” -Alan Kay

“Primary things should be visible, secondary things should be shown on hover.”

My LinkedIn profile banner
My LinkedIn profile banner with hover states revealed
Title turns blue on hover.
One solution. Show smaller, gray pencils always for in-line editable fields.
Show the same blue row on hover and keyboard focus.

“That’s kind of heavy, isn’t it?”

One solution to the hovers used in Evernote


Salesforce UX

A collection of stories, case studies, and ideas from Salesforce UX

Thanks to Jina Anne, Cordelia, and Ryan Scott.

Jesse Hausler

Written by

Principal Accessibility Specialist at Salesforce, where I educate people about Universal Design as a way to achieve access for all users. Opinions are my own.

Salesforce UX

A collection of stories, case studies, and ideas from Salesforce UX