Waggoner Library: Library Resources and Accessibility: Accessibility Tools

This page is a collection of web-based free tools that will check webpages for WCAG 2.1 compliance.

Tools are organized by element, e.g., ALT Text, Color Blindness, and Contrast and Color checking resources.

ALT TEXT

Alt Text Decision Tree
Use this decision tree table to determine if an image needs alt text. This decision tree describes how to use the alt attribute of the element in various situations. For some types of images, there are alternative approaches, such as using CSS background images for decorative images or web fonts instead of images of text.
SpringShare Tips Alt Text
web accessibility is a group effort. To that end, there are loads of things you can do to ensure that your LibGuides pages are as accessible as possible.
Step by Step Instructions for Writing Alt Text
Writing effective alt text can seem difficult at first, but if you follow these steps to analyze your images and understand what they're communicating, it will become much easier. Sponsored by the Digital Accessibility Department at the University of South Carolina.
Write helpful Alt Text to Describe Images, Harvard U.
This website has information about writing alt text, when it is needed, as well as additional resources.

COLOR BLINDNESS

Colorblindly Chrome Extension
This browser extension simulates how your page looks to users with different types of color blindness.

CONTRAST AND COLOR

Contrast and Color: Web accessibility guidelines
From the US Standards:
“WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full-color spectrum can read the text.”
“The options [shown] offer color palette combinations that fall within the range of Section 508 compliant foreground/background color contrast ratios.”
WebAIM: Contrast Checker Bookmarklet
The Contrast Checker Bookmarklet will display a miniature version of WebAIM's popular Contrast Checker on any web page. By using the eyedropper tool in the color picker tools, you can readily check the contrast of any page content by selecting the foreground and background colors. Drag the icon to the Bookmarks bar.

WAVE

WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content. Access WAVE online at wave.webaim.org. Information about browser extensions for Chrome and Firefox is available at wave.webaim.org/extension.

Introduction to WAVE [video] 11 min 20 sec
This video provides a high-level orientation to WAVE by reviewing the findings for an example page (nasa.gov/press-release/beanastronaut-nasa-seeks-applicants-to-explore-moon-mars).
WAVE Browser Extension
The WAVE Chrome, Firefox, and Edge extensions allow you to evaluate web content for accessibility issues directly within your browser. Because the extension runs entirely within your web browser, no information is sent to the WAVE server. This ensures 100% private and secure accessibility reporting.
more...less...
Updates to the WAVE extension will automatically be sent to your browser when they are made available.

To run a WAVE report, simply click on the WAVE icon to the right of your browser address bar. Click the icon again or refresh the page to remove the WAVE interface.

You can also trigger a WAVE report by pressing Control + Shift + U (Command + Shift + U on Mac) or by activating the "WAVE this page" context (right click) menu item. If using Edge, the shortcut key can be defined or customized on the Manage Extensions page.

To allow WAVE to evaluate local pages on your computer or pages in incognito modes, this may need to be enabled in the WAVE extension settings in your browser.