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 accessibility issues found. Here are some tips on how to interpret these findings and 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. Is the page missing an h1? Does the page have more than one h1? Does it skip from h1 to h3 because 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 in one situation, but be marked as decorative in another. For example, a laptop on a manufacturer's laptop 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 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.
You can fix some color contrast issues yourself. For example, maybe the problem stems from a text color that was manually specified using a page's content editor, and you're able to edit the page and select a new color. Or perhaps one of the colors specified in the site's color palette settings needs to be changed in the admin console that you use to manage your website.
But often, colors are defined in a 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, colors are defined in a site-wide location, so when the vendor changes a color in that one place, it will fix the corresponding contrast issue everywhere on your site.
Text Contrast Over Images
This is another color contrast error; it happens when there's insufficient color contrast between the text color and the color of the background image.
While similar to the insufficient contrast issue above, there's another consideration when using an image behind text. Most modern websites are responsive, which means the page layout changes depending on the size of the screen. This can lead to situations where the color contrast is sufficient on some screen sizes, but on others, the text shifts so it's over a different part of the image that may not provide sufficient contrast.
Unless your background image has a consistent color value (i.e., relative lightness or darkness) throughout, you need to check the contrast ratio on a variety of screen sizes to be sure it's sufficient regardless of which size screen the page is viewed on.
Improper Link Text
Change generic link text such as "Click here", "More", etc. to text that describes the destination.
It's best to avoid using the URL of the destination page as the link text. Screen readers read link text, and hearing a long URL (often containing multiple slashes, underscores, and hyphens) is not as useful as hearing link text that describes the destination of the link.
It's important to keep in mind that screen reader users can't visually scan a page to infer information. Don't rely on information on other parts of the page to convey the purpose of a link, this may lead to confusion for someone who can't visually scan the rest of the page to deduce the purpose of the link.
Links with Different Destinations
This error means that the same link text is used for links that have different URLs. You can resolve this error by changing the link text so each URL has unique link text.
For example, a page lists several upcoming events, and each has a button to register for the event. If the link text for all the buttons is "Register Now", a screen reader user may have difficulty finding the link that corresponds to the event they want to attend. It's better to use the name or description of the event as the link text. If there are multiple events with the same name/description, you should also include the event's date in the link text, and if there are multiple events with the same name/description and date, you should also include the event's time.
I'm Having Problems Understanding an Issue
Interpreting the results of 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 provided by 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 website management tools that you have access to, such as the editor that you use to make content updates, or the admin console that you use to manage your website. Other issues will need to be addressed by the vendor, because they're either configured in an area of the website that you don't have access to, or they require changes to the underlying software.
Tool-Specific Information
Silktide Toolbar
After installing the Silktide browser extension, you should see a Silktide icon on the right side of your browser window. Click this icon to open the Silktide panel. If you don't see the Silktide icon on the right, click on the Silktide icon in the Extensions area of your browser toolbar; this should toggle the right-side icon on.
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 included in the scan results list. It's often easiest to start with the automated checks list first, then move on to the assisted checks list.
- 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.
For many types of errors, below the rule description, you'll see a list of all instances of this problem found in that page. You can click on each instance to see where in the page it's located and other details, such as the HTML code (the details provided depends on the type of issue).
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, including the heading level, and the heading text.
- Screen Reader: This is a screenreader simulator that you can use to better understand how a screen reader will parse the page.
WAVE
The Details Tab is the main tab. This is an overview of everything found in the scan. You can simplify what you see by unchecking categories or items to hide them from the page. You can even turn off everything except the one error you're working on.
The Order Tab shows the order assistive technology will use to parse the page, and the Structure Tab shows the page's heading structure.