March 9, 2014 Making your website accessible

By Natalie Khoo

A ‘web accessible’ website is suited to meet the needs of people with disabilities, such as vision or mobility impairments. And with Australia’s ageing population, web accessibility is more important than ever.

Approximately 50 per cent of those aged 65 and over have a disability, most of which involve sight and movement. According to the Australian Bureau of Statistics (2014) the number of people in Australia aged 65 years and over comprises 14 per cent of the entire population – and this figure is projected to double by 2040.

Introducing WCAG 2.0 web accessibility guidelines

All web content must adhere to web accessibility guidelines – more technically called WCAG2.0. These are rules and techniques that help the vision-impaired and disabled access web content via assistive technologies.

The rules are especially applicable to links that lead to media files and/or attachments (such as videos, PDFs or Word Docs). You will come across them in the content pages while editing, and you’ll need to correct them.

Guidelines are split into three different levels: A, AA and AAA standard. Adhering to AA is best practise for everyone, and mandatory for government sites. The Australian Government Information Management Office monitors the accessibility of all government-affiliated websites. Non-compliance with web accessibility guidelines can result in action for contravening both the Disability Discrimination Act and the United Nations Universal Declaration of Human Rights.

What you can do to help

Although incredibly important, it is surprising how little people know about web accessibility. Web designers who know the guidelines are far and few between. If you’re keen to change your website today, there are a few things you can do to help. Start by sticking to a few key guidelines, listed below.

Alternatively, if you’re keen to read more detail, you can find everything you need to know at the WCAG website.

1. Web friendly links

As a web content strategist and writer, one of the most common mistakes people make is writing CLICK HERE.

Imagine you are blind and rely on a screenreader to tell you what’s on the screen. If all you hear is ‘click here’ how are you supposed to know what the link will lead you to?

For this reason, it’s important your links are descriptive. For a user who is vision-impaired, this indicates to a screenreader the type of file they are about to open. And relevant to ALL users, this technique also shows the user how big the file size is, just in case they have a slow internet connection.

To edit them, make sure the details (i.e. file type and size) are written and incorporated into the link.

For example, the following is incorrect:

This is correct:

If you don’t know what a screenreader is, please view the video below that talks you through how they work and what you would hear using one.

2. HTML code and structure: <h1> and <h2> tags

Understand how headings and content are formatted in HTML coding. Similar to the way ‘styles’ work in Microsoft Office Word, the main heading at the top of the page should always be labelled ‘h1’ and subsequent subheadings should always be labelled ‘h2’. Normal content is labelled ‘paragraph’.

Most people don’t understand how important this is. Rather, they make headings by making the font bigger or the text bold. Sure, this might work for people who can see the difference, but screenreader users need a way to easily differentiate titles, subheadings and content. Same goes for tables and bullet lists.

If you can grasp adding HTML information on your web copy before handing it to your web developer, you can relax knowing they will upload the structure of your content correctly; it will look exactly how you imagined.

More importantly, however, knowing how to use h1 and h2 tags properly will help your SEO (search engine optimisation) and increase your website ranking.

3. Colour ratio

Have you ever considered how vision-impaired users might see the colours featured on your website?

To make your site as easy to read as possible, your colour contrast between text and background should be a minimum of:

  • 4.5:1 for AA level

  • 7:1 for AAA level.

To check how your website measures up, you can download a free colour contrast analyser at the Vision Australia website: www.visionaustralia.org.au/ais/cca/

Colour contrast analyser

4. Magnification

Letters on a screen can look very small. Some users might also choose to use screen magnifier software, such as Zoom Text, that helps magnify the screen.

For many, it also often helps to increase the font size. Make sure that your text can be made larger and smaller without compromising clarity of the words (i.e. pixelating).

5. Keyboard function

Many sites require you to use a mouse. However, some users cannot use a mouse – they browse websites by using the ‘tab’ function and arrow keys on a keyboard. To activate links, they press ‘enter’ or the space bar. To make your site web accessible, make sure your users can easily ‘tab’ their way through your site.

Better yet, add a ‘skip to content’ link at the start of every page. You may have seen ‘skip to content’ links before at the top left corner of web accessible sites. These allow the user to navigate straight to the main content of the page, rather than ‘tabbing’ through each link across the top of your web template.

6. Alt text for images

How does a blind user see images on your website? If using images is an important way you connect with your customers, you want the vision-impaired to also see what you’ve got.

The best way to do this is to give the image ‘Alt text’. This is a very short text description of the image that sighted users can’t see – unless they hover the mouse over the image, in which case the Alt text usually pops up.

It is added to the website by your web developer, and more often than not, you must provide them with the descriptions yourself.

Web accessibility case studies

In the States, the strength of the disabled persons market is valued at US$175-billion. Imagine the range of people you could reach by following such web accessibility guidelines…

In the UK, Legal and General Insurance entirely rebuilt their website to suit web accessibility guidelines, and as a result, saw a ROI within 12 months, a 90 per cent increase in traffic, and an 25 per cent to 200 per cent increase in sales. What’s more, they saved £200K in site maintenance per year. There is no arguing the benefits of AAA guidelines with results like those.

In 2007, giant supermarket chain TESCO released two separate websites – one for the general population, and one designed specifically for disabled persons.

Research found the site that followed AAA guidelines generated substantially more sales than the other, and due to being much easier to read and follow, was widely used by those without any impairment at all.

How to make sure you comply

If you are unsure whether your site fulfils accessibility standards, you can undergo an audit. An audit will rank your site against a checklist of accessibility guidelines.

Several organisations such as Vision Australia and U1 Group offer manual and/or automated testing, enlisting real humans and computer programs to judge whether your site is usable to those with a visual or cognitive disability or impairment. The subsequent improvements you may make will be relevant to all users, not just those with difficulties.