By Matt Morrison
October 18, 2011
Web Design
Accessibility in web design is simply about making sure your site is usable for people of all abilities and disabilities.
The
Web Content Accessibility Guidelines 2.0 was put together by the
World Wide Web Consortium to provide a framework for web designers on
what is good accessibility. The first edition was released in 1999 and
then the 2.0 revised version in 2008. The guidelines are divided up into
three priority levels, stating what web designers must do, should do
and may do, depending on the level of accessibility they wish their site
to be rated at.
If your website requires a Triple A rating, the highest possible level
(e.g. you are a Government body or have a particular set of users who
need targeting) then you’ll probably be well versed in the basics of
accessibility.
But for the everyday web designer this blog is going to be refresher on
what you should be making sure you have in your design to cater for all
users, regardless of abilities and disabilities. At the end of the day,
most organisations want to reach as many users as possible without
dramatically affecting their budget. And that’s what this is.
Who are we talking aboutDisabled users currently make up around 10% to 20% of the population in
most countries – in Australia its closer to 20%
1. If you add to that the
ageing population it makes a significant percentage of your users who
are going to find bad markups, flashing, low contrast, and hard to use
sites a turn off.
As a small example,
check out this website and let me know if you’re feeling likely to stay on there very long.
Bad design aside, the marquee background element on this site hurts. Literally.
Disabled users often make people think of blind or low visions users.
The group is much broader. People with low cognitive functions struggle
with the use of a mouse and need to use keyboards to navigate or will
use assistance devices. The hearing impaired need close captions or
transcripts of some multi media. Second language users need translation
tools and some conditions can result in fits from flashing images. This
is just to name a few.
Aside from those in the population who have a disability, there are also
those with
low literacy users, second language users, and low bandwidth
users. When you consider how the numbers start stacking up, how can you
afford not to consider accessibility?
Why it’s important to your designWhen accessibility standards are followed, general usability is improved. Advantages include:
-
Better use on mobile devices.
-
Clean code with a CSS based layout is vital for screen-reading browsers, but is also better for SEO.
-
Good colour and contrast use usually makes for a better first impression when users land on your site.
-
If your site is difficult to navigate you’ll lose business.
And… As well as how smart in general it is to make sure your site has maximum
usability for everyone, in Australia the Commonwealth Disability
Discrimination Act 1992 is in place to make sure that there is non
discriminatory access to goods and services. Although not normally
enforced, the potential for legal action is real. In 2000 Bruce Maguire
took legal action against the Sydney Organising Committee for the
Olympic Games (
Maguire vs. SOCOG, 2000) and won, stating the site wasn’t
accessible for a blind person. The Human Rights and Equal Opportunity
Commission agreed and fined the SOCOG $20,000.
Your checklistAaron Cannon, a blind web developer and accessibility consultant, has
shared a great
web accessibility checklist that every designer and
developer will find handy. I can’t recommend enough reading it in full
and
downloading the printable version, he covers
2:
Markup: Separate structure from presentation, use proper mark up for
that structure, html headings, title tags, ‘skip to content’ links and
tab order.
Visual appearance and content: Ensure your page is usable without
images, keyboard users, colour-blind and low vision users, flashing
images.
Images and multimedia: Alt attributes, transcripts, captions, videos, CAPTCHAs.
Forms: Using the correct tags, input errors, inline help links.
Check itWeb accessibility audits are becoming more frequent. The easiest way for
you to monitor your site is downloading some of the free tools
available and giving them a go.
Free tools:
Markup validation service: Allows you to validate URL’s and documents, as well as making suggestions on how to fix the error.
Web anywhere: is a browser base web application that allows you to see
how your site would be read aloud by assistive technologies. (This will
make you appreciate how much a ‘skip to content’ button is needed)
Firefox accessibility extension: Allows you to look at every aspect of
your page and gauge its accessibility. It also has a html validator and
link checker.
Contrast analyser for Windows and Mac: a good tool for checking
foreground and background colour combinations to determine if they
provide good colour visibility. It also contains functionality to create
simulations of certain visual conditions such as colour blindness.
Vischeck is another popular tool for the same thing.
The Web Accessibility initiative also has a complete and very
comprehensive list of evaluation tools.
Last thoughtsAs web designers we can get overwhelmed in the sheer scope of
accessibility. Different groups need widely different attributes to
ensure it is accessible for them. However, if you can get a greater
understanding on what accessibility is, and essentially start with a
good code base, you’re already well on your way.
At minimum, keep accessibility in mind and use some of the free tools
available to test for the most common errors. These actions alone will
increase usability.
And increasing usability is something we’re always striving for in web design.
Like it? Follow Mintleaf Studio on Facebook and Twitter.
References
1.
Disabled people worldwide, Employers forum on disability
2.
The accessibility checklist I vowed I’d never write, NorthTemple
Further reading: