16 thoughts on “Understand Website Accessibility with the Firefox Accessibility Inspector

  1. Ardalan Delir Post author

    Prefect thank you for sharing great ideas and techniques

    Reply
  2. Игорь Олейник Post author

    Thank you! Keep going! Firefox Dev Tools is the best! 🙂

    Reply
  3. Savvas Stephanides Post author

    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
  4. SLE 6 Post author

    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
  5. John Brennan Post author

    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
  6. Wray Bowling Post author

    Scavenger hunt
    1. Find Jen spell G R A F H I C
    2. Now you've watched it twice because you should

    Reply
  7. Enmanuel de la Nuez Post author

    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
  8. Pete Nelson Post author

    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
  9. CM Harrington Post author

    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
  10. TheFake VIP Post author

    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
  11. David Luhr Post author

    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
  12. Andrea Candian Post author

    Love Jen videos!
    And I'd love a serie of videos with tips and tricks to make accessible websites too!!

    Reply
  13. Peter Mitchell Post author

    Anyone know why Thunderbird has started loading Explorer as my default website? I have changed it in the menu back to Duckduck Go but it still loads Internet Explorer.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *