Inspect website code for accessibility

On this page:

Overview

Important:

This information is intended for web developers, providing a holistic process for performing an initial pass of evaluating your website for accessibility. This is not a substitute for performing a complete Web Content Accessibility Guidelines (WCAG) 2.0 AA site evaluation, but following this full process will capture most of the WCAG 2.0 AA Guidelines more efficiently.

It is impossible to meet the website accessibility standards in IU's Americans with Disabilities Act Policy (UA-02) using only automated tools.

Inspecting the HTML can reveal non-conforming code that can cause accessibility problems. For example, some assistive technologies have trouble performing as expected when the HTML markup is invalid.

Inspection methods

Many automated tools, such as SortSite, aXe, AInspector and FAE, will identify code that may cause accessibility problems. Additional review, either through manual inspection or with a validator, can identify other problem areas.

Validators

Validators are easy to use because they automatically check code based on specifications. You can find reliable validators through the W3C.

Recommended validators

Bookmarklets

An easy way to find HTML parsing errors that may affect accessibility is with two bookmarklets that work with the W3C Nu HTML Checker:

  1. While on the page to be inspected, use the Check serialized DOM of current page bookmarklet to send the page to the Nu HTML Checker.
  2. From the Nu HTML Checker results page, use the Check for WCAG 2.0 parsing compliance bookmarklet to filter the results.

The results will show errors and warnings relevant to WCAG 2.1.

Manual inspection

Manually reviewing the HTML markup is more difficult, but useful when looking for specific types of non-conforming code.

To check the code in a browser, right-click on a web page and choose either:

  • View Page Source
  • Inspect or Inspect Element

Because web browsers often try to correct non-conforming code, inspecting the code may show markup that differs from the page source. View Page Source will show the code as written by the developer; Inspect or Inspect Element will show the code as interpreted by the browser.

Note:

To open the developer toolbox by keyboard to the last tool accessed, use the following shortcuts:

  • Mac: Command-Option-I
  • Windows: Ctrl-Shift-I

To open the code inspector by keyboard, use the following shortcuts:

  • Mac: Command-Option-C
  • Windows: Ctrl-Shift-C

To open the source code by keyboard, use the following shortcuts:

  • Mac: Command-Option-U
  • Windows: Ctrl-U

More keyboard shortcuts are available for the developer toolbox:

What to check

Recognizing non-semantic elements can help identify potential issues. Using a <div> or <span> instead of a button, for example, requires adding the full set of accessibility features that come standard with the semantic element.

Examples of common non-conforming code that may cause accessibility problems include:

  • Incomplete start and end tags
  • Deprecated code not used in HTML5
  • Empty or duplicate IDs
  • Anchors (<a> elements) missing href attributes
  • Invalid ARIA attributes or values
  • HTML elements with non-standard attributes
  • <meta> tags placed in the <body> of the HTML code
  • Missing semicolons (";") at the end of CSS rules

Previous step: Check zoom and magnification for web accessibility
Return to index: Perform an accessibility review on your website

Get help

For questions or consultations, email the Enterprise Experience accessibility team.

Related documents

Evaluation resources for meeting Web Content Accessibility Guidelines (WCAG) 2.0 AA standards

This is document atex in the Knowledge Base.
Last modified on 2023-10-04 10:58:36.