Guidelines

It takes both solid coding and thoughtful content to make a site accessible. If you’re using a non-WashU Site, please ensure the site is coded to accessibility standards, in addition to following the content guidelines below.

Since the words in this image are saved as part of the graphic, this message is not text-based. Information like this is more effective as text on a page. Other graphics, such as diagrams and maps, may require embedded text to communicate effectively. In these cases, use the alternative text attribute to summarize pertinent information for users who cannot see the image.

1. Text-based information is key

Text-based content is at the core of what WCAG calls the perceivable principle for accessibility. (WCAG’s four overarching principles are summarized nicely by Eric Grzymkowski of Oho Interactive.)

Images, videos and audio files all communicate non-text information. To make this content accessible, you simply need to complement media files with real text by providing these alternatives:

• Images, including graphics and photos
  Recognize that some visitors to your site will be unable to see images, perhaps because of visual impairment or page-loading issues. With these users in mind, include descriptive alternative text for images. Skip the alt text if the image is decorative rather than informative or if descriptive text would be redundant.
• Videos and audio clips
  Include captions and/or transcripts. This benefits those with hearing impairments, as well as people who aren’t using speakers or headphones.

2. Chronology matters.

People using screen readers experience your site linearly. People who rely on their keyboard instead of a mouse access links and form fields in the order they appear on the page and in the code.

Web experts Kinneret Yifrah and Rotem Binheim of InVision advise thinking top-down and left to right.

• Forms
  Place labels and descriptions before form fields, rather than after.
• Tables
  Avoid tables when possible. They’re tough to read on mobile screens (and sometimes even desktop), hurt search engine optimization (SEO), and can be frustrating to navigate and comprehend using a screen reader. If you do include tables, follow these tips and tricks from W3C.

3. Formats and styles carry extra weight.

Visitors using screen readers “scan” pages by skipping to subheadings and links, as demonstrated in the video near the top of this page.

• Links
  Make link text unique and descriptive. (Just say no to links that say “click here” or “read more.”)
• Subheadings
  Use subheadings generously to break up content sections. Prioritize clarity over clever-ity (see what we did there?) and use your site’s pre-set heading styles (h2, h3, h4), so visitors can reliably use subheadings as de facto bookmarks on a page.