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, Mozilla 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.
Mozilla 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.
The Accessibility Inspector is available by default since Firefox 63 and has been continuously developed since.
Read more about the Accessibility Inspector’s latest tools on the Mozilla Hacks Blog.
