Mozilla’s Accessibility Inspector helps developers to make websites and content accessible for all

Mozilla has a long history of driving and championing accessibility across the Web. We were glad to see that  the EU Directive on the Accessibility of Public Sector Websites and Mobile Applications – as part of the European Accessibility Act – was adopted into the law of each EU member state. The Directive states that all public sector websites, both desktop and mobile, and apps, have to follow the W3C’s Web Accessibility Initiative WAI. This has to happen gradually, but not later than September 2020 for websites and June 2021 for apps.

We are committed to supporting developers in making content accessible, no matter an individual’s physical and cognitive abilities and no matter how they access the web. This is why we have been developing a set of useful tools and features called Accessibility Inspector, which allows website owners and developers to test the level of accessibility of their websites and fix the most common issues.

With the release of Firefox 70, we have added several new features that are now available in the Firefox Developer Tools. Here is an overview of the most important tools:

• Check for Keyboard issues: Problems with keyboard navigation and visual focus are a very common source of accessibility problems for various types of users. Firefox now contains a checker for many common keyboard and focus problems and explains how to fix them.
• Contrast: The Accessibility Inspector includes a full-page color contrast checker that checks for all three types of color contrast issues identified by the Web Content Accessibility Guidelines 2.1.
• Color Vision Deficiency Simulator: Firefox now comes with a new tool that simulates seven types of color vision deficiencies (also known as color blindness). This allows developers to see a close approximation of how someone with one of these conditions would see their page. It also allows developers to find out if they have colored something without providing an alternative, so that it can’t be perceived by a color blind user.

• Accessibility Picker: Mouse users can quickly audit elements on a website using the accessibility picker, a tool that highlights an element and shows its properties. Firefox displays an information bar that shows the name, role and color contrast ratio of the element.

Read more about the Accessibility Inspector’s latest tools on the Mozilla Hacks Blog.

The Accessibility Inspector is available by default since Firefox 63 and has been continuously developed since.

About Mozilla’s A11y community: 

While the Web is fundamentally designed to work for all people, we all need to make sure we don’t exclude anyone while the Web and its content develops. Mozilla has a dedicated community, consisting of hundreds of passionate volunteers who have specific needs when it comes to accessing and developing for the Web: A11y. A11y is a widely recognized Web numeronym that refers to human-computer interaction, specifically to Web accessibility among people with disabilities. A11y is also the way we refer to our community of accessibility experts at Mozilla.

Some team members of the A11y community at Mozilla have varying degrees of vision impairment, some are registered blind and others have motor impairments, all of which can make dealing with day-to-day online tasks challenging. The Firefox A11y team at Mozilla is dedicated to working across the whole Web accessibility ecosystem, ranging from influencing W3C Web standards, browser implementation and evangelism, to collaboration with – and support of – assistive technologies.

Useful Links:

• Hacks: Auditing For Accessibility Problems With Firefox Developer Tools
• MDN: Accessibility Inspector
• MDN: Understanding the Web Content Accessibility Guidelines
• “Auditing for Accessibility” presentation at Inclusive Design 24 (YouTube video, 10.10.2019, 40 minutes), Marco Zehe, Senior Accessibility QA Engineer & Evangelist, Mozilla