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.
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
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!
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
