Getting Started

The Commons recommends using the Wave Web Accessibility Evaluation Tool to verify accessibility on all Commons sites. You can use the Wave homepage directly or you can install browser extensions for either Chrome or Firefox. If you choose to install an extension, you will see a small wave logo in the upper right-hand corner of your browser. Click it to toggle Wave on and off.

Follow this link to find more information about installing and using browser extensions.

The free version of Wave evaluates one web page at a time. There are Site-wide Wave tools, but these require purchasing a license.

Evaluating A Web Page

When you invoke Wave (either through the homepage or via your browser’s extension), it will evaluate the page’s accessibility. After a few seconds to, you will see a panel on the left-hand of your screen that looks something like this:

Notice first that Wave evaluates the Web page three different ways: Styles, No Styles, and Contrast.

Styles detects issues that are found when the CSS style sheets are active. The is the normal mode we think of when we look at a site. Navigation can be done via a mouse or other pointing device.

No Styles detects issues that are found when the CSS style sheets are stripped out. According to AIM standards, all sites should be operational by the keyboard only.  This ensures that people with disabilities are able to navigate the site without using a pointing device.

Contrast detects issues that might occur for people with impaired vision or people who are color blind. In particular it looks at background color and text color to see if there is enough color differentiation.

Each of these evaluation types display color-coded accessibility issues. These include Alerts, Features, Structural Elements, HTML5 and Aria, and Contrast Errors. While these are very useful to review and learn about, the actual errors that you need to address are displayed as red.

To find the issue details on the Web page, hover over the flag circled below. It will turn red. Click on it and you should see a screen similar to the one displayed on the right:

In this example, we see four errors and many yellow alerts. If you click on each of the icons, you will be taken to the location of the issue, and a dotted rectangle will highlight it. While some errors are simple to fix, others might require theme or plugin modifications.

Alt Tags

One of the most common mistakes you will run into will probably be the lack of “Alt” tags for images on your site. When a web reader encounters an image  without an Alt tag, it has no way to describe the image to a person with limited vision. Make sure each image has a meaningful Alt description. If you type alt=”image-27,”  Wave will validate the image, but it is more ethical to type something  meaningful, such as alt=”image with sun and ocean.” If the image is purely decorative, it should have still have a an alt tag, but that tag should be empty – alt=””.

Video Captions

If you embed videos into your site, make sure that they are captioned so that people with hearing disabilities are able to follow along. Many videos resources at the various CUNY libraries had to take down videos that did not have captions.

Fonts and Colors

Ensure your font and color choices are compatible with the required web-accessibility standards.

Button and Form Labels

When a screen reader encounters a button or a form, it looks for its label to communicate its purpose.

Headings

Headings (i.e. h1, h2, h3) facilitate screen reading. If you skip heading levels, you will get a yellow alert. If you have an empty heading, a red alert will be generated.

Error Information and the Icon Index

For each error or alert, and blue circle with an “i” can be clicked on to display information about the problem and how to fix it. You can also click on the Icon Index hyperlink to see all the possible errors, alerts, features, structural element, and HTML5 and Aria icons. You can also click on each icon to get a desscription of the problem and how to fix it. You can see part of the icon index on the left that shows the 22 red icons.

See Also:

• Accessibility on the Commons
• Building Accessible Sites and Groups
• Four Principles For Accessibility
• Background on Web Accessibility Guidelines