Overview

These guidelines are meant to help developers (and designers) build accessible content for a wide spectrum of users.

Note: Styles display accurately in Chrome browser. Cross-browser/OS adaptions may be required for some elements.

CSS

General Rules

  1. Write valid CSS.
  2. Avoid inline styles.
  3. Do not use !important.
  4. Use lowercase color codes (#ffffff), not names (white), for color values.
  5. Use CSS to format text. Do not use <font>.
  6. Use Em or percentage units to set font sizes. This allows visually impaired users to scale up font sizes with browsers without native zooming capabilities.
  7. CSS allows you to use relative units even in absolute positioning. Thus, you may position an image to be offset by "3em" from the top of its containing element. This is a fixed distance, but is relative to the current font size, so it scales nicely.
  8. Only use absolute length units when the physical characteristics of the output medium are known, such as bitmap images or border sizes.
  9. Provide a text equivalent for any important image or text generated by style sheets (e.g., via the 'background-image', 'list-style', or 'content' properties).
  10. Ensure that important content appears in the document object. Text generated by style sheets is not part of the document source and will not be available to assistive technologies that access content through the Document Object Model Level 1 ([[DOM1]).

HTML

General Rules

  1. Do not use <table> for layout purposes.
  2. Do not use placeholder images (like 1x1px clear.gif) for layout purposes.
  3. Do not use &nbsp; for layout purposes.
  4. Use semantic markup. Buttons should use a <button> tag, a primary heading should use an <h1> tag, etc.
  5. Avoid iFrames as much as possible. Use only for embedding 3rd party or insecure content that could break the DOM.
  6. Combine adjacent image and text links for the same resource. This allows assistive technology users to avoid scanning through redundant information. Example: <a href="home.html"> <img src="house.gif" alt="home page icon"> Go to the home page </a>
  7. Provide a logical tab order through links, form controls, and objects.

Javascript

General Rules

  1. The href tag should be used for a direct link to content, either in the parent (target="_parent") window or a new (target="_blank" ) window, so non-javascript enabled browsers can access the content.
  2. Using both keyboard-specific and mouse-specific events together (where applicable) ensures that content can be operated by a wide range of devices. Example: <button onclick="nextPage();" onkeypress="nextPage();">Next Page</button>
  3. Read about how to make Javascript "jump lists" accessible.
  4. When using javascript event handlers, return false so the href link is not followed by javascript enabled browsers.
  5. Insert dynamic content into the DOM immediately following its trigger element. Screen-readers follow the order of the HTML or XHTML elements in the DOM as the default tab order.
  6. Provide client-side validation and error messaging via the DOM.
  7. Create custom dialogs (overlays) that meet accessibility standards.