Accessibility Updates For Your Website

It’s astonishing how often the issue of accessibility in web design is simply disregarded or ignored. Refusing to acknowledge disabled users of your website is potentially damaging – as well as the impact on your reputation, discriminatory laws in both the US and UK mean that there can now be legal implications for those who refuse to comply with accessibility guidelines. The good news is that with a few simple updates, your site can make mass gains in the accessibility stakes.

i) ‘Skip Navigation’ link

This is an easy way to improve the accessibility of your website for visitors who use a screen reader. The work-load is minimal and allows users with a screen reader to avoid the repeated navigation on every page. To make sure that the link isn’t visible to able bodied users, it can be styled 10,000 pixels to the left of the page.

For example:
<!–HTML –>
<div class=”hideme”>
<a href=”#pagecontent”>Skip Navigation</a>
</div>
<!– NAVIGATION –>
<h1><a name=”pagecontent” id=”pagecontent”></a>Page Heading</h1>
<p>Here is the unique page content..</p>

/* CSS */
.hideme
{
position:absolute;
left:-10000px;
top:auto;
overflow:hidden;
}

ii) Differentiate the title tags on each individual page

You should always describe each individual page through your title tag. This is important for the way your site is indexed in search engines as much as accessibility. Users should be able to make out where they are on your site through unique and individual title content. Duplicate title tags across the domain are confusing and aren’t accessibility or search engine friendly.

For example:
<!–HTML –>
<title>Welcome to the homepage of [Site Name]</title>
<title>Find out all about [Site Name]</title>

iii) Use descriptive link anchor text

The anchor text of links should describe the location they’re pointing to. Multiple links with the same anchor text such as ‘click here’ can become confusing for those using screen readers. Referring to a link based on its page position is also a no-no – those without sight will struggle to find site content based on its positioning.

iv) Use a combination of automated and human site testing

There are a number of tools out there on the web which claim to automate the accessibility testing process. While tools such as Wave and Web Nauts will test the mark-up of your site for errors, accessibility testing is as much about human judgement as computerized testing. Try and put yourself into the position of a disabled user on your site – blindfold yourself, use screen readers, navigate your website using only your tab key – everything! If required, there are also services out there which allow you to test your website on disabled users.

v) Ensure that your text is fully accessible

You should ensure that your text uses the correct attribute so that it can be re-sized by all browsers. Older versions of Internet Explorer cannot re-size absolute values. It’s therefore best that you use the W3C approved ‘em’ relative size attribute. The text itself should be un-complicated at a reading level that nearly all age-groups would be comfortable with. This helps to open up your content to everyone – no matter what their level of ability.

For example:
/* CSS */
p {
font-size:1.3em;
}

vi) Use appropriate colour contrast

A large percentage of the world population is colour blind in one way or another. To cater for these individuals, you should ensure that the contrast between the text and background of your site is sufficient. Tools such as the WebAim Colour Contrast Checker can help you make sure that you’re conforming with acceptable standards.

vii) Turn off CSS and Javascript in your browser

One of the easiest ways in which to test whether or not your site is accessible is simply by temporarily switching off these functions in your browser. Does your site degrade gracefully? Is all of the same content still available when it is turned off? If it isn’t – then why not?

viii) Use image alt tags

‘Basic’ you might say – not least because alt tags are required in order for your code to validate – yet they are still left out on a frequent basis! Alt tags provide an alternative description for users with a screen reader. You should be clear and contextual. Don’t use repetitive text such as ‘image of…’. Best practice also dictates that you should use an alt tag for spacer images – but rather than naming it ‘spacer’, leave the tag empty.

For example:
<!–HTML –>
<img src=”ufo.jpg” alt=”UFO sighting” />
<img src=”spacer.gif” alt=”” />