10 Tips Towards Improving The Accessibility Of Your Website

Categories Articles, Web Design
accessible design

The issue of web accessibility is as valid as ever. Laws such as the Disability and Equality Act in the UK and the Americans With Disabilities Act in the US mean that accessibility is now a matter of legality and not just courtesy. It’s always important to remember that inclusive design is great design – and a keen eye for accessibility and usability can mark the difference between a good designer and a great designer. As such, the following are ten pro-active tips – designed to help you improve the web experience for disabled users.

Note: I have recently applied a number of these principles on my website: http://www.sol-tattoos.com – including descriptive link text, strong colour contract & the ordered use of headers. Take a look if you’d like some further guidance on accessible web design.

DirectGov website
Responsible: Government websites are usually highly accessible.

1. Use alt tags on images.

This is one of the simplest ways in which to make your website more accessible, yet it’s amazing how often it’s forgotten. If you want to write code which validates, alt tags are now required as standard for all images in your XHTML. In terms of the text you use, be concise, clear and contextual – describe the image. Note – you shouldn’t ignore the alt tag for spacer images. Instead, use an empty string.


[sws_grey_box box_size=”400″]Eg.

<!–HTML –>
<img src=”rover.jpg” alt=”My dog”/>
<img src=”spacer.gif” alt=””/>[/sws_grey_box]


2. Use an ordered layout.

Always use the correct header tags in your HTML, in a hierarchical order. Use lists and a consistent structure. You should always use CSS for layout and not tables (I think that one’s a given!). A well-organized page layout with the correct tags will not only make your website more accessible – it will improve the usability and validity of your pages.

[sws_grey_box box_size=”400″]Eg.

<!–HTML –>
<h1>Main Header</h1>
<p>Some content…</p>
<h2>Less Important Header</h2>
<p>Some further content…</p>
<h3>Even Less Important Header</h3>[/sws_grey_box]


3. Use unique and meaningful title tags on each page.

Ensure you describe each individual page through your title tag. The user should be able to tell where they are on your site through the title content alone. Each page should have its own unique title tag – duplicate title tags are confusing and are unfriendly for people and search engines.

[sws_grey_box box_size=”400″]Eg.

<!–HTML –>
<title>Home – [Site Name]</title>
<title>About Us – [Site Name]</title>
<title>How To Contact Us – [Site Name]</title>[/sws_grey_box]

4. Use a ‘skip navigation’ link.

A skip navigation link can massively improve the accessibility of your website for visitors with a screen reader. It’s very little work and allows users with a screen reader to avoid the repetition of the navigation on every page. Some basic styling can position the link away from the page so that it isn’t visible to non-disabled users.

[sws_grey_box box_size=”400″]Eg.

<!–HTML –>
<a href=”#maincontent”>Skip Navigation</a>
<!– Here is the navigation –>
<h1><a name=”maincontent” id=”maincontent”></a>Heading</h1>
<p>Here is some content..</p>

/* CSS */

5. Test your web page with CSS and JavaScript disabled.

Your webpage should degrade gracefully. Is the same content available as when CSS and JavaScript are active? If not then you should seek alternative means of displaying this content in an accessible manner.

screen reader userTest: Screen reader user testing is vital.

6. Test your website with assistive technologies.

This is by far the greatest way of assessing the accessibility of your website. Put yourself in the position of the user. There are a number of screen reader technologies out there at your disposal. Be sure to do your research and look into different software testing methodologies. There are also tools which help you to interpret screen reader output. One such tool is Fangs – a Firefox add-on which emulates screen reader output in text format .


7. Use descriptive link text.

The anchor text of your link should describe the location it is pointing to. Anchor text such as ‘click here’ or ‘website’ is bad for the accessibility of your site, as multiple links with the same anchor text can become confusing when screen readers are used. Also, you should never refer to a link based on its position on the page – for example: ‘Find the link at the bottom left of this page’.


8. Check that the colour contrast in your design is sufficient.

It’s estimated that somewhere in the region of 4.5% of the population suffer from some form of colour blindness. That’s a massive number of people. To ensure that you’re not alienating these users, it’s a good idea to check the colour of your text against the background colour of your site. Use tools such as the WebAim Colour Contrast Checker to ensure conformity.

Fangs Screen Reader OutputFangs: Screen reader text output tools can help those without disabilities improve their site.

9. Use accessible text.

Don’t use images for text. Browsers are unable to increase the size of image text for users who suffer with poor eyesight. Similarly, don’t use absolute text sizes. Certain versions of some older browsers are unable to change the size of absolute styled text. Relative sizes (‘em’ attribute) allow the user to change the size of the text as required in their browser. The em size unit is recommended by the W3C.

[sws_grey_box box_size=”400″]Eg.

<!–HTML –>
<p>This is some text…</p>

/* CSS */
P {

10. Write accessible content.

You should ensure that the content of your site is readable and easy for disabled people to understand. Sentences should be short, clear and concise – while being broken down into short paragraphs. Favour the active voice. Try not to use jargon, slang or idiomatic phrases if at all possible. Such implementation will help to widen your audience.

Thomas O'Rourke is a website accessibility and usability enthusiast from Leeds, UK.