Web content must meet the Web Content Accessibility Guidelines (WCAG 2.1, Level AA). This page outlines some tools you can use to check your web content to identify any accessibility issues, and some tips on how to interpret accessibility scan results.
Silktide Toolbar
The Silktide Accessibility Checker browser extension includes an accessibility checker, color contrast checker and screen reader simulator.
WAVE - Web Accessibility Evaluation Tool
You can use WAVE to help you evaluate the accessibility of your web content.
There are two ways to access WAVE:
- WAVE website
- Visit wave.webaim.org
- Enter the URL you want to scan in the web page address field
- WAVE browser extension (can be used to scan pages that require a login)
- Install the WAVE browser extension
- Navigate to the page you want to scan
- Click the WAVE browser extension button to toggle WAVE on and off
More information on how to use WAVE is available in the WAVE documentation and Introduction to WAVE video.
WebAIM Color Contrast Checker
You can use the WebAIM Contrast Checker to check the contrast ratio between the text and background colors.
How To Interpret Accessibility Scan Results
After you scan your website using a tool like WAVE or Silktide, the tool will report any issues found during the scan. Here are some tips on how to interpret these findings and to prioritize which issues to fix first.
Focus on "Low-Hanging Fruit" First
Some issues are easier to understand and fix than others. One strategy is to fix the easy problems first. Every issue that's resolved improves the accessibility of your website, and feeling you're making progress can motivate you as you move on to address the more difficult issues. Here are some errors that may be easy to interpret and fix:
Improper Heading Structure
The heading level should be chosen based on the heading hierarchy structure, not based on aesthetic preferences. Each page should have one h1 heading, and all other headings should be organized into a logical outline below it, starting with h2.
To fix heading structure errors, assess the headings on your page. Are you missing an h1? Does the page have more than one h1? Did you skip from h1 to h3 because you thought h2 looked too big? You may only need to make a few edits to the page's headings to resolve the issues in this category.
Missing Alt Text
All images must have alt text or be marked as decorative.
If an image relates to the content of the page, it should include helpful alt text. If the image is purely decorative, it should be marked as decorative.
The same image may require alt text on one page, but be marked as decorative on another. For example, a laptop on a manufacturer's product page should include alt text because it relates to the page content, but a stock photo of a laptop used as "eye-candy" on a blog post about remote work may be better marked as decorative.
Writing good alt text is more of an art than a science. Harvard's Write helpful Alt Text to describe images is a great reference to help you determine how to write appropriate alt text for the images on your website.
Insufficient Color Contrast
This error requires you to change the foreground/background color combination to increase the contrast between the text color and the background color. Note that sufficient color contrast is dependent on font size: smaller fonts require greater color contrast than larger fonts do.
You can use a tool such as the WebAIM Contrast Checker to help you to choose an accessible color combination.
Sometimes you can fix the color contrast issue yourself, if, for example, it's due to a text color that was manually specified using a page's content editor, or if the problem is caused by the "brand colors" that were entered using an admin console that you have access to.
But often, colors are defined in a site-wide location that you don't have access to. In this case, fixing the problem will require assistance from the vendor who supports your web site. Most likely, the site colors are defined in a site-wide location, so when the vendor changes the colors, it will fix that contrast issue everywhere on your site.
Improper Link Text
Change generic link text such as "Click here", "More", etc. to text that describes the destination. It's better to use descriptive link text rather than the URL of the destination page. Remember, screen readers read the link text to the user; think about what would be most helpful to the person, given the context.
Links with Different Destinations
This error means that the same link text is used for links with different URLs. You can resolve this error by changing the link text on one or both links so each URL has unique link text.
Example: Two links in the same page have the link text "Apply Now" but they link to different pages - one links to an undergraduate application, and the other links to a graduate application. To fix this error, change the link text so the URLs use different link text, for example "Undergraduate Application" and "Graduate Application".
Remember that screen reader users can't easily scan the surrounding text to infer information, so in the above example it's probably better to explicitly state the type of application in the link text on both links, rather than leaving "Apply Now" as the link text on one and only changing the other to "Graduate Application". In this situation, a sighted user could more easily deduce that since there's a Graduate Application link, Apply Now refers to undergraduate applications, but this won't be as easy to deduce for someone using a screen reader.
I'm Having Problems Understanding an Issue
Interpreting accessibility scans is often not black and white, and sometimes it's hard to understand what is meant by an error in the scan report. It can be helpful to scan a page using both Silktide and WAVE, then look at the issue in question in both scans. Sometimes the description in one or the other tool is easier to interpret.
I Can't Fix This Issue
Often, a web site is built on a particular vendor's software platform that is hosted "in the cloud" rather than on a server on our campus. You'll need to assess which issues you can resolve yourself using the tools that you have access to, such as the WYSIWYG editor that you use to make content updates. Other issues will need to be addressed by the vendor, as they are either configured in an area of the platform that you don't have access to, or they require changes to be made to the software's code.
In our experience, the best tactic is to address the issues that we can fix ourselves (such as those listed in the "Low-Hanging Fruit" section) first. Once we've done everything we can, we reach out to the vendor with any issues that we believe they need to fix.
Tool-Specific Information
Silktide Toolbar
After installing the Silktide browser extension, you should see a Silktide icon in the Extensions area of your browser toolbar. To use Silktide, click on the Silktide icon on the right side of the browser window. If you don't see an icon on the right, click on the Silktide icon in the browser toolbar, which should toggle the right side icon on.
After clicking the right side icon, the Silktide panel opens on the right side of the browser window. At the top of the Silktide panel is a dropdown listing various devices. The default is Desktop, but you can select other devices to simulate how your web page looks on various screens.
To use Silktide, you probably want to start with the Accessibility Checker to scan a page. Note: Make sure WCAG 2.1 AA (the default) is selected in the dropdown at the top of the panel.
Once the scan is finished, you'll see a list of issues. You can choose from four different filters; these determine what issues are listed in the scan results. It's often easiest to start with the automated checks, then move to the assisted checks.
- Automated (default): Lists checks which Silktide carries out with a distinct pass/fail.
- Assisted: Lists checks which Silktide can alert you to check manually, but does not give a definitive pass/fail. These checks require a human to make a determination as to whether they pass or fail, because they aren't black and white decisions that can be made by the software.
- All checks: Lists both automated and assisted checks.
- Passed: Lists the checks which passed.
When you click on an issue, you'll see a brief description of the accessibility rule, along with a link you can click to see more in-depth information on the rule.
Often below the rule description is a list of instances of this problem that were detected in the page, and you can click on each to see where in the page it's located and other details, such as the HTML code (the details depend on the type of issue it is).
Other features of the Silktide Toolbar that we use frequently:
- Alt Text: Lists all images in the page, along with the image's alt text or "Decorative" if the image has been marked as decorative.
- Focus Order: Displays the order assistive technology will use to parse the page.
- Links: List all links in the page. Each link includes the URL and link text.
- Headings: Lists all headings in the page, and the text associated with each.
- Screen Reader: This is a screenreader simulator that you can use to better understand how a screen reader will parse the page.
WAVE
You probably want to start with the Details Tab. This is an overview of everything found in the scan. You can simplify what you see by turning off some categories. You can even turn off everything except the one error you're working on.
From there, you may want to use the Order Tab to see the order assistive technology will use to parse the page, and the Structure Tab to see the heading structure of the page.