How to run the WAVE tool on UBCMS pages

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.  

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.

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.

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.

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.

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.