Development Guidelines

General

  • The presentation is separated from the structure (the CSS layout I have used for this page is from opensourcetemplates.org).
  • The title tag is meaningful and accurate.
  • A 'skip to content' link is provided to bypass navigation (recommended for blind or visually impaired users, people who use screen readers, people who don't use a mouse, and for text-browsers, mobile phones and PDAs).
  • HTML text is used for plain text rather than images of the text (unless an unusual font must be used).

Markup Specifics

  • Standard use of HTML tags is employed, e.g.:
    • Lists (such as this) are marked up with the specific list tags (ul, li) rather than, for example, br and div tags that can be used to make content look like a list.
    • Headings (such as the one above) are marked up with specific heading tags (h1, h2, etc) rather than, for example, using a p tag styled to look like a heading.
  • Table headers are indicated with th tags, e.g.:
    Header (view source to see th tag)
    left col datamid col dataright col data
  • The lang attribute is included in the html tag. Also, foreign language content is wrapped with a tag including the lang attribute, for example: hola.

top

Visual Appearance

  • The page is usable with images turned off.
  • The page is usable when the text is enlarged to twice its original size.
  • All form and link elements of the page can be accessed via keyboard.
  • Headings and text links are descriptive.
  • Content and background have sufficient contrast (for low-vision and color blind users). (For example, the pale blue link color in the original version of the template used for this page had too little contrast with the background, and I have changed it to a darker shade.)
  • No content flashes or blinks more than 3 times per second.
  • Focus is not disabled. (When a user tabs from element to element, it must be apparent where they are.)
  • Users are not required to detect color alone for important meanings or notifications. For example, with a form entry error, do not simply change the label to red but add another visual marker (such as an asterisk or other symbol), e.g.:
    Name and Email Test Form
top

Images & Multimedia

  • All images have an alt attribute; alt contains clear text if the image is a link; alt contains descriptive text (but not too lengthy) if the image is meaningful; alt is left blank if the image is purely decorative.
    Aaron Cannon's Web Accessibility Checklist
  • Transcripts or captions are provided for videos with speech, e.g.:
  • Accessible play controls are used for videos. (The player used for the video above–JW Player– includes accessibility features.)
  • 'Described versions' are provided for videos without sound (recommended for blind or visually impaired users).
  • Captchas are avoided, but if necessary, an audio equivalent is provided.

top

Forms

  • Form fields are labeled with the label tag (e.g.: see Name and Email Test Form above).
  • Fieldset and legend tags are used to associate prompts with radio buttons and checkboxes, e.g.:
    colors red    green    blue    yellow
  • Input errors are clearly labeled with text and placed next to the affected field or in another prominent position such as above the form (e.g.: see Name and Email Test Form above).
  • Help links or inline instructions are provided for entering form fields (e.g.: see Name and Email Test Form above).
  • Users are given confirmation prompts before important actions (e.g.: see Name and Email Test Form above).

top

Testing


top