HomeArticlesUnderstand Website Accessibility with the Firefox Accessibility Inspector Understand Website Accessibility with the Firefox Accessibility Inspector By Juan Cameron November 15, 2019 Articles, Blog 15 Comments Tags:a11y, accessibility, Accessibility Inspector, accessibility tools, code, css, firefox, front end development, html, Mozilla, mozilla developer, wcag, web design Related Posts How to Stop Being a People Pleaser Adobe Illustrator Training – Class 1 – Selection Tool Urdu / Hindi Working a remote job from home – Q&A About Author admin 15 Comments Ardalan Delir November 11, 2019 Prefect thank you for sharing great ideas and techniques Reply Игорь Олейник November 11, 2019 Thank you! Keep going! Firefox Dev Tools is the best! 🙂 Reply Savvas Stephanides November 11, 2019 The Accessibility tab is one of the reasons I'm switching to Firefox when developing (along with the other DevTools). The only thing worth mentioning (and it may be due to my own ignorance) is that I find it rather hard to navigate a website using a keyboard (when testing with VoiceOver on a Mac). Using the Tab button doesn't seem to work just as it does with Chrome or Safari. Reply SLE 6 November 11, 2019 Great video, and I know this wasn't really the main point of it, but will most screen readers end up reading the letters one by one? I only have NVDA to test with, but the last time I tried researching what others do, it seemed like VoiceOver on iOS was the only one to do that (or perhaps the only one I found online complaints about). Reply John Brennan November 11, 2019 This is amazing, another great video Jen. I would love to see more videos going in more depth about the tool. I would love to get a better understanding what kind of things I should look out for in order to make a site accessible. I'm trying to make the applications I'm working on more accessible by using keyboard navigation. Some more heuristics of what good practice is vs. bad practice would be incredibly beneficial. Reply Wray Bowling November 11, 2019 Scavenger hunt1. Find Jen spell G R A F H I C2. Now you've watched it twice because you should Reply Enmanuel de la Nuez November 11, 2019 Thank you for another great video Jen! This a great tool for us to do our jobs properly and make our sites accessible. Firefox dev tools are incredible. Reply A Kandy November 11, 2019 Great video! As usual! THANK YOU! Reply Pete Nelson November 11, 2019 If you add an aria-label to the h tag, it should automatically ignore the body for the screen reader, so no need to put aria-hidden on the children. Reply CM Harrington November 11, 2019 I've already made use of the Accessibility Inspector, and it's REALLY helpful!! I thought it had the capability to show colour contrast ratios 'on the fly' as I was picking a colour, but it seems it doesn't yet do that? It's also entirely possible that was in some dream I had (but would be amazingly useful, so I don't have to do trial and error). Reply TheFake VIP November 11, 2019 As a blind web developer, programmer and open source, not to mention huge Firefox enthusiast, I'm so glad Mozilla has taken the time to implement these kinds of tools. Aria and other web accessibility mechanisms aren't always the easiest things to wrap your brain around, even for me, who can do then-and-there testing with an actual screen reader, but to the web developers out there who feel like giving up on them, I just want all of you to know that a nice and accessible experience is a very highly appreciated one. Reply David Luhr November 11, 2019 Love the new accessibility tools! One thought regarding the actual accessibility improvement: I might recommend changing the `<h1>` to `<div aria-hidden="true">`, and then providing a visually-hidden `<h1 id="heading">` that contains the properly formatted text. From here, adding `aria-labelledby="heading"` to `<header>` would retain an actual heading for screen readers to land on, while also allowing this content to be translated as needed (`aria-label` attribute values cannot be translated). Just some initial thoughts, but it's fantastic to have such great tools in Firefox for us to start diagnosing areas of opportunity to make our websites more accessible. Reply Matt Doane November 11, 2019 What's that simulate option? Not seeing that in mine. Reply Jonathan Cousins November 12, 2019 Thanks for highlighting this Jen! Reply Andrea Candian November 13, 2019 Love Jen videos!And I'd love a serie of videos with tips and tricks to make accessible websites too!! Reply Add a Comment Cancel reply Your email address will not be published. Required fields are marked *Comment:*Name:* Email Address:* Save my name, email, and website in this browser for the next time I comment.