Accessibility is often one of those things  placed in the ‘too hard’ basket, or worse deemed unimportant as it thought to be only relevant to a small portion of the population.  The fact of the matter however, is that accessibility benefits all internet users.  Accessible websites and the information they contain are generally easier to comprehend, more user friendly and often more compatible across a range of web browsers, including mobile browsers.

Image from http://www.korten.in/Accessibility.aspx

While undertaking a full accessibility review can be a daunting process that may require the input from a professional, there are a few simple things everyone can do, to ensure that their websites are more accessible.

1. Do not make your website dependent on colours.
   Colour alone should never be relied upon to convey meaning to users. Links should always be underlined, and important information and forms should always be labelled correctly.It is easy, when designing a website, to think your website is immune from colour blindness problems because it doesn’t use red or green. In reality, there are many different types of colour blindness and the only way to ensure that your design is truly accessible is to check your foreground and background colour combinations to determine if they provide good visibility. 

   The W3C official statement on colour visibility is: “two colours are considered to provide good colour visibility if the brightness difference and the colour difference between the two colours are greater than a set range.” The range suggested by the W3C is > 125 for colour brightness and > 500 for colour difference.”.

   An easy way to check the contrast levels of your website’s colour scheme is to download the Vision Australia Colour Contrast Analyser for webpages: (http://www.visionaustralia.org.au/info.aspx?page=628). This tool analyses all colour schemes according to the W3C guidelines for contrast and provides a pass or fail mark. It can be changed to particularly target different types of colour blindness so all types of visually impaired users can be tested.

2. Place alt text on all images and media.
   Text equivalents should always be provided for all images on your website, as screen readers cannot ‘read’ images, they read the information provided in the alt tags. If the image used contains text, all text should also be included. Having alt text in the image tag ensures users relying on screen readers can hear the description of all images, rather than just hearing the file name. It can also be useful when pictures cannot be downloaded from the server, which often occurs when users are on slow connections. Alt text is particularly essential when an image is used as a main navigational link.Alt tags can be easily placed within the <img> tag of your website’s HTML body code. For those who are unsure, look for the tags that look like this: <img src=”/images/styles/usabilityone.gif” alt=”UsabilityOne”/> The alt text for this image exists after the ‘alt=’ tag, and reads as “UsabilityOne” 

   If you’re not sure about whether to provide alt text for your graphic; the safest solution is to always include it.
   It is also good accessibility practise to ensure your page is not dependent on images for navigation, or that the whole page is an image (e.g. one huge JPG created in Photoshop).

3. Use meaningful and distinctive page titles.
   Another easy way to improve the accessibility of your website is to ensure each of your website’s pages has a different and meaningful title. The title is the text placed between the <title> tags in your website’s source code, and is displayed in the tab of each browser, so you can see the description of each page you’re on (see image below). 

   It is also the first thing a screen reader will come across after a web page fully loads, so it is vital that it gives your visually impaired users a meaningful description of what page they are on, and to differentiate between other web pages.

   Have a look at the titles on each of your web pages that come up in the tab of your browser. Is it succinct and descriptive enough to give a reader an understanding of the page they are on? If someone was just relying on this, could they tell it apart from the other pages within your site? If it doesn’t do these two things, it’s worthwhile manually changing the text in-between the <title> tags in your source code, or asking your web developer to change it to something more appropriate.

   A good habit when creating a window title is to ensure it always follows the format “Page Title | Company/Organisation Name”. This format lists the page identifying information first.

Tags: Accessibility, Usability, web design

This entry was posted on Friday, July 22nd, 2011 at 16:30 and is filed under Accessibility, Design Issues, Usability. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.