<

Website Accessibility Guidelines

Accessibility in Design

With website accessibility high on the UK Governments agenda web designers should certainly incorporate standards of design that allow site access to everyone, regardless of their health.

"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."

Tim Berners-Lee, W3C Director and inventor of the World Wide Web.

This means that web developers and designers should adhere to the excellent guidelines prepared by the W3C

By adopting these precepts the sites designed will be truly accessible to all, including the search engines who love a well structured site.

To achieve user friendly websites we must include support for site visitors who cannot differentiate between certain colours and for visitors who use devices that have non-color or non-visual displays. This can easily be achieved by using CSS to change colours and even produce plain text based pages for viewing or printing.

Presentation and Style

A consistent style of presentation on each page allows users to locate navigation elements more easily. The ability to skip navigation elements can help your site visitors to find important site content. This helps people with learning and reading disabilities but also makes navigation easier for all users.

XHTML for document structure and CSS for layout

Good practice is to use XHTML to convey the document structure of a web page and cascading style sheets (CSS) to control the layout and presentation of the page.

Misusing markup for a presentation effect (e.g. using a table for page layout or a font tag to change the font size) makes it difficult for users with specialised assistive software to understand the organisation of the page or to navigate through it.

Web pages that use cascading style sheets for layout and presentation are able to be read accurately by browsers that do not support style sheets and by browsers that have disabled the support for style sheets because the basic HTML page includes all the descriptive text for that document.

Specify the Language Used

Its good practice to define the primary natural language of the website in the header section of the HTML (e.g. xml:lang=en-gb if your site is written in english). Doing this helps screen readers to discover the language your pages are written in, so it can pronounce the words properly when it reads them aloud. This feature also helps Google in providing search results, even if you are writing in English, but especially if you are writing in some other language.

Page Titles

Check that each document has a unique and descriptive title and that the title does not use excessive punctuation.

There are no clearly defined rules for which characters to use as title separators. However, document titles should definitely not contain punctuation used for decorative purposes, for instance :: Title :: or == Title ==. Each punctuation character may be read out loud by screen readers, which will make listening to the titles very tedious.

Another screen reader, Apple’s VoiceOver, reads “»” as right pointing double angle quotation mark. That rules out that character for use not only in document titles, but also in links, where it unfortunately is quite popular.

So what can be used as a safe page title separator?

The general consensus seems to include the following choices:

1. site name | page name - browser name

2. site name - page name - browser name

3. site name : page name - browser name

Another good reason for good page titles is that Google displays them in its search results. It also ranks keywords higher when they appear in a sites page titles.

A really good discussion on different title separators can be found at www.456bereastreet.com.

Metadata

By providing good and descriptive metadata search functionality is improved. For instance, when several META elements provide language-dependent information about a document, search engines may filter on the lang attribute to display search results using the language preferences of the user.

Text Size

Use relative units (ems, percentages) rather than absolutes (pixels) for font sizes and line heights. This will allow all users to easily change the text size for comfortable viewing.

Another good reason to use relative units is that Windows IE will not allow readers to resize text that has been sized in pixels.

The ALT Tag

Make sure a meaningful text equivalent is provided for every image (e.g. via the "alt" tag). Screen readers read it, text-only browsers display it, Google finds it easy to index, and visual browsers can display it as a 'tooltip' or on the status line.

Many people misunderstand the real meaning of the alt attribute. It is meant to provide meaningful, informative text that should be used as an alternative when an image or other graphical object cannot be displayed. So this simple step of using alt tags can be a great help in making your site accessible.

Links

Opening links in new windows can confuse or disorientate visitors, especially those using assistive technology devices and software. So its best to avoid the target="_blank" option and let people leave your site when they click on an external link.

The target of each hyperlink should be clearly identified with an informative link title, meaningful enough to make sense when read out of context.

Form Fields

Use descriptive labels for all form fields and make sure that users can tab successfully through your form fields. This allows screen readers to intelligently announce what a particular input element is, by reading the label.

Take a look at our contact page for an example of this.

People, who are blind, have difficulty seeing, or who are using devices with small or no displays are unable to scan the page to get an overview of a page or to quickly find a link. These users will often tab from one link to the next or review a list of available links on another page (e.g. a well designed site map).

Consider Different Devices

By using cascading style sheets different results can be produced on a web page depending on whether a site is accessed via a browser, a text-to-speech reader, a mobile phone or a PDA.

Printing Site Pages Using CSS

Using CSS your pages should render well when a page is printed (e.g. to see the output of this page when its printed, click File, Print Preview from the above menu (this works for Firefox, our favourite browser. If you are using Internet Explorer 7 or later click the arrow by the printer icon and choose Print Preview from the displayed list).

You can also click here if you have not disabled JavaScript in your preferred browser, but this will produce the print dialogue box ready to print the page rather than print preview.

JavaScript

Where visitors have turned java scripts off in their browsers try and provide equivalent information on an alternative accessible page so they can still see it. Even better follow the advice above and use XHTML to convey the structure of the web page and cascading style sheets to control the layout and presentation so that your sites pages will still work with older browsers.

Read more articles about PC repairs, Web design & SEO...