Using Wave Tool to Check Pages for Accessibility

  1. Open new browser tab or window and and go to WAVE site.
  2. Obtain URL of Drupal page that you are working on (i.e., https://ysu.edu/center-for-student-progress, etc.), copy and paste this into the box into WAVE and click the -> arrow icon on right side of box. SEE VISUAL
  3. Look for content below page title and above footer.  Ignore rest of content since this is part of the theme/template. SEE VISUAL
  4. Note: WAVE provides color coded messages.  Red is an error and yellow represents an alert.  Errors need to be fixed.  Alerts  need attention. Green represents alternate text for an image. If empty quotes are shown, alternate text needs to be added using Drupal. An exception would be text next to an image which is the same as the alternate text.
  5. Click on color coded designation on page. A pop-up window will display with message. Click on the “More Information” link to read how to correct issue. More information will appear on left side of window. SEE VISUAL
  6. Click on Contrast button, above Documentation, to display report information on any issues affecting individuals with low vision. Contrast icon will appear on page where issue was identified. SEE VISUAL
    1. Click on the red boxes, if present, to see where issue is located
    2. Note: if issue(s) are located within template, YSU Web Team will need to look at correcting.

Installing WAVE Browser Plugin

The WAVE tool plugin is available for both Chrome and Firefox

  1. Go to WAVE tool 
  2. Select Browser Extensions
  3. Select the link either under Chrome Extension or Firefox Extension.
  4. Select Add to Desktop/+Add to Firefox button 
  5. Note: plugin icon will be visible in browser toolbar. Press icon when on web page to evaluate its accessibility.

Accessibility Requirements