Have you read the website accessibility guidelines lately? Even for the experienced web developer, the W3Cs WAI WCAG 1.0 guidelines can take time to grasp, and then implement sensibly into a website. The key word being ’sensibly’. It’s near impossible to stick implicitly to the guidelines so it’s vital to take a step back and ask yourself: does this apply to my website? If it does, how can I implement this practically?

This article discusses what is essential and what is recommended or best practice in order to make an accessible website. This article is not an in depth discussion about the guidelines nor is meant to replace the recommendations set out by the W3C (World Wide Web Consortium). Its purpose is to offer practical advice to the accessibility worried website owner.

The guidelines are very confusing and it’s not always clear what has to be done to a web site to comply. The guidelines state that a website owner must take ‘reasonable’ steps to make sure their website is accessible. Therefore, as long as you have attempted to take on board the recommendations set out by the W3C you should be clear of legal worries. However, the benefits of an accessible website are not just about the legal implications. The benefits are huge, from the obvious:

1. Increased compatibility across multiple platforms and devices
2. Conformance with the DDA (Disability Discrimination Act)
3. Reach a larger audience

…to the less obvious:

1. Positive effect on search engine optimisation
2. Easier to maintain
3. Faster page loading times
4. Marketing and promotional tool
5. Improved usability

OK, so what do I NEED to do to my website?

The following is a simple list of the things which you need to be doing on your website. Most of which are relatively easy to implement.

Structured standards compliant code
Structuring the code that makes up your website effectively can be a big help for tools, such as screen readers. You should be making your code XHTML 1.0 and CSS2.0 compliant. This doesn’t mean you can’t use tables, providing the code is standards compliant.

Alternative content
When using images, sound, video, or multimedia it’s vital to provide alternative content for those visitors who are unable to view this content. In the example of images, this means placing alternative text (known as ALT tags) with every image. The text should describe what’s happening in the image.

When using sound and video, you should use subtitles, captions or static frames as an alternative. Various formats should ideally be offered to cater for slow internet connections or compatibility issues.

If you have used multimedia, such as Adobe Flash (formally Macromedia) to create your entire website then you should provide an alternative website containing standards compliant and accessible content.

Don’t rely on colour
You should not be relying on colour to present content or data. For example, a different coloured text meaning different things. Visitors with eyesight difficulties will not know what this means and so a graphical representation (icon) or shades of the same colour should be used, together with a key describing what each colour/icon means.

Clear and concise language
Don’t confuse your audience by writing content in an inappropriate language and keep the tone of the content consistent throughout. When displaying errors make sure they are descriptive (not too technical) and provide solutions. Write your content for your audience.

Use scripts, applets and plug-ins sparingly
When using scripts, applets, or plug-ins make sure the website still functions correctly in unsupported browsers or with scripts turned off. Many visitors choose to disable JavaScript or Java applets so it should not be relied upon. These scripts may not be supported in mobile browsers.

If all else fails
Provide an alternative page containing accessible content. It’s not the ideal solution and you won’t be getting the real benefits of accessible content. You must then make sure that this content is updated alongside the main website content.

What else should I be doing?

Additionally you should also be doing the following. These can be very easy to implement and can offer great benefits.

Make a site map
A site map has two main advantages; helping visitors quickly locate a page, and giving the search engines a helping hand in indexing your website. A site map link is typically in the header and footer of all pages. Remember to keep the site map updated along with updates to the website.

Appropriate link text and titles
Try to avoid links called “click here” as the majority of visitors scan read a website first. As they scan the page the “click here” links require the visitor to read the entire sentence or paragraph to see where it links to. Name your links an appropriate name, e.g. “contact details” or “about the company”.

Additionally you should use the link title attribute. This displays information when the user hovers their mouse pointer over the link. This information should contain more information about the page being linked to. Correctly named and labelled links provide the search engines and screen reader applications with a better idea of the page being linked to.

DIV & CSS design
Traditionally, websites have been constructed using HTML tables. Tables were originally meant to display tabular data only and not to control layout. Modern accessible websites should be built using DIVs controlled and formatted using CSS (Cascading Style Sheets). This technique has many advantages over the table based designs:

1. Reduced download times
2. Greater compatibility across multiple browsers and platforms
3. Less code required
4. Separation of content from style
5. Improved search engine optimisation
6. Consistent design throughout the website
7. Easier to maintain and flexible

Screen readers significantly improve their results when reading a page constructed using DIVs and CSS. All modern websites should be built using this method.

Usability issues
The following is a list of things which aid the usability of the website and are not part of the accessibility guidelines. This doesn’t mean that they should be overlooked. Usability is vital to the success of a website to aid the user experience and reduce the chances of users becoming frustrated.

• Logo should link back to the homepage.
• Search facility should be in the top right.
• Links should be coloured correctly - blue for non-visited links and red for visited links.
• A breadcrumb trail showing the current pages location from the homepage should be used.

We will be writing a more in-depth article on usability in a few weeks.

Online automated tools

There are several online tools which run a scan of your website to produce a report detailing the accessibility compliance. These online tools are far from perfect as common sense plays a big part testing for accessibility. The most popular online tool is WebXACT by Watchfire (formally known as Bobby). WebXACT is a great tool to identify possible issues which you can look into. The report links back to the accessibility guidelines, making it easy to identify a solution.

Further information

For additional information on accessibility please see the useful links below:

• World Wide Web Consortium (W3C)
• Web Accessibility Initiative (WAI)
• Web Content Accessibility Guidelines (WCAG)
• Watchfire WebXACT (formally Bobby)
• W3C CSS Validator
• W3C XHTML Validator

There’s a wealth of information and resources on the internet regarding accessibility. Search for “website accessibility” on Google for further information.

Accessibility