Keeping your Web Site Accessible - Guidelines

The following guidelines may help you when you are designing your site for accessibility. These are not comprehensive; check the World Wide Web Consortium (W3C) pages.

Text

• Use headings and list elements properly. Make sure that higher-level headings (<H1>) are used before lower-level headings ( <H4>).
• Avoid using <BLINK> and <MARQUEE>. Blinking or scrolling text may present problems for users with epilepsy or poor vision.
• Don't use text symbols as graphics, as in the case of smileys.
• Never use a line of asterisks (or other characters) as a horizontal rule. This will be read by a screen reader as "asterisk, asterisk, asterisk...." Use <HR> or an image instead.
• When specifying font size, use relative values such as <FONT SIZE="+1"> rather than relative values such as <FONT SIZE="4">. This takes account of users with screen enlargement software.
• Avoid the use of <FONT COLOR> or <FONT FACE> , as it is difficult to predict how they may display for users with a different browser setup.

Graphics

• Always provide alternate text for an image (ALT).
  If the image is a functional one, the text should adequately describe the function of the image: for example ALT="Home Page Button".
  If the image is a descriptive one, the text should give an adequate description of the image: for example ALT="Girl on Swing" rather than ALT="photo". However, the description should not be too long (keep under ten words).
  For decorative bullets, use a similar text symbol, such as ALT="." rather than ALT="square bullet".
• Avoid the use of images which are simply made up of bitmapped text. Screen readers cannot read this text, and it needlessly increases download time.
• Instead of using an image map, consider using text or a number of separate images.
• If you do use an image map, provide alternate text links on the same page. Provide a client-side instead of a server-side image map where possible.
• An image that is used as a link or button should be at least 1" x 0.5", to facilitate users with poor motor control.

Color

• Use an adequate contrast between text and background colours. Dark text against a light background, or light text against a dark background, works best.
• Avoid using colour combinations that may be difficult for people with colour-blindness to distinguish (the most common type of colour-blindness is an inability to distinguish red and green). Ensure that all information conveyed in colour also makes sense without colour.
• If you set colours using the BODY attributes, you should specify all colours (BGCOLOR, TEXT, LINK, VLINK, and ALINK). This is because users can choose to set browser to show colours other than the defaults. For example, if you set BGCOLOR="#000099" (dark blue), but do not set the TEXT colour, your text will not be visible in a browser set to show text as dark blue.
• Set colours using hexadecimal values rather than colour names, for example BGCOLOR="#000000" instead of BGCOLOR="black" . Some older browsers cannot recognise these colour names.

Links

• Link text should describe where the link will lead: for example, Mr. Rooney's Home Page rather than Click here. However, it should not be too long, as this can cause problems if the text is enlarged.
• Links adjacent to each other should have a space, or preferably an extra character, between them. For example:
  Infants Classes | First Class | Second Class | Third Class

Tables

• Clearly identify row and column headers.
• Test tables in a text-only browser to see how they appear. Text-only browsers have different ways of interpreting table information.

Multimedia

• Provide alternate text for important audio information.
• If you are using video, ensure that the visual part is adequately described by the sound track.
• Minimize the use of plug-in software such as Shockwave, PDF, or QuickTime, or provide alternatives to using these plug-ins. For example, if you are providing a PDF document, also provide an HTML transcript.
• Use alternatives to dynamic content, and ensure that these alternatives are updated regularly.
• Animations should not display text too fast for a slow reader to read it.

Frames

• Consider providing a "no-frames" option.
• Always provide each frame with a title.

Other

• Style sheets are an excellent way to control layout and presentation of your Web page. However, if you use a style sheet to format your page, always test that the page is still readable without the style sheet.
• Avoid flickering, blinking, and other distractions.
• Use the clearest and simplest language that you can in the context of the site.