11 Checkpoints for Simple Webpage Accessibility

These checkpoints are what I use to ensure that my simple webpages are accessible. This is not a tutorial on how to apply the techniques. Only a minimum explanation is given when necessary.

This list was devised to provide a quick check of accessibility, without having to wade through the extensive lists given in the Section 508 or the WCAG guidelines. After going through the checkpoints, test your page using one of the external link validation tools to see how well you did.

As used here, the word "simple" means that the page does NOT have any of the following features: frames, complex tables or tables used for structural purposes, scripts that are necessary to use the page, multimedia presentations, applets, flickering or blinking effects, image maps, ASCII art, foreign languages, or automatic page refreshes. If you have any of these features on your page, you will have to add some new checkpoints of your own to my list.

The Checkpoints

  1. Validate

    your XHTML and CSS first. Many of the checkpoints will already be taken care of when your page validates.

  2. Appearance.

    Make a visual check of your page.
    • Text stands out clearly from the background.
    • Plenty of white space.
    • Text lines not too long.
    • Font easy to read.
    • Color not necessary to use the page. ( eg. don't say something like, "Red indicates a required field" )

  3. Structure.

    • Headings in order. ( h1 > h2 > h3 ... )
    • Headings not skipped. ( eg. NOT h1 > h3, with no h2 )
    • Paragraph tags used when necessary. ( so that ALL text is enclosed by a block element )

  4. Menus.

    • Unordered list used for markup.
    • Skip-navigation link exists before the menu.

  5. Links.

    • Meaningful link text.
    • 'title' attribute used in the 'a' tag.
    • Icon used for off-page links. ( since the 'target' attribute is deprecated )

  6. On-page navigation.

    • Tab-browsing works properly. ( use 'tabindex' only if absolutely necessary )
    • 'accesskey' attribute used where appropriate. ( eg. 1 for Home Page and 2 for Main Content )
      • letters NOT used ( could conflict with those used by the browser or text-reader )

  7. Text.

    • Emphasis. 'em' used for italics and 'strong' for boldface ( never 'b' ).
    • Acronyms & Abbreviations. 'title' attribute used to define them.
    • Quotations.
      • 'q' tag used for inline.
      • 'blockquote' tag used for more than one line.
      • 'cite' attribute used to include a link to the quote, if needed.

  8. Images.

    • 'alt' attribute always used.
      • meaningful alt-text is used, unless
      • image used for spacing or pure decoration, or image used as a list-bullet: use alt="".
    • 'title' attribute used, if image is not being used as a link. ( since Firefox doesn't show a tooltip for the 'alt' attribute )
    • 'border' attribute is NOT used ( deprecated - use 'border:' in CSS )

  9. Tables.

    • Description given. Use a 'caption' tag, or describe in the 'title' attribute or 'summary' attribute of the 'table' tag.
    • 'th' tags.
      • 'scope' attribute used.
      • 'abbr' attribute used, if needed.

  10. Forms.

    • 'fieldset' & 'legend' tags used to group form elements into logical units.
    • 'label' tag used.
      • is adjacent to all 'input' and 'textarea' tags.
      • 'for' attribute used to correlate with 'id' attribute of the associated 'input' tag
    • 'textarea tag' and its ending tag are on the same line in the source code. ( else the cursor won't start at the beginning of the area )
    • 'button' tags have a 'title' attribute.
    • 'submit' buttons have alt-text.

  11. Scripts.

    • Unobtrusive. ( off-page )
    • Degradable. ( disable them, to see if things work properly without them )
    • Backwards-compatible. ( make sure older browsers can handle them )