Web Content

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.

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.
  • 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.

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.
  • 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

PDFs

Media

  • Refer to the Media section of this guide.
  • Avoid auto-replaying media.
  • Avoid media that could induce seizures.

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: