Check Website Accessibility With Firefox

Firefox can help you spot accessibility barriers such as missing image descriptions, unlabeled controls, poor heading structure, and keyboard traps. Use its built-in accessibility tools to inspect a page, then test the page yourself with a keyboard; automated checks are useful clues, not proof that a site is accessible.

What You’ll Need

A current desktop version of Firefox. The Accessibility Inspector is available in Firefox Developer Tools; labels may vary slightly between releases.
The web page you want to review. If you are responsible for the site, test a staging copy or a page you are allowed to inspect.
A keyboard, and optionally a screen reader for a more complete manual review.

Step-by-Step

Open the page and choose what to test. Navigate to the page in Firefox. Check more than the homepage: include a representative article or product page, menus, forms, dialogs, and any important interactive flow. Accessibility can differ across templates and states.
Open Firefox Developer Tools. Press F12 or Ctrl+Shift+I on Windows or Linux, or Command+Option+I on macOS. You can also open the Firefox menu, choose More tools, then Web Developer Tools. If the shortcut is intercepted by your system, use the menu.
Select the Accessibility panel. In Developer Tools, click Accessibility. If it is not visible, open the panel-selection menu (often shown as an overflow icon) and select it there. Firefox may ask you to enable accessibility features; confirm to start the inspection. The panel analyzes the page currently open in the tab.
Review the accessibility tree. The tree represents content and controls as assistive technology can encounter them, including their roles, names, and states. Expand sections and select items to inspect their properties. Look for controls with no useful accessible name, unexpected roles, or text that does not describe the control. A visible label is preferable; an icon-only button should still have a meaningful name.
Check the tree and source together. When you select an item in the tree, Firefox can highlight the corresponding page element. Use the Inspector when you need to trace an issue to markup or CSS. Do not assume that a technically present name is helpful: compare it with what the control visibly does and how a user would understand it.
Run the available automated checks. In the Accessibility panel, look for the Check for issues control or issue-checking options. Choose the available checks, such as contrast, keyboard, or text labels, and review the results. Exact options depend on the Firefox release. Click a reported issue to locate the affected element, then confirm it in context before changing anything.
Check color contrast where possible. Use Firefox’s contrast information for text or controls if the selected element exposes it. A reported contrast problem deserves investigation, but inspect the actual text, background, font size, and state. Contrast can change on hover, focus, disabled controls, images, and overlays; a single sampled color does not cover every state.
Test without a mouse. Close or minimize Developer Tools, then use Tab and Shift+Tab to move through interactive elements. Use Enter or Space to activate controls where appropriate, and arrow keys for menus or grouped widgets when their design calls for them. Confirm that focus is visible, follows a sensible order, and can leave dialogs or menus. Press Escape to try closing an open dialog or menu.
Try a screen reader for important tasks. If one is available, use it to navigate headings, links, form fields, and landmarks, and complete a key task such as submitting a form. Firefox’s accessibility tree is informative, but actual screen-reader behavior depends on the browser, operating system, and assistive technology.
Record and retest each issue. Note the page, element, expected behavior, actual behavior, and steps to reproduce. Fix issues in the site’s source rather than trying to alter the page locally in Developer Tools. Reload the updated page and repeat both the relevant automated check and manual test.

Common Mistakes

Treating a clean scan as a pass. Automated tools cannot reliably judge whether instructions make sense, focus order is logical, or a task is usable with assistive technology.
Assuming a warning is always a defect. A checker may flag an element that needs human review. Confirm what users encounter before deciding what to change.
Checking only one page or state. Menus, validation messages, pop-ups, and dynamically loaded content can introduce problems that do not appear on initial load.
Testing only with a mouse. This misses keyboard access and visible-focus problems. Test keyboard navigation separately.
Confusing an image description with a filename. Meaningful images need a useful text alternative; decorative images are often better hidden from assistive technology. Choose based on the image’s purpose in context.

Tips

Start with high-impact tasks: navigation, search, sign-in, checkout, and forms. Record repeatable steps so someone else can reproduce a problem.
Inspect headings and landmarks for a useful structure, but do not rely on visual appearance alone. A large, bold paragraph is not necessarily exposed as a heading.
Check form fields for clear labels, instructions, and error messages. Confirm that errors are discoverable and that users can identify which field needs attention.
Test at different zoom levels and with text enlarged. Watch for clipped content, overlapping controls, and horizontal scrolling that makes a task difficult.
Keep the Firefox Accessibility panel open while investigating, but return to the page regularly. Developer Tools can change the viewport and affect what you see.

Troubleshooting

The Accessibility panel is missing: Open Developer Tools with F12 or the platform shortcut, then check the panel overflow menu. If necessary, update Firefox and reopen Developer Tools. Some interface details differ between desktop versions.

The panel says accessibility features are disabled: Use its prompt to enable them. If the tree does not refresh, reload the page or close and reopen the panel. A page that has not finished loading may also show incomplete results.

No issues are reported, but something seems wrong: Treat the scan as one input, not a certification. Inspect the tree, test keyboard operation, and use a screen reader if available. Check the problematic interaction in its open, focused, and error states.

Keyboard focus disappears or gets stuck: Try the same steps in a fresh tab with extensions disabled, since extensions can alter page behavior. If the issue persists, record the exact sequence and inspect dialogs, menus, and custom controls. A developer may need to correct focus handling in the page.

The contrast checker gives no result: Select the text or control itself and check whether Firefox exposes contrast data for that element. Images, gradients, transparency, and changing backgrounds can make automatic readings unavailable or incomplete; assess those cases separately.

Frequently Asked Questions

Can Firefox certify that a website is accessible?
No. Its tools help identify some issues, but accessibility depends on real use and many combinations of content, browser, and assistive technology. Combine automated checks with manual testing.

Do I need to install an extension?
No. Firefox Developer Tools include an Accessibility panel. Extensions may offer additional checks, but they are not required for the basic inspection described here.

Can I inspect a website I do not own?
You can use Firefox to inspect pages you can access, but Developer Tools changes on your device do not fix the live site. Report reproducible problems to the site owner or responsible team.

Does Firefox test screen-reader accessibility?
The accessibility tree shows information exposed to assistive technology, but it is not a substitute for using a screen reader. Test with the tools and operating system used by your intended audience when possible.

What should I check first?
Start with keyboard access, visible focus, meaningful control names, image alternatives, headings, and form labels. Then check key tasks and any issues reported by the panel.

General steps for current mainstream versions; menus can differ by device and version. See the disclaimer or report an error.

More in this bed

The whole Tech How-To bed →