Categories: General

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

At Mozilla, we believe the internet should be open and accessible to all, everywhere in the world. Accessibility in web development means enabling as many people as possible to use Web sites, including people with disabilities. For many people, technology makes things easier. For people with disabilities, technology often makes things possible in the first place. 

Mozilla has a long history of driving and championing accessibility across the Web. Last year, 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. 

Screenshot of the mozilla.org website with the Accessibility Inspector turned on

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 colour contrast checker that checks for all three types of colour contrast issues identified by the Web Content Accessibility Guidelines 2.1.Screenshot of the colour contrast checker
    • Colour Vision Deficiency Simulator: Firefox now comes with a new tool that simulates seven types of colour vision deficiencies (also known as colour 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 coloured something without providing an alternative, so that it can’t be perceived by a colour blind user.

Screenshot of the Colour Vision Deficiency Simulator

 

  • 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 colour 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 recognised 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: