Blind web devs, jump on the Firebug train!

Late yesterday, Firebug 1.4 was released. Firebug is the web development and debugging tool for Firefox, with a huge user base worldwide.

As JJB mentions in his post, UI accessibility was provided for many of the Firebug features by Hans Hillen of the Paciello Group. The Mozilla Foundation funded the first of this work, and the Mozilla Corporation is now continuing funding to finish the remaining UI pieces like the “Net” panel, fix remaining issues, and also to work with the University of Illinois to develop Firebug features that will help web developers check their sites and applications for accessibility and fix issues in that area.

I am not going to iterate over the features one by one, since the documentation on the accessibility features is very comprehensive. I urge all developers wanting to utilize these features to RTFM (read the fantastic manual) in its entirety before starting to use accessible Firebug.

Once you are up and running with it, you’ll find that all of the described features work as advertised in the documentation. And even more: The documentation currently still states that the script panel’s source code viewer cannot be read with NVDA. However, Hans, Jamie from the NVDA team, and I managed to fix that problem shortly before beta 1 of Firebug 1.4. I notified Hans to update the documentation.

Compared to Firebug 1.3, Firebug 1.4 offers a wealth of accessible web development tools. Firebug 1.3 was effectively not accessible, Firebug 1.4 is, with a few small exceptions, fully accessible, which is an almost 100% leap forward within a single version number increment!

This opens up whole new opportunities for blind developers. To my knowledge, the development tools offered by the Redmond browser do not offer this wealth of features. In testing I did while fixing my example form to also work in IE 8, I found the tools to be unreliable and shaky in many areas. Firefox 3.5 and Firebug 1.4, on the other hand, together with NVDA, which currently best supports the former, are a vehicle to open up new job opportunities! With Firebug, a blind person has full control over the styling and layout of a web application or page. For example, taking my example form from the Easy ARIA Tip #3, and looking at the label and input elements for the “name” entry, I can immediately be told that the label is to the left of the input, and how many pixels there are between the two. I can make sure they’re visually at the same height. The box model of the Layout sidepanel of the Firebug HTML panel is fully accessible and gives me a feel for a page I’ve never had before!

Communication of search results within the HTML panel, or when encountering a breakpoint, is just awesome! Being able to inspect the DOM or a single element’s properties, being able to in-line edit properties and immediately be able to test the effect a certain ARIA attribute might have on your screen reader output is just productivety at its best!

What Hans accomplished here is done almost entirely through WAI-ARIA, and by implementing very intelligent keyboard navigation mechanisms. Through ARIA, such widgets as the log rows for the console, when you enter something such as document;, or dir();, are pushing the boundaries of known desktop widgets. The fact that tabs have popup menus attached to them is being communicated to the user by NVDA straight away, thanks to a very open and flexible architecture that does not assume certain facts about traditional static desktop widgetry such as “tabs never have menus attached to them”. The pure visual box representation of the Layout side panel of the HTML panel is another great example. This even blew David Bolter away when I showed it to him during the Mozilla all-hands in late April, and David is a long-standing and accomplished a11y guru!

Implementing some of these features in desktop applications usually requires very customized implementations of the platform’s accessibility APIs. ARIA, however, is so open and flexible that it can be easily applied to make such visually complex tools like Firebug accessible without ever touching the Mozilla core codebase. Firebug is a mix of XUL (the Mozilla UI language) and HTML+CSS.

So, Victor Tsaran of Yahoo! is already firebugging, and so am I. When are you?

flattr this!

This entry was posted in Accessibility, ARIA, Extensions, Firefox. Bookmark the permalink.
Skip to top

Comments

17 Responses to Blind web devs, jump on the Firebug train!

  1. Pingback: planetmozilla (Planet Mozilla)

  2. Pingback: Getfirebug Blog » Blog Archive » Firebug 1.4.0 Accessibility Features

  3. Pingback: phyl3005 (Phyllis Shelton)

  4. Pingback: webaxe (Web Axe)

  5. Pingback: ahiggi (adrian higginbotham)

  6. Pingback: mpaciello (Mike Paciello)

  7. Pingback: mpaciello (Mike Paciello)

  8. Pingback: SteveALee (SteveALee)

  9. Pingback: webstandardsmag (Webstandards-Magazin)

  10. Pingback: dynamitter (dynamis)

  11. Awesome. I’ve been using the beta versions of Firebug 1.4, so I already have it installed.

  12. Pingback: Firebug 1.4 trás desenvolvimento web Acessível | megaTTS

  13. Pingback: Firebug 1.4 trás Desenvolvimento Web para os Cegos « OutputStream

  14. Pingback: Recent happenings in accessibility-related projects financially supported by Mozilla « Marco’s accessibility blog

  15. Pingback: Recent happenings in accessibility-related projects financially supported by Mozilla « AccessTech News

  16. Pingback: Recent happenings in accessibility-related projects financially supported by Mozilla « The BAT Channel

  17. I just started FireBugging!
    Got the 1.7B1 for FireFox 4 and the 1.6.2 for FireFox 3.6. 16.
    BTW, both FireFox releases ARE totally PORTABLE!
    And so is NVDA, my prefered screen reader for FireFox!
    Um, NVDA, have i told you lately that you really do kick the ass of Jaws for Windows in almost every area, lol?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>