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.

Navigate to the live page.

Wait for it to finish loading.

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.

Navigate to the page in Author.

Adjust the URL in the browser location bar:

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

Add "?wcmmode=disabled" to the end of the URL to load the page in preview mode without the sidekick.

After editing the URL, hit return to load the page and wait for the page to finish loading.

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.

Turn on new-brand preview mode in author by going to https://ubcms-author.buffalo.edu/etc/brand-preview.html and checking the box

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

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.

Click an error to display a solution at right

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.