{"id":2189,"date":"2019-10-29T09:16:15","date_gmt":"2019-10-29T09:16:15","guid":{"rendered":"http:\/\/blog.mozilla.org\/press-uk\/?p=2189"},"modified":"2019-10-29T09:16:15","modified_gmt":"2019-10-29T09:16:15","slug":"mozillas-accessibility-inspector-helps-developers-to-make-websites-and-content-accessible-for-all","status":"publish","type":"post","link":"https:\/\/blog.mozilla.org\/press-uk\/2019\/10\/29\/mozillas-accessibility-inspector-helps-developers-to-make-websites-and-content-accessible-for-all\/","title":{"rendered":"Mozilla\u2019s Accessibility Inspector helps developers to make websites and content accessible for all"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">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.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Mozilla has a long history of driving and championing accessibility across the Web. Last year, we were glad to see that\u00a0 the <\/span><a href=\"https:\/\/eur-lex.europa.eu\/legal-content\/EN\/TXT\/?uri=CELEX%3A32016L2102\"><span style=\"font-weight: 400;\">EU Directive on the Accessibility of Public Sector Websites and Mobile Applications<\/span><\/a><span style=\"font-weight: 400;\"> &#8211; as part of the <\/span><a href=\"https:\/\/ec.europa.eu\/social\/main.jsp?catId=1202\"><span style=\"font-weight: 400;\">European Accessibility Act<\/span><\/a><span style=\"font-weight: 400;\"> &#8211; 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 <\/span><a href=\"https:\/\/www.w3.org\/WAI\/\"><span style=\"font-weight: 400;\">W3C\u2019s Web Accessibility Initiative WAI<\/span><\/a><span style=\"font-weight: 400;\">. This has to happen gradually, but not later than September 2020 for websites and June 2021 for apps.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">We are committed to supporting developers in making content accessible, no matter an individual&#8217;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 <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Accessibility_inspector\"><span style=\"font-weight: 400;\">Accessibility Inspector<\/span><\/a><span style=\"font-weight: 400;\">, which allows website owners and developers to test the level of accessibility of their websites and fix the most common issues.\u00a0<\/span><\/p>\n<p><a href=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility2.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-2191 size-full\" src=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility2.png\" alt=\"Screenshot of the mozilla.org website with the Accessibility Inspector turned on\" width=\"2768\" height=\"1724\" srcset=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility2.png 2768w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility2-300x187.png 300w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility2-768x478.png 768w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility2-600x374.png 600w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility2-1000x623.png 1000w\" sizes=\"(max-width: 2768px) 100vw, 2768px\" \/><\/a><\/p>\n<p><span style=\"font-weight: 400;\">With the release of <\/span><a href=\"https:\/\/blog.mozilla.org\/press-uk\/2019\/10\/22\/latest-firefox-brings-privacy-protections-front-and-centre-letting-you-track-the-trackers\/\"><span style=\"font-weight: 400;\">Firefox 70<\/span><\/a><span style=\"font-weight: 400;\">, we have added several new features that are now available in the Firefox Developer Tools. Here is an overview of the most important tools:\u00a0<\/span><\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li style=\"font-weight: 400;\"><b>Check for Keyboard issues:<\/b><span style=\"font-weight: 400;\"> 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.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Contrast:<\/b><span style=\"font-weight: 400;\"> 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.<\/span><span style=\"font-weight: 400;\"><a href=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility4.png\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-2192 size-full\" src=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility4.png\" alt=\"Screenshot of the colour contrast checker\" width=\"600\" height=\"237\" srcset=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility4.png 600w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility4-300x119.png 300w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/><\/a><\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Colour Vision Deficiency Simulator: <span style=\"font-weight: 400;\">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\u2019t be perceived by a colour blind user.<\/span><\/b><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><a href=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility.png\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-2190 size-full\" src=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility.png\" alt=\"Screenshot of the Colour Vision Deficiency Simulator\" width=\"1338\" height=\"652\" srcset=\"https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility.png 1338w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility-300x146.png 300w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility-768x374.png 768w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility-600x292.png 600w, https:\/\/blog.mozilla.org\/press-uk\/files\/2019\/10\/accessibility-1000x487.png 1000w\" sizes=\"(max-width: 1338px) 100vw, 1338px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li><b>Accessibility Picker: <\/b><span style=\"font-weight: 400;\">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.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Read more about the <a href=\"https:\/\/hacks.mozilla.org\/2019\/10\/auditing-for-accessibility-problems-with-firefox-developer-tools\/\">Accessibility Inspector\u2019s latest tools<\/a> on the Mozilla Hacks Blog <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Accessibility Inspector is available by default since Firefox 63 and has been continuously developed since.\u00a0<\/span><\/p>\n<p><b>About Mozilla\u2019s A11y community:\u00a0<\/b><\/p>\n<p><span style=\"font-weight: 400;\">While the Web is fundamentally designed to work for all people, we all need to make sure we don\u2019t 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.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">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 &#8211; and support of &#8211; assistive technologies.<\/span><\/p>\n<p><b>Useful Links:<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Hacks: <a href=\"https:\/\/hacks.mozilla.org\/2019\/10\/auditing-for-accessibility-problems-with-firefox-developer-tools\/\">Auditing For Accessibility Problems\u00a0<\/a><\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">MDN: <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Tools\/Accessibility_inspector\"><span style=\"font-weight: 400;\">Accessibility Inspector<\/span><\/a><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">MDN: <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Understanding_WCAG\"><span style=\"font-weight: 400;\">Understanding the Web Content Accessibility Guidelines<\/span><\/a><span style=\"font-weight: 400;\">\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">\u201c<\/span><a href=\"https:\/\/www.youtube.com\/watch?v=DhSpU_IJuR0\"><span style=\"font-weight: 400;\">Auditing for Accessibility\u201d presentation<\/span><\/a><span style=\"font-weight: 400;\"> at Inclusive Design 24 (YouTube video, 10.10.2019, 40 minutes), Marco Zehe, Senior Accessibility QA Engineer &amp; Evangelist, Mozilla<\/span><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <a class=\"go\" href=\"https:\/\/blog.mozilla.org\/press-uk\/2019\/10\/29\/mozillas-accessibility-inspector-helps-developers-to-make-websites-and-content-accessible-for-all\/\">Read more<\/a><\/p>\n","protected":false},"author":1679,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[121],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/posts\/2189"}],"collection":[{"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/users\/1679"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/comments?post=2189"}],"version-history":[{"count":0,"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/posts\/2189\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/media?parent=2189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/categories?post=2189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.mozilla.org\/press-uk\/wp-json\/wp\/v2\/tags?post=2189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}