Do the right thing – improve accessibility

Accessibility improves the user experience for all users. It’s worth doing. It’s the right thing to do. If you don’t believe me, try and experience the lack of accessibility yourself! Read on to learn how.

Title-image-do-the-right-thing-improve-accessibility

Accessibility benefits everybody

A web-site is accessible, if the site’s content is available to everyone, anyone can operate the site’s functions and anyone can literally access the site.

Accessibility benefits persons who are experiencing some kind of impairment. The impairment may concern vision, hearing, motor or cognitive abilities. And the impairment may be situational, temporary or permanent in nature. If you think about it, we are all disabled somehow at least in some situations. Like when we’re in a hurry, distracted, stressed, under a big cognitive load, tired or in poor lighting. So accessibility benefits you. And me. And everybody!

There are still some things that make us all the same. You, me, them. Everybody! Everybody! – Elwood Blues

Why aren’t more sites accessible?

Those who design, code and test the sites typically have good vision and hearing. They can operate keypad, mouse or touch screen. Their cognitive abilities are ok. People like them can probably use the site just fine. And it is easy to forget not everyone is the same.

From empathy to accessibility

Having empathy has a huge role in making web sites accessible. That’s why it is good to experience the lack of accessibility yourself. To see how it feels.

Following are three important accessibility guidelines. With them I give you tips on how to try them out. If you dare, try them with your own site!

1) Make it perceivable

Guideline:
Make it easier for sighted but visually impaired users to see things clearly.

Try it yourself:
To simulate different kinds of visual impairments, try NoCoffee-extension to Chrome. With this extension you can check how your site looks like e.g. with color blindness or with blocked visual field. Can you still see everything clearly enough? If not, try to fix it.

How-to:

  • Make sure there is enough contrast between text and background
  • Don’t convey info with color alone
  • Make sure users can increase the text size and it still stays readable and functional
  • Make sure clickable target sizes and the margins around them are big enough

 

2) Make it understandable

Guideline:
Ensure the code tells each element’s role, name and value. This way users with assistive technology can understand the meaning of the elements.

Try it yourself:
To experience how it feels to make sense of a site’s elements without seeing anything, try ChromeVox screen reader extension to Chrome. Once the extension is on, go your site and move around with tab-key and your eyes closed. Listen to the screen reader. Can you make sense of your site? If not, try to fix it.

How-to:

  • Use descriptive alternative text for images.
  • Use heading-tags for headings
  • Make link texts descriptive so that the user can understand the location of the link by the link text alone

 

3) Make it operable

Guideline:
Ensure the users can use the site with only their keyboard. This way also users who cannot use their mouse can use the site’s forms, controls and navigation

Try it yourself:
Put your mouse away and try to move around your web-page with a tab key. Can you proceed in logical order? If not, try to fix it.

How-to:

  • Have relevant elements on the page focusable and in logical order
  • Use skip links so that keyboard users can skip the navigation links and go straight to the page content
  • Ensure keyboard focus does not get trapped in any part of the content

 

PRO TIP: You can also go to your browser’s developer tools, where you can run an accessibility audit. This tool finds you the exact spots in your code where you can improve the accessibility.

 

Ready to do the right thing?

If you tried these tips you may have now felt the pain with lack of accessibility. I hope it’ll give you motivation to try and make your site more accessible. I know I still have work to do with mine. But I’m ready to do it!

Cartoon illustrating the challenges of accessibility
 

P.S. Do you want to learn more about accessibility and get practical tips how to improve it? I recommend Udacity’s “Web accessibility by Google” -course. It was one of the inspirations to this blog post, too! Another excellent resource is WebAIM: Web Accessibility in Mind

 

Did you like this? Share it with your friends!
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedIn

Leave a Reply

Your email address will not be published. Required fields are marked *