Greg's Blog

helping me remember what I figure out

Base Guidelines for Accessibility

| Comments

Having recently been faced with an accessibility complaint I was tasked with rectifying the issues that one of our sites faced. In the following I have drawn up my very own base guidelines for making a site accessible, well at least as far as I understand it and do please note that this is by no means a complete listing of the requirements. For more information, please take a look at the resource listing below.

Priority 1

  1. give alternative text options for non-text elements: Flash, images (concentrating on image content, functionality or representation [for bullet point image use for example “* bullet item”]). Note spacer images is used should be have alt attribute value of “*” [according to RNIB]. If a longer description is required (due to an elaborate image) use the longdesc attribute for <img> and title for <a>.
  2. another reason not to use Frames: if used need to provide meaningful NOFRAMES content (such as links to navigation and content)
  3. avoid image maps or provide redundant links for these
  4. if multimedia is being used (videos for example): there should be a text based description of the auditory track
  5. in addition to the previous items, consider providing a closed caption for the presentation
  6. colours, where colours are used to convey information (i.e. red for errors), ensure that information is also conveyed without (i.e. “warning: errors have occurred!”, bolded and bigger font size)
  7. natural language: if you change the language used in the body of text say from English to French, clearly mark it using the lang attribute within and encapsulating tag
  8. where tables are used make sure you clearly identify column and row headers. For example:

    <table summary=”table description goes here”>
    <caption>table caption goes here</caption>
    <tr>
    <th id=”header1”>column header</th>
    <th id=”header2”>2nd column header</th>
    </tr>
    <tr>
    <td id=”header1”>column value 1</td>
    <td id=”header2”>column value 2</td>
    </tr>
    </table>

    Which would be rendered as follows by a screen reader:

    Caption: table caption goes here
    Summary: table description goes here
    Column header: column value 1, 2nd column header: column value 2
  9. Organise documents so that can be read without style sheets (semantic use of HTML/xHTML tags)
  10. If dynamic content is used make sure that all the text for non text equivalents is also updated, i.e. images, applets, frames. For example:

    <applet code=”Press.class” width=”500” height=”500” alt=”Java applet: how temperature affects pressure”>
    As temperature increases, the molecules in the balloon…
    </applet>

    OR

    <object classid=”java:Press.class” width=”500” height=”500”>
    As temperature increases, the molecules in the balloon…
    </object>

    If scripts are used to present dynamic content (such as JavaScript to load in content), then make use of the <noscript> tag to represent alternative content
  11. PDFs: provide text alternative for PDF files, such text or xHTML. Also consider directing user to this link
  12. since most user agents (browsers and PDAs for example) don’t allow for control over flickering content such as <blink>, avoid using it!!!
  13. server side image maps: where image maps are generated server side use redundant links again to allow for access to the site as an alternative, also use the alt attribute in the image to inform the user of the meaning and where the redundant links are
  14. frames: gives frames meaningful names and titles.

Priority Level 2 and 3

  1. while rendering image maps make sure appropriate text equivalents are displayed (lv 3)
  2. provide enough contrast between foreground and back ground colours (both for HTML and images) (lv 2)
  3. where possible use a text link rather than an image. (lv 2)
  4. font sizes use relative rather than absolute values , i.e. use em, rather than px, pt, cm (lv 2)
  5. user header elements to outline document structure (hidden [where x is a numeric value] tag that renders when style sheet is disabled) (lv 2)
  6. Only use tables for presentation when their content can be linearised (i.e. each cell translates to a paragraph and is rendered from column to column, row by row) (lv 2)
  7. do not visually table cell content (lv 2)
  8. do not use auto-refreshing pages, until browsers can allow end users to control this behaviour (lv 2)
  9. tabbing, create a logical tab order in your navigational links, form controls and other objects [use the attribute tabindex] (lv3)
  10. no to pop ups and no to changing the window focus without warning the user first (lv 2)
  11. Label your form controls (lv 2). e.g:

    <label for=”firstname”>First name:
    <input type=”text” id=”firstname” tabindex=”1”>
    </label>

    Another point to consider is grouping a large amount of fields together into logical groups. You can do this using the <fieldset> tag around a grouping of form controls. You also may want to consider using the an additional <legend> tag to describe the logical grouping.
  12. when using links clearly label the target link, i.e. use the title attribute in <a> to indicate the target document (such as the document title) (lv 2)
  13. provide semantic information about each document in your site, e.g. <title> and meta data. (lv 2)

There you go my review of the base requirements with some hints on how to achieve Level 1,2 and three compliance. Below I have listed a whole raft of additional resources that delve into more depth or simply provide good tools for testing your site.

External resources

Font control resources

Tools

CSS/xHTML