How the Firefox Accessibility Inspector Audits Web Pages

This article provides a direct overview of how the Firefox Accessibility Inspector evaluates web page inclusivity. It explains the specific mechanisms the tool uses to expose and audit the underlying accessibility tree for assistive technologies, visualize and test the sequential keyboard tab order, and automatically calculate text color contrast ratios against Web Content Accessibility Guidelines (WCAG) standards.

Auditing the Accessibility Tree

The Accessibility Inspector evaluates a webpage by generating the accessibility tree, which is a modified subset of the standard Document Object Model (DOM) stripped down to the information that assistive technologies, like screen readers, actually use.

When you open the inspector, it audits this tree through the following methods:

  • Node Inspection: The main panel displays the hierarchical relationship of all accessible objects on the page. Selecting an element reveals its computed "Role" (what the element is) and "Name" (how it is labeled).
  • Properties Verification: A secondary pane exposes the detailed properties of a selected node, including its current states (such as focused, checked, or expanded), ARIA attributes, and the exact DOM node it connects to. This allows developers to verify if custom widgets are communicating their states correctly.
  • Automated Tree Scanning: Using the "Check for issues" dropdown menu, selecting "Text Labels and Names" forces the inspector to traverse the tree and flag elements that lack necessary semantic information. It automatically highlights images missing alt text, unlabelled form inputs, and interactive elements with empty names directly within the tree structure.

Auditing Keyboard Tab Order

To ensure a webpage is operable without a mouse, the Accessibility Inspector provides both visual and automated auditing tools for keyboard navigation.

  • Visualizing Tab Sequence: Checking the "Show Tabbing Order" box in the inspector's toolbar overlays numbered indicators directly onto the rendered webpage. These numbers trace the exact path the focus indicator will take when a user presses the Tab key. This allows for an immediate visual audit to confirm that the focus order matches the logical reading order of the layout.
  • Automated Keyboard Audits: Selecting the "Keyboard" option from the "Check for issues" menu scans the page for focus-related violations. The tool cross-references event listeners in the DOM with the accessibility tree. It flags elements that have click actions attached to them but are not focusable via the Tab key, elements that lack proper semantic roles (like using a <div> as a button without a tabindex), and interactive elements that lack visible focus styling.

Auditing WCAG Text Color Contrast Ratios

The Accessibility Inspector measures the luminance contrast between foreground text and background colors to ensure readability for users with low vision, strictly adhering to WCAG AA and AAA criteria.

  • Element-by-Element Picking: By activating the Accessibility Picker icon and hovering over text on the webpage, a tooltip appears displaying the exact numerical contrast ratio (e.g., 4.52:1). It pairs this number with green checkmarks or red warning icons indicating whether the text passes WCAG AA or AAA standards.
  • Contextual Size Evaluation: The audit automatically detects the computed CSS font size and weight of the inspected text. It applies the standard 4.5:1 AA requirement for normal text, and dynamically adjusts its grading threshold to the 3:1 AA requirement if it detects the text is "large" (typically 18pt and above, or 14pt bold).
  • Full-Page Contrast Scanning: Selecting "Contrast" from the "Check for issues" menu audits every visible text node on the page simultaneously, generating a list of only the failing elements.
  • Complex Background Calculation: Unlike basic contrast checkers that only compare two hex codes, Firefox takes a snapshot of the rendered pixels. If text is placed over a CSS gradient or an image, the inspector calculates and displays a contrast range ( showing the lowest and highest ratios found behind the text) and fails the element if any part of that range drops below the WCAG threshold.