Fixing Accessibility Problems

Since web sites created with OU Campus use an accessible template, it is not necessary to evaluate every aspect of the site for accessibility. Only the unique content on a page needs to be evaluated.

The following procedure will identify the most common accessibility problems.

Requirements

Procedure

For each page in the site, open the page in Firefox, click the "Errors, Features and Alerts" button on the WAVE toolbar (see image below),  and perform each of the following checks:

wave toolbar

Note: Clicking the Errors, Features and Alerts button places icons and messages on the web page. To clear those icons and messages, click the Reset Page button in the WAVE toolbar.

Alt text for images is meaningful

  • Alt text for images are displayed next to the alt icon. icon for image alt text
  • All images must have alt text. Images without alt text will have a red icon. missing alt text icon
  • Alt text must be understandable when read.
  • Alt text should represent the purpose and function of the image, not just describe its 
    appearance.
  • Alt text for portraits of people should be the name of the person.
  • If text is clearly visible in an image, it should be included in the alt text.

PDF, Word, and other non-html documents are identified

  • All links to PDF files need to be identified in the link text (for example, Coded Memorandum AA-2006-41 [pdf] .
  • All links to Word files need to be identified in the link text.

Tables are used appropriately

  • Data tables data table icon must have appropriate headings. table header icon
  • Layout tables layout table icon must linearize correctly.
    • Click the Text-only button. Text-only button
    • Content should be in the correct order.
  • For tables without borders between the cells, you can use the Web Developer Toolbar to see where rows and columns are.
    Outline > Outline Tables > Table Cells
    Layout tables typically have just one row. Tables with more than one row should probably be data tables.

Headings are used appropriately

  • If text is acting as a heading (a short, single line of text which acts as a title for the content that follows it) then it needs to be labeled a heading.
  • Headings are identified with their level, H1 (most important) through H6 (least important). heading icon
  • Heading levels should not be skipped. In other words, do not go directly from H3 to H5.
  • Headings for content of the same importance on the same page should have the same level.
  • Headings should not be underlined (unless they are also links).
  • Bold text bold icon should not be used in place of a heading.
  • Headings should not be used just to emphasize text.

Link text is meaningful

  • All link text should describe what it is linking to ("click here", "more", etc. are not acceptable).
  • Link text should not be repeated (links with the same text should link to the same place).
  • Link text should not just be the URL (for example, /services/accessibility/.)

Lists are used appropriately

  • Lists are identified as unordered (bullets) unordered list icon or ordered (numbers) ordered list icon.
  • Lists should not be simulated by using manually added numbers, hyphens, asterisks, etc.

Forms are correctly labeled

  • Form fields that are missing appropriate labels will be identified.label error icon
  • All form fields need to have labels.