Accessibility - A Brief Overview
Posted by Mike Skinner July 8, 2006
A primary motive for creating accessible sites is to avoid being sued for discriminating against people with different abilities. In general, sites that offer goods, services and information should be accessible – and in several countries, accessible websites are a legal requirement:
- USA – Section 508,
- UK – Disability Discrimination Act,
- Australia’s Disability Discrimination Act 1992 applies to web sites,
- The European Union is currently working on legislation pertaining to accessible websites.
The World Wide Web Consortium’s Web Accessibility Initiative published their Web Content Accessibility Guidelines just over seven years ago. In my opinion, some of the guidelines are less applicable (or even irrelevant) than when they were published. The guidelines were not keeping up with technology and the way that is utilised on the internet. At a quick glance, the new WCAG 2.0 is an improvement.
Below are some tips on how to improve the accessibility of your site. If you are seeking an exhaustive checklist, please use the links above.
Quick-start tips
- Use title attributes on links, buttons, labels, images, input fields, radio buttons, checkboxes, select lists, etc. Browsers that read web pages (also known as screen readers) will read these out. The attribute value should be concise, informative and not too repetitious when coupled with adjacent title attributes.
- Font sizes should not be absolute. Avoid using font-size:11px; instead use %, em, xx-small, x-small, small, medium, large, x-large, xx-large, etc. My father reduces his eye strain by setting MSIE to browse with the text one size larger. It must be frustrating to visit a site with the text set to 9px and MSIE doesn’t resize the text.
- Labels and form elements – link them using the label’s for attribute. For example:
<label title=”Please enter your email address” for=”txtEmailAddress”>Email Address</label> <input id=”txtEmailAddress” type=”text” />
- Avoid using tables for general content layout – instead use DIVs (this will also make your site easier to maintain). Try to use tables for tabular information only, and when you do, ensure that you use <th> tags in the first row. Screen readers use the table head to present the content better aurally. Some screen readers also announce when they are entering a new table cell – which could get annoying if the user isn’t looking at tabular information.
- Use valid markup. Regardless of whether your site is XHTML or more dated HTML – some markup validators will alert you to missing attributes.
- Warn users if links open in a popup window. Unannounced popup windows can be disorientating if the user can’t see windows opening.
This can be as easy as inserting an icon with a title attribute (mouseover the image to see it):
Link
- Skip links – if you place a link immediately inside your body tag, that links to an anchor at the start of your page content – it can be used to avoid reading out the header and navigation every time a disabled user loads a new page on your site (it can get too repetitive). You can do this with a link placed (absolutely) 500px to the left of the visible page so that abled users can’t see it. Set the title attribute on the link to explain what the link does.
- Does your site work without JavaScript? AJAX and DHTML are popular – but make sure your visitors have an alternative method to accomplish their goals on your site.
- Use an accessibility validator on your site. I use the HTML Validator for Firefox and Mozilla. This extension is primarily for validating [X]HTML, but it also an option to show accessibility messages too (note: this feature is turned off by default).
- Finally, download a text based browser like Lynx. View your site without images, CSS and JavaScript. Pay particular attention to how well your navigation works.
Being disability friendly is not always easy or quick to accomplish. Auditing and development time impose commercial costs. Some of these guidelines are just good site design, whilst others are just courteous usability. All users can appreciate these – regardless of their level of ability.
regarding your dad and font sizes. Tell him to switch to Firefox. While it honors settings like 14px on the initial load it WILL size them up along with everything else when you increase font size. Which is what you would expect a browser to do when you tell it to increase the font size.
Thanks for the tip masukomi – font scalability forms part of my testing on any work that I complete.
I have tried a few times to convert my father, but some people are just ‘stuck in their ways’. For someone who is 59 his computer literacy is impressive (his gadgets are more impressive than mine) – I just need to be patient…
For Mozilla users who don’t know, pressing Ctrl + increases the font size, Control – decreases the size and Control 0 returns to normal. (Apple users replace Control with the Apple key).