The audience of this section is intended to be those who produce or want to test content on the web, not necessarily those who do web development or build websites. For example, those who make LibGuides, or those who write content for the library website but submit that content to a web team, which makes the actual changes to the website.
- The concepts in this guide apply to LibGuides and content/learning management systems.
- If a tool in this guide requires some knowledge of web development tools, it will be noted.
- All of the core concepts outlined at the start of this guide apply to web content. For the most complete understanding, read both this section and the core concepts section.
Additional Resources for Testing Tools
These sources provide additional recommendations for accessibility testing tools.
- The Web Accessibility Initiative (W3C) provides an Evaluation Tools Overview which includes a list of web accessibility evaluation tools and a guide to selecting the right tool for your situation.
- CUNY Library Services Accessibility Toolkit for Open Educational Resources compiles self-evaluation and assessment tools and offers a handy place to find how-to videos.
Browser Extensions and Bookmarklets for Automated Web Page Testing
These tools typically compare content of a web page to a set of standards and alert you when there are possible issues. They are a useful place to start when determining if web content is accessible.
- WAVE (Web Accessibility Evaluation Tool)
WAVE is a suite of evaluation tools that can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors and also facilitates human evaluation of web content.- You can use the WAVE tool by entering a URL into the web page search box or by installing one of the browser extensions.
- Use the WAVE Tool Documentation for more information about how to use the tool, such as color coding, icons, and descriptions of the accessibility issues they indicate.
- Videos to learn more:
- ANDI (Accessible Name and Description Inspector)
A bookmarklet which provides automated detection of accessibility issues based on Section 508 and gives practical suggestions to improve accessibility. Available on Chrome, Edge, Firefox, Internet Explorer, and Safari. - axe DevTools
A free browser extension from Deque for identifying and resolving common accessibility issues. Available on Chrome, Edge, and Firefox. - Silktide
A browser extension which tests web pages for common accessibility issues based on WCAG and gives step-by-step guidance for improving issues. Available on Chrome and Edge. - SiteImprove Accessibility Checker
A browser extension which tests web pages for accessibility issues, explains how found issues affect users, gives recommendations about how to fix issues, and links to relevant WCAG articles. Available in Chrome, Opera, Edge, and Firefox. - Accessibility Bookmarklets
Easy to use accessibility visualization toolkit to test websites or web-based programs by the University of Illinois. Available for Chrome, Firefox, Safari, Opera, and Internet Explorer.
Developer Tools Built-in to Browsers
These tools are intended for web developers with some familiarity with HTML or DevTools but may be useful in some applications for those checking web content who are willing to learn a bit.
- Chrome DevTools Accessibility Reference
This page gives guidance about using Chrome DevTools to check for accessibility. - Firefox Accessibility Inspector
The Accessibility Inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree. - Microsoft Edge DevTools: Accessibility-testing features
Similar to Firefox Inspector, view the accessible properties assigned to the selected element.
Linked or Embedded Content
Web pages can include content of various types that are linked on them or embedded into them. In many cases, these things were created separately and can be tested separately from the web page. Some of these content types include:
Forms
- You may wish to check the documentation for the form software you are using but a few general guidelines to get you started include:
- Ensure adequate color contrast between background colors and text colors.
- Use a descriptive title.
- Consider including a progress bar.
- Keep forms simple and short with clear instructions and questions.
- Further Information:
- W3C Forms Tutorial
This tutorial focuses on the creation of forms in html but may be useful for those looking to understand the components that make a form accessible, even if you are creating a form using something like Microsoft or Google Forms.
- W3C Forms Tutorial
- Testing Techniques:
QR Codes
- Best practices for QR codes include:
- Sufficient color contrast
- Descriptive alt text
- Including a link alternative
- Further Information: Accessible QR Code Implementation
Word Processing Documents
- Refer to the Word Processing Documents section of this guide.
PDFs
- Refer to the Alliance’s PDF and Digital Materials Remediation Checklist as a place to start.
Media
- Refer to the Media section of this guide.
- Avoid auto-replaying media.
- Avoid media that could induce seizures.
- Further information: Understanding WCAG SC 2.3.1: Three Flashes or Below Threshold
Responsive Design
Check that the web content renders well and stays usable on multiple screen sizes and resolutions. You can do this in a web browser, so you don’t have to check on various devices.
Google Chrome
- Navigate to the Developer tools menu in one of the following ways:
- Right-click on a web page and select Inspect.
- Select the toolbar menu (three vertical dots), select More tools, then select Web Developer Tools.
- Use the keystroke Ctrl+Shift+I (on Windows devices)
- Select the Toggle device toolbar (or use the keystroke Ctrl+Shift+M on Windows devices).
- Use the dimensions drop-down menu to select the device screen size you intend to check.
Firefox
- Navigate to the Developer tools menu in one of the following ways:
- Right-click on a web page and select Inspect.
- Select the application menu (sometimes called the hamburger menu) from the main toolbar, select More tools, then select Developer tools.
- Use the keystroke Ctrl+Shift+I (on Windows devices)
- Select Responsive Design Mode (or use the keystroke Ctrl+Shift+M on windows devices).
- Use the drop-down menu to select the device screen size you intend to check.
Navigating to Other Content Types
Use these links to continue (or return) to the other content types in this section: