Testing Accessible Websites

This Instructable is about testing web accessibility using the online WAVE tool. By entering a URL, you can review a free report of a website's accessibility and 508 code. This is especially important for job aids we use, since the majority of them are going to be web URLs.

Step 1: Open Up Your Web Browser of Choice

To start, open up your preferred web browser. WAVE will work with any major browser, though I recommend using the browser your learners will use to access the online training.

Step 2: Navigate to Https://wave.webaim.org/

Enter https://wave.webaim.org/ into your web browser.

Step 3: Paste Https://www.usps.com/ Into the 'Web Page Address' Bar

For this exercise, we will be testing the web accessibility of https://www.usps.com/. Copy the web address into the search bar labeled 'Web Page Address' Bar.

Step 4: Review Results

WAVE will then perform an accessibility check on your website. Take a second to review the analysis, and click through the results to familiarize yourself with how WAVE identifies objects.

Step 5: Review the Webpage Without Styling

Toggle the ‘Styles’ bar to view the HTML structure with HTML removed. This is valuable since most screenreaders will be reading HTML content and not CSS.

Step 6: Evaluate Errors With Web Accessibility

Select the toggle again to turn on the styling for this exercise. Next, click ‘view details’ to see a breakdown of the report. The first area is specifically dealing with errors. You will be presented with any links missing alternative text, as well as any areas of your website with low contrast.

Step 7: Evaluate Flagged Warnings

The next section deals with possible errors. While not mandatory to be fixed, they should still be reviewed to make sure there aren’t any errors.

Step 8: Review Existing Accessibility on the Website

The next section highlights accessibility on the site that is 508 compliant. Alternative text for links and images, labels, skip links, and other accessibility code will be demonstrated here. This view is excellent if you are comparing a web resource against a checklist of 508 elements needed on the website.

Step 9: Review Hierarchy of the Site Headings

Next is the structural headings of the site. WAVE will display H1 through H5 headings on the site. Ideally, a clear structure will exist. H1 headings for the highest level of headings and titles, and headings descending underneath.

Step 10: Review HTML ARIA Roles on the Website

Last is the ARIA roles. These tags help a screen reader navigate a web URL. The more of these the site has, the better!