Web Pages

Site Structure

  • Use style sheets that control layout and presentation, but documents should be organized so they are readable without requiring an associated style sheet.
  • Avoid frames, but if you use them, always clearly title each frame. Frames create printing problems and are not easily bookmarked, and search engines have trouble indexing sites with frames.
  • For web forms, use appropriate mark up, such as label, legend, and field set.
  • Updated or refreshed areas of the page or screen must be announced and accessible to assistive technologies.
  • Page should maintain understandable structure if converted to one column or displayed without the associated style sheet.
  • Use label and field set attributes for forms. Submit via a button rather than an automatic script.
  • If using a CAPTCHA, ensure it is accessible via a screen reader.
  • Avoid time-limited interactions including “automatic” events. If that is not avoidable then provide warning and user control of the event.
  • Employ simply structured, consistent, and error-free code.

For more in-depth information on page and site structure see the W3C's information on Page Structure Concepts.

Images

  • Include clear and concise alternative "alt" text attributes for all relevant images and graphics appearing on your site. “Comment out” (for the screen reader) strictly decorative graphics with alt = “”. Use a testing tool to view images replaced with their alt text.
  • Informationally rich graphics, such as charts and graphs, require an appropriate "longdesc" attribute or D link.

For more in-depth information on images see the W3C's information on Image Concepts.

Forms

  • Provide visible labels close to their form controls.
  • Use HTML elements and attributes to associate labels with their controls.
  • Clearly indicate required fields.
  • Clearly describe constraints, such as required formats.
  • Group similar controls using Fieldset and Legend.
  • Ensure controls can be navigated using the keyboard.
  • Ensure form elements have visual focus indicators.
  • Use validation to eliminate unnecessary end-user efforts.
  • Be sure that errors are communicated clearly and are easy to identify for a range of assistive technology users, along with everyone else.

For more in-depth information on forms see the W3C's information on Form Concepts.

Text

  • Any use of data tables requires appropriate header mark-up. Cells within nested or complex tables must convey all appropriate associated headers. They also require appropriate caption elements and the summary attributes.
  • Links should have concise and descriptive screen text. Do not use "Click Here" or "Read More".
  • Do not rely on color to convey meaning. For example, “the president’s comments are in red.” In addition, use only color contrasts distinguishable by those who do not see in color.
  • Use semantically correct heading structure.
  • Use relative, not fixed, font sizes.

Colors

  • Colors must have sufficient contrast between a text color and its background. This includes text on images, icons, and buttons.
  • Colors used to convey information on diagrams, maps, and other types of images must be distinguishable.
  • WCAG 2.0 (Level AA) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and a contrast ratio of at least 3:1 for graphics.
  • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

The Colour Contrast Analyser is an easy way to determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators.

You can download and use this tool to check your color combinations for accessibility.

Colour Contrast Analyser

Video

Audio

  • All audio files must contain links to text transcripts.