Using Firebug with Jaws to analyze webpages

What is Firebug?

Firebug is a Firefox add-on for inspecting webpage code (html, css, Javascript and events). While it is not fully accessible, it is the most accessible code inspector tool that I know of, especially if you know a few tips and tricks. With Firebug you can navigate the webpage’s DOM tree, select and modify html elements and attributes, and see the CSS that is applied to an element in the DOM tree. The DOM tree is keyboard accessible and works fairly well with screen readers, though not all of the context menu items do. Any changes you make in the DOM tree are immediately available in the Firefox window, allowing you to experiment with HTML and CSS changes and develop solutions to accessibility problems.

Where can I find Firebug?

Firebug can be downloaded from the firefox addins page. If you click the “Add to Firefox” link, Firefox will then alert you that the Mozilla Add On site wants to install an add on. Press ALT-I to install Firebug. You will receive another message that the installation is successful.

Notes on Firebug and screen readers

Firebug works best with Jaws. With Jaws you can simulate a right click on any element on the webpage (JawsKey-9), select “inspect element with Firebug” and then the focus lands on or near the HTML DOM tree with the element you selected already open . With NVDA you have to go to the root of the DOM tree and then find your way to the current element, a process that can be difficult and slow on large webpages.

Using Firebug to explore a webpage

These instructions are optimized for Jaws, but most instructions also work well for NVDA. You should be running Firefox with the webpage you wish to analyze loaded. You can be located anywhere on the page. Make sure you are in browse mode when the process starts.
,h2>Getting to the Document Structure Treeview for the current element

  1. With virtual focus on the element you wish to inspect, press Jaws-key and 9 to bring up the right click menu (Jaws key is the insert key on desktop, and capslock key on laptop keyboard layout). You can navigate to this element in Jaws off-screen model using arrow keys, it does not have to be focusable and you don’t have to navigate to it via the tab key. Note: This is the one step I have not been able to reproduce using NVDA.
  2. Press arrow up once. You should hear the option “inspect element with Firebug”. Press enter to activate the option. You should hear the screen reader announce “Firebug” followed by the title of the webpage.
  3. Unfortunately the initial focus does not always end up on the same spot within Firebug. Usually it lands on the “html tab”.
    If you press the tab key you should hear things like:
    • Firebug search.
    • Minimize Firebug button.
    • HTML panel tools tool bar, followed by one of the page elements. At this point the screen reader should go into forms mode, which is what we want.
    • HTML panel; and finally
    • Document structure tree view.
    This is where we wanted to go.
    The element that has focus in the tree should be the same element you started out with in the browser where you did the right click.

Notes:

  1. Sometimes, if Jaws does not go into forms mode in Firebug, you have to turn the screen reader keyboard intercept off to get to the DOM tree. In Jaws you press Jaws key and z to do that, then navigate to the tree using tab.
  2. On some pages, particularly pages with animation, you may not end up on the element you started out with on the page.
  3. If you use NVDA you cannot initiate the right click menu from the webpage (see step 1), You have to open Firebug separately, then find the tree root (usually the html element itself) and then explore the tree until you find the node you are interested in. This can be complex and time consuming.

Working with the Document Structure treeview:

Your screen reader should be in forms or application mode to interact with the document structure treeview. When you focus on this tree you should hear an announcement along the lines of: “Document structure treeview” followed by the element your focus is on and the word “open” or “closed”. If you are on a list item, for instance, you should hear: ”

 

Keyboard shortcuts for Exploring the tre

  • arrow right opens a tree node
  • arrow left closes a tree node
  • arrow up moves to the previous node (if you are inside a node you will move to its parent node, if not you will move to its sibling in the DOM tree).
  • arrow down will go to next node (if the node is open and the next element is a child of the current node, you will go to the child, else you will go to its next sibling).

When you go to a parent or child, the screen reader should announce a level change. The level refers to the nesting level of the element within the DOM (the html element itself is level 1).
Imagine we are on a li item at level 8, and it is closed. We can do a few things: If you press arrow down you will go to the next li element, if there is one. You will hear the word “li closed” announced. If you want to explore the contents of the current li node, you press arrow right to open it. You will hear the word “open”. Then you press arrow down. The screen reader should announce a level change (should say “level 9”) and then it reads the element that is the child of the li. If you go back up from that node using arrow up, the screen reader should announce “level 8” again.
When you explore the DOM tree, you should keep in mind that the screen reader will not read the text content inside the element. For example, if you are on a div that contains only text, it will read “div” and nothing else. To see the text content of the div you must copy it from the tree into a text editor (see next section).

Working with the document structure treeview’s context menu

Starting point: You are in the document structure treeview with focus on a node.
You can bring up its context menu using the standard operating system keyboard shortcuts. on Windows you press shift-f10 or the application key.
The first menu option is “copy html”. If you activate this option, the node and all its child contents will be copied to the clipboard. You can paste the code into your favorite text editor and have your way with it there.
The next menu option is “copy inner html”. This does the same as “copy html” except it only copies the descendants of the current node, not the node itself.
The 3rd and 4th menu options are “copy XPath” and “copy inner XPath”. These options can be extremely useful if you need to supply the xPath or CSS selector to a different inspection tool, e.g. a tool that takes a screen shot or an accessibility testing tool that enables you to define a scope on the webpage you wish to analyze.
Sometimes there is a 5th option, copy CSS path. I am not sure how it differs from the XPath options. I usually go with the xPath.
The 5th (or 6th) option in the menu is “paste html”. If you copied html into your text editor earlier (see the first option), you can paste it back into the document tree. You will then see any changes you made live in the Firefox browser window until you refresh the page. This option has a submenu that allows you to paste html or replace the node. The “replace node” option matches the “copy html” option in step 1.
There are other options in the Firebug context menu. The only option I have used is “create new attribute”. To take advantage you have to:
• Activate it by pressing the enter key. the edit field for the attribute will appear, even if it is not announced by the screen reader.
• Type in the name of the attribute you want to use, e.g. aria-label.
• Press tab to get to the next field. This field should be announced as “value”.
• Type the attribute value. e.g. “foo”. If you want to add multiple attributes you can keep tabbing and alternately enter attribute name and attribute value.
• When you are done, press the enter key. Your focus should go back to the DOM tree and the new attributes should be visible in the Firefox window (until you refresh the page).

Exploring the CSS applied to current node

Starting point: In the Document structure treeview with focus on the node you are interested in.
To explore the CSS applied to the current element in the DOM tree you need to navigate from there to the style panel. You can magically do this by pressing tab thrice:
• On the first tab press you should hear: “Firebug side panels tab, style tab selected”.
• On the second tab press you should hear: “Style panel”.
• The third tab will take you where you want to go. You should hear something along the lines of “style listbox read only”.
Here you can use the arrow keys up and down to explore the CSS properties of the current node. This is the node that is selected in the document structure treeview. You can also use the context menu to manipulate the CSS.
Sometimes the CSS panel is not visible. If you find a button called something along the lines of “toggle visibility of side panels” button, try activating it. The CSS panel should show up, and the focus order should be as described above.

Author: Birkir Gunnarsson

Approaching 40 (at the time of this writing), blind since age 5. Born and bread in Iceland. Grew up in Iceland, came to the U.S. to attend Yale University. Spent 7 years in the Banking sector as a developer, where I grew out more than growing up. Started working in assistive technology and accessibility in 2009. I have dabbled in all things accessibility, from creating braille standards, to conducting website, PDF and mobile application assessments, delivering user and developer training, and campaigning for Icelandic and European accessibility policies and regulations. Started a full-time position with Deque Systems in 2013 where I have worked on all things accessibility with some of Deque's clients, many of them Fortune 500 companies. A member of W3C ARIA/ARIA Authoring Practices working groups since 2014. I am married, have 3 kids, love listening to good music and making questionable music in my spare time (which barely exists). See my extended BATS bio for a lot more information.

1 thought on “Using Firebug with Jaws to analyze webpages”

  1. Why don’t you also include a screen-cast while performing this as an example and host it on YouTube, so that others can actually watch this in action?

Leave a Reply