Triage for Accessifying Websites

Fixing Web Site Accessibility with Limited Resources

Triage is a process being developed by the TLT Web Accessibility Team (the ATeam) to bring a website to an acceptable, if not perfect, level of compliance with current standards (WCAG 2.0 comformance level AA) - quickly.

Audit

  1. Document all websites that you or your unit are responsible for maintaining
  2. Collect web analytics reports and data

Select

  1. Select the most popular sites based on volume (i.e., visits in the analytics report).
  2. For each site, select the 10 to 20 most popular pages based on volume.
  3. Include the home page.
  4. Include pages with known blockers (e.g., unlabeled form fields, videos without captions)

It is important to understand that triage is an iterative process; when the initial set of selected pages is complete, the criteria for selecting the next set of pages will change. For example, select next the next most-popular pages, or target an audience of color blind users and examine colors and contrast used in pages in that context.

Test

Test selected pages with these tools:

  1. Validators: machine test of standards-based accessibility. Note that validators can only test for standards compliance and limited machine-testable accessibility issues; they cannot guarantee accessibility.
  2. Screen readers: provide a more complete test for accessibility, including usability. It is strongly recommended that one or more web developers and designers, or content experts, learn to effectively use a screen reader for accessibility testing.
  3. Code review: some testers will find reviewing the code of pages with forms or tables to be more efficient.

Fix

Use these critical HTML markup guidelines

Navigating web pages and websites

  1. The page title is important to confirm at first glance that the page you're reading is interesting to you. There is one H1 heading tag per page containing the page title, e.g., <h1>Symposium Agenda</h1>. The H1 tag is at the top of the page and before any other heading tags.
  2. Page layout is identified by heading tags H2 through H6.
    1. Page sections (e.g., header, footer, primary and secondary navigation, content) are identified with H2 at the top of each section.
    2. The content area contains the article, story, or item that you want to read or interact with; it is also identified with H2 at the top of the section, and is structured with nested H3, H4, H5, and H6 heading tags.
  3. Link text explains purpose of the target page or location. The classic dilemma is a list of links (as routinely provided by screen readers), all with the same text, e.g., "click here" or "read more"

It is still common practice to place a "skip to content" link as one of the first links on the page, although this link is not as important as marking page layout with header tags. Ryan Jones, a trainer from Freedom Scientific said "providing heading tags in correct order is icing on the cake; just give me headings!"

Navigating Forms

Identify form fields with a meaningful label, e.g., "First name", "Year", "User name". Use the LABEL tag.

Navigating tables

  1. Data tables must have understandable and descriptive summary attributes and CAPTION tags.
  2. Data cells in data tables are related to headers either by scope attributes or id attributes.

Describe content images and media

  1. Content images, e.g., images with a story, have appropriate ALT text.
  2. Videos have captions, and viewers are accessible; music players are accessible.

Top of Page