Why accessibility in web design is more important than you think
There are over 7 billion people in the world of which 1 billion live with disabilities.
In the UK alone 51% of the people with disabilities use the Internet. It means that almost half of the disabled population don’t.
There are many ways we, as designers and developers, can improve the user experience the disabled might have when using our websites.
If we don’t want to exclude some part of our potential audience we should design for everyone and comply with a few simple accessibility rules.
Alt text for images
When adding images to your website be certain to add ALT text (alternative text). This feature is mostly used by these people who cannot see, and use a screen reader that reads out loud a web page’s content.
<img src="grumpy-cat.jpg" alt="Grumpy cat">
Alt text also helps search engines recognise your images – e.g. for Google Image search – and boosts your overall SEO.
Keyboard accessibility
According to W3C:
When content can be operated through a keyboard or alternate keyboard, it is operable by people with no vision as well as by people who must use alternate keyboards or input devices that act as keyboard emulators.
If you’d like to test whether your website is compliant put the mouse away and test your website using a keyboard only. Use:
If you’d like to test whether your website is compliant put the mouse away and test your website using a keyboard only. Use:
- Tab or Tab + Shift to navigate between the links and form controls
- Enter to follow a link or activate a button
There are some problems we need to be aware of when making websites accessible through a keyboard though.
No “Click here”
Make sure the links you provide on your web pages make sense. Avoid links such us:
- more;
- click here;
- see details.
They are ambiguous and confusing. When taken out of context they mean nothing and so if that confuses your user he’s likely to dislike your website and leave.
Transcripts or subtitles for the hard of hearing
By providing a transcript from a podcast or adding subtitles for videos we make sure this audio resource is accessible to those people who have hearing problems.
There are many resources that help to create transcripts in HTML file.
Colour contract compliance
Users with colour deficiencies or users with low vision will see better if there is a contrast between foreground and background colours, particularly between text and its background. Basically, make sure your website is easy to see and read for everyone.
If you’re not sure if your website is colour-contrast compliant there is a great colour contrast check tool that can help you check that.
Form labels
Form labels are important for speech output users who cannot easily recognise what the form element is by looking at the surrounding content.
<label for="search">Search Delighten</label> <input type="text" id="search" name="q" /> <label for="search"> Search Delighten <input type="text" name="q" /> </label> <input type="text" name="q" title="Search Delighten" />"
Making a site accessible to people with disabilities helps everyone have better online experience and increase the number of people who can access your site.
To see an example of a website which is accessibility compliant view the Derbyshire Disability website. You can also find out more about that project here.
Delighten can help you discover how well your website is doing online and check your website’s accessibility compliance. Here’s an example report. If you’d like to know more, please get in touch.