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.

Image for post
Image for post
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.
Image for post
Image for post
Design for everyone.

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

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

3. Ensure sufficient contrast between text and its background.

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

4. Provide visual focus indication for keyboard focus.

:focus {outline: 0;}

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

5. Be careful with forms.

Forms without Borders

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

Forms without Labels

Image for post
Image for post
Only the “Search Twitter” placeholder has the minimum required contrast level.
Image for post
Image for post
Without labels, it may be difficult to know what to type in an input.
Image for post
Image for post
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.

Image for post
Image for post
A simple autocomplete typeahead
Image for post
Image for post
In this autocomplete, icons are used for object disambiguation.
Image for post
Image for post
An autocomplete with a hidden feature set that cannot be communicated to assistive technology through standard techniques.
Image for post
Image for post
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.

Image for post
Image for post
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.”

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

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

Image for post
Image for post
Image for post
Image for post
One solution to the hovers used in Evernote

***



Salesforce Experience and Design

A collection of stories, case studies, and ideas from…

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 Experience and Design

A collection of stories, case studies, and ideas from Salesforce design teams

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 Experience and Design

A collection of stories, case studies, and ideas from Salesforce design teams

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store