After recently finishing a project for a not-for-profit organisation, Abilities First, which aims to find people with disabilities and ex-offenders places in the work force (read about it ), I thought that I would share with you the best practices to make your site as accessible as possible for people with disabilities such as poor eyesight, poor motor skills and dyslexia to name but a few.
First of all, what is accessibility with regards to web design?
When a website is said to be accessible, it means that it has been built with the intention that all of the content on it can be accessed by as many people as possible, regardless of the users disability/impairment.
This is sometimes very difficult, especially if you are using video content or Flash. However, there are some general guidelines and best practices that you can follow and I will try to explain these in this article.
- Title/Alt Attributes – Use title attributes on all hyperlinks and alt attributes for all of your images. These can be very beneficial for your site’s users who use screen readers/text browsers to surf the internet. Title attributes should describe the destination page of the clickable link; a good example being ‘click here to see Elan Web Design’s latest work’, whereas alt attributes should describe the image that can’t be read/seen by the screen reader. The important thing to remember with alt attributes is that you should describe the image that can’t be seen; don’t put ‘image1′ for example. The additional bonus of using both these attributes is that they are also good for search engines and general SEO.
- Order of Content – When a screen reader reads your website, it reads out the content in the order that it is written. ‘So?’ you might say. If your site’s html is written using tables for it’s layout, the order of the content might not be what you would assume. Your web page might make sense visually but for a blind user using a screen reader, it might sound like utter gibberish! This is one of the many reasons why you should use CSS for your site’s presentation as you can order the site’s visual layout later via a stylesheet.
- Skipnav – Use a ‘skip to nav’ button at the top of each page. This enables the user to bypass the navigation on each web page and takes them straight to the content of the page. A screen reader reads all of the information on every page. If somebody has clicked through to a specific page of your site, they may not wish the screen reader to trawl through the navigation links again; they want to read the page’s content straight away. A ‘skip nav’ button not only benefits those using screen readers but also keyboard users who tab through the page.
- Relative Measurements – By using relative measurements for your layout, you can ensure that the screen resizes according to the browser window without losing any of the content, thereby removing the need for any horizontal scrolling. Horizontal scrolling is an extra obstacle for anybody with poor motor skills and may turn them away from your site. By also declaring your font size in relative measurments, such as ‘ems’ or ‘percentages’ (not pixels!), you ensure that all browsers will be able to resize the text if the user wishes. (Internet Explorer 6, in particular, can’t enlarge text specified in pixels)
- Colours – Use a high-contrast colour scheme. For people with visual impairments or dyslexia, the choice of background colours and text that you use on your site is crucial. If you are adamant that you want certain colours on your site, give your users an alternative colour scheme through the use of a separate stylesheet. (Most browsers have the ability to change colour schemes according to user preference. This can over-ride the website’s colour scheme but it seems that a lot of users don’t realise this browser capability exists. You could inform them how to do this on your site’s accessibility page. See Abilities First for an example of this.
I haven’t attempted to cover all aspects of making your site accessible in this article but if your website is using all of these techniques, you have gone a long way to make your site as user-friendly as possible. Your site’s visitors will appreciate it!
Similar Posts:
- Basic SEO (Search Engine Optimisation) (Hints And TipsLikesMiscellaneousTop 5 ListsTutorials)
- Basic SEO (Search Engine Optimisation) (Hints And TipsLikesMiscellaneousTop 5 ListsTutorials)
- FREE Ways To Get Your Business Noticed Online (Hints And TipsTop 5 Lists)
- FREE Ways To Get Your Business Noticed Online (Hints And TipsTop 5 Lists)
What You Said