Tips for creating an accessible website

Creating an effective website requires three different skill sets.

Content providers (authors) - write the text and provide other content such as pictures.
Designer (style creator) - establishes the "look and feel" of the website.
Engineer (code writer) - employs HTML/CSS code to deliver the final output as the author and designer wish.

Very few people are truly expert in all three of the above disciplines. Many "webdesigners" are self-taught and rely upon their editing software to deploy the correct HTML code. This is probably why a recent study found that 98% of government and commercial websites did not follow the industry standard for programming code. The result is that these sites do not display on some browsers as expected and, more importantly, they are not understood by assistive software such as screen readers.

To help each of the three disciplines to work together to produce an effective and accessible website we have produced the following checklist divided into the tasks that each should be responsible for.

Content Providers (Authors)

Text

Ensure that all text is clear, concise, uses words, and phrases at an appropriate level for your target audience.
Start longer pages with a short introduction.
Divide longer pages into blocks of text (sections). Ensure that these blocks of text are kept small and divided by section headings. Generally a sentence should not be longer than two lines and a single paragraph of text should not be more than 6 or 7 lines.
Start each section with a sub-heading that is relevant to the section.
Explain/expand each abbreviations or set of initials the first time you use them on each page.
Use text for links to other pages that explain clearly what the link does (i.e what happens if the link is activated)
Only use standard fonts.

Graphics (pictures)

Make images the correct size before inserting them into a page.
Ensure that all images have meaningful alternative text (Alt tags)
For diagrams and charts provide a text description (longdesc tags)
Do not use images for displaying any text (especially navigation buttons and section headings which should use CSS instead)
Do not use animated or moving images that may cause distraction.

Multimedia

Provide html alternatives for all Flash animations, videos etc.
Provide written transcripts for audio
Ensure that the site can still be used if the multimedia (or it's operating programme) is not available
Do not use multimedia on your Home page or Site Map.

Designer (Style)

Ensure that the colour contrast between the foreground (text) and background is adequate (check with a service such as http://snook.ca/technical/colour_contrast/colour.html )
If colours are not "web-safe" check that colour contrasts are still adequate when "nearest" web safe colours are applied.
Specify web-suitable font faces and relative font sizes for all text.
Maintain a consistent style and location for the main navigation buttons throughout the site.
Avoid using plug-ins such as Flash on the home page or site map.
Avoid flashing images or scrolling text wherever possible, any movement on a page should be smooth and predictable (unless it is an application such as a game).
If possible incorporate style images into the background, otherwise provide short alternative text tags with each image.

Engineering (Technically creating correct HTML code)

HTML code

Validate the HTML/XHTML code using a service such as - http://jigsaw.w3.org/css-validator/
Only use ISO file names (eg. avoid spaces, ampersands and other non alphabetic characters in file names)
Ensure file names have some relevance to the file content (particularly image files)
Start every page with a DOCTYPE declaration identifying the version of HTML used
Ensure that the <title> for each page is relevant to the page content
Use meta tags in the <head> section to specify content type, language, date etc.
Do not use tables for layout unless essential (use CSS instead)
If tables are used for layout make sure that content makes sense if the table is linearised (i.e. cells are read in sequence across each row in the order they appear in the code).
Ensure that tables used to display data are correctly coded using the <th> element for the first (title) row, include the "abbr" attribute for long column titles.
For long data tables use the <thead>, <tfoot> and <tbody> elements to allow scrolling.
Ensure that all form input fields use the <label for="..">...</label> element to tie the field's instruction label to the relevant input box.
Ensure that ALL images have alternative text tags. Images used for visual style only should be incorporated into the background using CSS.
Use CSS to achieve "roll-over" effects for navigation buttons
Do not use scripts or multimedia for functionality unless you also provide an HTML alternative

CSS

Validate the CSS code using a service such as - http://jigsaw.w3.org/css-validator/
Only use relative sizes for fonts and layout
Provide separate style sheet for print media. You should also consider providing stylesheets for other media (eg. aural, handheld, tty, etc.)

Navigation

Ensure that every navigation link is clearly labeled and working as expected.
Check that every page has at least one link from the site map.

Brief findings of UN report

In December 2006 the United Nations released a report on the accessibility of a relative sample of government and commercial websites. Their findings included :-

93% failed to provide adequate text descriptions for graphics
73% relied on JavaScript for important functionality
78% used colours with poor contrast, causing issues for those with colour blindness
98% did not follow industry web standards for the programming code
97% did not allow people to alter or resize pages
89% offered poor page navigation
87% used pop-ups causing problems for those using screen magnification software