How to run the WAVE tool on UBCMS pages

This tool evaluates Web pages for accessibility issues. We recommend their browser plugin.

The WAVE assessment is the standard by which UB is currently measured for compliance.

How to Get the WAVE Tool

The WAVE tool can be run from the WebAIM.org website, or installed locally on your Chrome or Firefox browser. The online tool can be used in some cases if the plugin cannot be installed, but will not work with:

  • pages in UBCMS Author
  • authenticated pages
  • pages that require interaction to reveal functionality

Thus we recommend running the tool locally. You can install the WAVE Chrome or Firefox plugin from the WebAIM website. Click 'Add to' button and agree to any prompts.  

Checking a Published Page

It is easier to check a live Web page, than it is to check a page that is in Author. These steps assume you have installed the WAVE plugin.

  1. Navigate to the live page.
  2. Wait for it to finish loading.
  3. Click the WAVE icon in the browser's toolbar.

Checking a Page in Author

Follow these steps if the page is not published, perhaps as a pre-launch check, or if you wish to remediate some of the errors and retest. It is recommended to test sites that are us ethe new brand, or to use the Brand Preview tool for old-brand sites. These steps assume you have installed the WAVE plugin.

  1. Navigate to the page in Author.
  2. Adjust the URL in the browser location bar:
    1. Remove "/cf#" from the URL (after https://ubcms-author.buffalo.edu) if present to load the page without the Content Finder.
      e.g. https://ubcms-author.buffalo.edu/cf#/content/www/cmshelp.html
      becomes https://ubcms-author.buffalo.edu/content/www/cmshelp.html
    2. Add "?wcmmode=disabled" to the end of the URL to load the page in preview mode without the sidekick.
  3. After editing the URL, hit return to load the page and wait for the page to finish loading.
  4. Click the WAVE icon in the browser's toolbar.

Note: Clicks to other pages in this mode will load in author mode with the sidekick, but will not bring back the content finder. If you want it back, start again from the list of sites/pages, or add "/cf#" back to the URL.

Checking an Old-Brand Page

Many improvements have been made to UBCMS templates and system-wide components that are only enabled in new-brand mode. The WAVE tool will report many errors and alerts on old-brand pages that an author has no control over or ability to fix. These issues will be fixed immediately site-wide when new brand mode is switched on for the site, but other accessibility issues in the page content that are the author's responsibility may remain. It can be hard to tell these issues apart

One way to try to tell these issues apart is to check accessibility using the Brand Preview Tool in Author, whether or not your site is in-progress on its new-brand transition.

  1. Turn on new-brand preview mode in author by going to https://ubcms-author.buffalo.edu/etc/brand-preview.html and checking the box
  2. Use the "Checking a Page in Author" process described above.
  3. Resolve any issues and activate pages.
  4. On the live site in old-brand mode there may still be errors showing in the WAVE report, but they should all be errors that will vanish when the new brand is switched on for your site.

Checking a Shared Content Page

Shared content can be checked wherever it is published in a normal page (both teasers and full-content host mode pages). Shared content can also be checked in Author using the method above. In Author, it should be viewed/checked with the new brand preview turned on or else there will be several system-wide errors/alerts shown that are out of the author's control.

Reviewing the WAVE Report

sample WAVE report

Sample WAVE report.

The WAVE report opens on the left side of your page.

The initial Summary tab (clipboard icon) shows:

  • Errors (Red) - these must all be fixed.
  • Alerts (Yellow) - these must be evaluated case-by-case, and should almost all be fixed.
  • Features (green), Structural Elements (blue), HTML5 and Aria (purple) - these are beneficial accessibility features of the page.
  • Contrast Errors (black) - generally these must all be fixed. A couple components generate false-positives.

The Details tab (Flag icon) provides the specifics of each error. Click each error message to highlight it on your page. Click "i" to see a description of how to evaluate and correct each item, but also see our recommended solution below.

Some items may not be readily visible on the page, but still need to be found and evaluated. Examples include:

  • Content in collapsed Collapsible Content Containers.
  • Content in menus that are not expanded.
  • Content in slides of slidedecks and slideshows that are not currently selected.
  • The "code" tab (green tab at bottom of below page content) or "No Styles" tab (above the report) can be useful to track down hidden content.

Find a Solution for a WAVE Error

Below is a list of the messages you may encounter.

  • Click an error message you have received. A recommended solution will appear to the right.
  • Click 'Clear All Filters' and then click a new error message to research another concern.
RECOMMENDED SOLUTION

The heading size (e.g. Type / Size: "Heading 1" in the Title dialog box) of Title components on a page should be thought of as a page outline. As with an outline, every page should have a Title with size "Heading 1" and sizes should not be skipped as they increase. It is ok to skip from size "Heading 4" back to size "Heading 2", but not to skip directly from size "Heading 1" to size "Heading 3," for example.

You should select a heading size based on the hierarchical structure of your content, not based on what title styling looks good to you. Also, you should use an actual Title component rather than a short, possibly bold, line of text as a heading.

Home pages typically do not start with a "Heading 1" Title, but many components like the Slide Deck: Vertical or Key Tasks (for use with Slide Deck: Horizontal or Photo) include a Heading 1 title.

See this WebAIM page for more information on structuring a page semantically:
http://webaim.org/techniques/semanticstructure/

If your UBCMS new-brand page is producing this error in a place or way you cannot edit, notify the UBCMS Help Desk.

All instances of this should be fixed, except on some home page layouts.

All links must contain text. This can sometimes indicate an invisible editing glitch in the body text or other rich text editor. If your UBCMS new-brand page is producing this error in a place or way you cannot edit, notify the UBCMS Help Desk.

All instances of this should be fixed.

Master Class Resources

If you cannot resolve an error, please contact the DCT Help Desk.

Was This Page Helpful?

(Required)
(Required)
(so we can thank you or request more details)
(Required)
(buffalo.edu addresses only please)