Web Accessibility and Usability

Reasons to Consider the Accessibility of Your Website

The accessibility of your website is important, not only does it allow more of your sites visitors to navigate and use your site, but it is also a legal responsibility. The Disability Discrimination Act requires that disabled individuals have effective access to services and information. Failure to do so can, and already has, led to legal proceedings.

It is in the website owners interest since there are 8.5 million people with disabilities in the UK at present, who have a total disposable income of over £50 billion. This is a significant market so it is a necessity that we build sites with a view to prevent accessibility barriers and take the necessary steps to correct any problems with existing sites.

Free and commercial editions of website accessibility checking software "Bobby" are available from Watchfire. Other evaluation tools can be found here.

  • Priority 1or 'A' - which is described as things that must be done
  • Priority 2 or 'AA' - things which should be done
  • Priority 3 or 'AAA' which is things that may be done

The following points are a rough guide to the W3C Web Content Accessibility Guidelines 1.0. The full technical guidelines can be found on the W3C website.

Priority 1

  1. If you use captions, these need to be specified. [Priority 1]
  2. Provide client-side image maps instead of server-side image maps except when regions cannot be defined using an available geometric shape. [Priority 1]
  3. Ensure pages are usable when scripts, applets and other programmable objects are turned off. [Priority 1]
  4. Title each frame of a frameset. [Priority 1]
  5. For any time-based multimedia presentation synchronise equivalent alternatives with the presentation. [Priority 1]
  6. Identify changes in document language using LANG attribute. [Priority 1]
  7. Describe table contents using CAPTION or SUMMARY, TITLE attribute, use HEADERS or SCOPE attribute to specify row and column labels. [Priority 1]
  8. Provide text equivalent for all non-text elements such as images, symbols, image map regions, animations, applets, scripts, using ALT or LONGDESC. [Priority 1]
  9. USE NOSCRIPT to provide alternative content when javascript cannot run. [Priority 1]
  10. Ensure equivalents for dynamic pages are updated when dynamic pages are updated. [Priority 1]
  11. Avoid causing the screen to flicker [Priority 1] or blink [Priority 2].

Priority 2

  1. Make scripts and applets directly accessible or compatible with assistive technologies. [Priority 1 if functionality is important otherwise Priority 2]
  2. Ensure foreground and background colours provide sufficient contrast when viewed on a black and white screen or by someone having colour deficits. [Priority 2 for images] [Priority 3 for text]
  3. Provide Metadata on pages contents and author. [Priority 2]
  4. Don't use Meta Refresh or redirects, use server redirects instead. [Priority 2]
  5. Create pages that validate to W3C HTML standards. [Priority 2]
  6. Use H tags for headings, P tags for paragraphs, UL,OL,DL,LI for lists and HR to break up content. [Priority 2]
  7. Use textual information instead of images whenever possible, e.g. equations. [Priority 2]
  8. Do not use tables for layout purposes unless the table makes sense when linearised. Otherwise provide a linear version. [Priority 2]
  9. Use CITE, DFN, CODE, SAMP, KBD, VAR, INS, DEL to mark up citations, definitions, computer code, sample output from programs, text to be entered by the user, variable program or argument, inserted text, deleted text. [Priority 2]
  10. Mark up quotations using Q and BLOCKQUOTE elements. [Priority 2]
  11. Use <EM> <STRONG> not <B> and <I>. [Priority 2]
  12. Don't use complicated nested lists and don't use list tags for text indentation only. [Priority 2]
  13. If the table is used for visual formatting only then do not use structural mark up use CSS instead. [Priority 2]
  14. Avoid movement in pages such as animated GIFs until users can stop such movement. [Priority 2]
  15. Ensure elements are device-independent. [Priority 2]
  16. Use device-dependent attributes (in brackets) if you use onMouseDown (onKeyDown), onMouseUp (onKeyUp), OnClick (onKeyPress). [Priority 2]
  17. Link text should indicate information about the page being linked to, not phrases like 'click here', use of TITLE attributes is also recommended. [Priority 2]
  18. Do not use pop ups windows and do not change the current window without informing the user. [Priority 2]
  19. When using the OBJECT tag use a text equivalent in the body of the tag to describe the object. [Priority 2]
  20. Describe the purpose of the frames and how they relate if not obvious from titles. [Priority 2]
  21. Use relative rather than absolute units in markup language and CSS. [Priority 2]
  22. All form elements must have labels, use LABEL tag. [Priority 2]
  23. Do not use javascript links or on the fly content, since assistive devices cannot read this dynamic content. [Priority 2]
  24. Avoid deprecated features of W3C technologies. [Priority 2]

Priority 3

  1. Use LINK element to specify additional pages. [Priority 3]
  2. Ensure dynamic content is accessible otherwise provide alternative. [Priority 3]
  3. Identify natural language of document. [Priority 3]
  4. Mark up abbreviations and acronyms using ABBR and ACRONYM. [Priority 3]
  5. Do don't use tables to lay out text in columns, because screen readers will read across both columns making the text unreadable. [Priority 3]
  6. Group related links, use non-link, printable characters surrounded by spaces between links. Use the MAP tag with TITLE attribute to group the links so they can be bypassed by a screen reader etc. [Priority 3]
  7. Create a logical tab order through links, form controls and objects. [Priority 3]
  8. Provide keyboard shortcuts to important links, form controls etc. Use ACCESSKEY attribute of A fro example. [Priority 3]
  9. Provide a means to skip over multi-line ASCII art. [Priority 3]
  10. Provide redundant text links for client-side image maps. [Priority 3]
  11. Add default text to TEXTAREAs to tell a user what to input. [Priority 3]

CSS - Accessible Style Sheets

Priority 1

  1. Organise documents so they can be read without style sheets. [Priority 1]
  2. Ensure information conveyed with colour is available without colour. [Priority 1]

Priority 2

  1. Use style sheets to control layout and presentation. [Priority 2]
  2. Do not use BLINK or MARQUEE. They are non-standard elements. [Priority 2]
  3. Use "em" to set font sizes rather than pt or px. [Priority 2]
  4. Use relative units and percentages. You can use "3em", this is a fixed distance but is relative to the font size and scales nicely. [Priority 2]
  5. Do not use HTML font tags, you can use <SMALL> and <BIG> if you don't wish to use style sheets. [Priority 2]
  6. Always specify a fallback generic font. [Priority 2]
  7. Use numbers, not names for colours.
  8. When specifying a foreground colour always specify a background colour and visa versa.

Priority 3

  1. Provide information so users may receive documents according to their preferences. This applies to aural properties of CSS2 including various sound qualities. [Priority 3]
  2. Use a minimal number of style sheets for your site, use linked styles sheets rather than embedded ones, use the same CLASS sttribute for the same concept in all of the style sheets. [Priority 3]

The material presented on this website is for guidance and resource information purposes only. It is intended that the material be used to assist with regards to appropriate and reasonable practice but should not be taken as a comprehensive or definitive guide. As such, the author of this site, accepts no legal responsibility for the information provided here.