WAVE Tool Demo

Using the WAVE Tool

  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/campus-recreation, etc.), copy and paste this into the box into WAVE and click the -> arrow icon on right side of box. SEE VISUAL
    Login page showing User Account area with separate boxes for username and password along with Login button
  3. Look for content below department horizontal nav menu 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.
  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
    See the Office of Marketing and Communications Website for list of examples.
  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.
      1. See Beeghly College of Education as an example.
        List of Web Browsers
        Name Version HTML5 Compliant
        Chrome 66 Yes
        Opera 45 Yes
        Edge 17 Yes
        Firefox 59 Yes
        Safari 11.1 Yes

Alternative Approach

Use Chrome browser and install WAVE tool plugin (Windows OS)

  1. Click on orange exclamation point icon (i.e., at right end after address box)
  2. Mouse-over More tools, from drop down menu, and select Extensions
  3. Scroll to bottom of page and click Get more extensions*
  4. Enter Wave Evaluation Tool into search box (upper left hand corner of window)
  5. Press Enter (key) then click +Add to Chrome (button)
  6. Wait a few moments for the WAVE tool icon to be added to Chrome. WAVE tool icon will appear at the right side of address box (i.e., W icon)
  7. When viewing web page to check for accessibility -> press WAVE tool icon in toolbar (i.e., end of URL box).

Use Chrome browser and install WAVE tool plugin (Apple/Mac OS)

  1. Go to Window (top menu)
  2. Select Extensions
  3. Scroll to bottom of page and click Get more extensions
  4. Enter Wave Evaluation Tool into search box (upper left hand corner of window)
  5. Press Enter (key) -> click +Add to Chrome (button)
  6. Wait a few moments for the WAVE tool icon to be added to Chrome. WAVE tool icon will appear at the right side of address box (i.e., W icon)
  7. When viewing web page to check for accessibility -> press WAVE tool icon in toolbar (i.e., end of URL box).