Accessibility

From FirebugWiki

Revision as of 06:53, 8 December 2009 by Hhillen (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

Accessibility Enhancements in Firebug 1.4

This document contains an overview of the accessibility related changes that have been applied to Firebug 1.4. To make sure you have the latest version, use the addon update feature in Firefox. If you have bugs or suggestions, you can email these to hhillen@paciellogroup.com if you are having problems using the the Firebug issues list.


Enabling Accessibility Changes

Firebug's accessibility enhancements will not be enabled by default when Firebug is installed. This choice has been made because some of the enhancement will alter Firebug's behavior in ways that may be unexpected or undesirable by current Firebug users.

To enable the accessibility enhancements, go to Tools > Firebug > Options > Enable Accessibility Enhancements in the main Firefox menu, and ensure this menu item is checked. After enabling this feature, changes to the main Firebug interface (such as the toolbars and tab lists) will be applied immediately. Changes to the content in Firebug's panels will be enabled when you reload the current web page or open a new one. To disable the accessibility enhancements, simply uncheck the menu item described above.

Which Technology to Use

Firebug 1.4 requires Firefox 3.0 or higher. However, screen reader users will have to use Firefox 3.5, as the accessibility enhancements make heavy use of the 'aria-label' attribute, which is not supported by Firefox 3.0.*.

The freely available NVDA screen reader currently has the best support for accessible Firebug. The latest versions of JAWS 10 and WindowEyes 7.1 have decent support, but often leave out information.

Key Binding Mechanism

Some of the common Firebug shortcuts (such as F12 for opening and closing the Firebug window), can now be modified by the user. This feature can help when the default Firebug shortcuts cause a conflict with your Firefox extensions, keyboard layout or assistive technology. To open the key binding dialog window, go to Tools > Firebug > Customize Shortcuts in the Firefox menu.

Note: Unless mentioned otherwise, all shortcuts described in this document refer to the default key binding settings. It should also be noted that the key binding mechanism is always active, regardless of whether the accessibility enhancements are enabled or not.

The Firebug Shortcut Bindings dialog contains a list of common Firebug features. Each feature is followed by a textfield, in which the shortcut can be entered. To enter a new shortcut for a feature, perform the following steps:

  1. Move focus to the textfield by clicking on it or tabbing to it.
  2. Press the keys for your desired shortcut. This would most likely be a combination of modifier keys (such as Alt, Ctrl, Shift or Command) and another key. An example of a suitable shortcut would be: Ctrl + Shift + D.
  3. The shortcut will appear in the text field. You can now do one of the following:
    • Press the Enter key, which will close the shortcut bindings dialog and give you the option to save the change.
    • Edit additional shortcuts by following the same steps mentioned above.
    • Reset the shortcut using the Reset button following the shortcut text field.
    • Press the Escape key to close the dialog window without saving any changes.

When you are done customizing shortcuts, either press Enter or click the 'OK' button at the bottom of the dialog window. A prompt will appear which asks you if you want to save the changes.

Note: Changes to keyboard shortcuts will only take effect after Firefox restarts. Also, certain shortcuts may not work properly, due to conflicts with existing shortcuts in Firefox or other installed products. Make sure you test your chosen shortcut after restarting Firefox to see if it works. If it doesn't, reset the shortcut or choose a different one.

Navigating the Firebug Interface

To start using Firebug, press F12 to open the Firebug window at the bottom of the main Firefox window, or Ctrl + F12 to open it in a separate window. To close it, press F12 again (or close the separate window like a regular Firefox window ).

The Firebug Tab Order

For keyboard and screen reader users, Firebug's interface is mostly accessible through the default tab order. This tab order starts immediately after the tab order of the web page currently loaded in your Firefox tab. So you can tab into Firebug by tabbing out of the web page.

Note: There are different ways to reach the Firebug window that are much more efficient than tabbing through the web page first. These other methods will be described in the #Accessing the Firebug Window section.

The Firebug tab order consists of the following tab stops:

  1. 'Firebug Tools' toolbar. This toolbar currently consists of three buttons:
    • 'Firebug Options': A menu that contains common Firebug preferences and features.
    • 'Inspect Page' : Allows you to click on a page and inspect it.
    • 'Break on next function call': Automatically triggers a breakpoint when a function is called.
  2. Currently selected tab in the 'Firebug Panels' tab list
  3. 'Firefox search' textfield
  4. 'Firebug window' toolbar. This toolbar contains buttons to minimize, close and detach the Firebug window.
  5. 'Panel tools' toolbar. Depending on which Firebug panel is currently opened, this toolbar contains panel specific buttons.
  6. Panel content. This tab stop depends on which panel is currently opened. In most panels, there is only one tab stop for each panel.
  7. Currently selected tab in 'Firebug Side panels' tab list.Note: This tab stop only exists for panels that actually have side panels.
  8. Side panel content, again, sidebar panels have only one tab stop, which is only present when the main panel actually has a side panel.
  9. Firebug Status. This is an icon in the Firefox status bar. It provides a summary of Firebug's current state (such as which panels are enabled, and whether errors have occurred). Additional options are available through this option's context menu.

Navigating Firebug Toolbars

Some tab stops in Firebug's tab order are toolbars. These can be navigated the following way:

  • When tabbing into a toolbar, focus is always placed on the first button in that toolbar.
  • To navigate the individual buttons in a toolbar, use the left and right arrow keys. When you have reached the last button in the toolbar, focus will remain on that button when using the arrow keys. In other words: focus can't 'spill out' of the toolbar as it does with other Firefox toolbars.
  • To press buttons in a toolbar , press the Space key.
  • To open a menu type button in a toolbar, press the down arrow key.
  • To tab out of a toolbar press Tab or Shift Tab.

Notes:

  • At the time of writing, NVDA is the only screen reader that announces the toolbar names. Other screen readers only announce the names of the buttons inside the toolbar.
  • NVDA is also the only screen reader that announces the total number of buttons and the index number of the currently focused button. However, it seems that a bug in Firefox causes the elements marked as separators to also be counted towards the total, leading to incorrect numbers.

Using Panels and Tabs

To open a panel, you have to select its tab. There are different ways to switch between Firebug tabs (and their corresponding panels):

  • Clicking on a tab.
  • Tabbing into the panel tab list (or clicking on a tab twice) will move focus to that tab (it will receive a visual highlight and underlined text). You can now use the left and right arrow keys to move to through the tab list, selecting each tab and opening their panel as the tab receives focus. When you've reached the last tab, focus will wrap to the first one (and vice versa).
  • From anywhere in Firefox you can use the global panel switching shortcuts:
    • Ctrl + Shift + PgDn selects the tab to the left
    • Ctrl + Shift + PgUn selects the tab to the right
  • In some cases, Firebug will automatically switch to a panel itself (for example: the script panel automatically opens when a breakpoint has been triggered).

Using Tab Menus

Most panels in Firebug have a drop down menu inside them, which contains panel specific options. You can access this menu by doing one of the following:

  • Click on the drop down arrow icon in the tab.
  • Move focus to the tab, and press the down arrow key.
Notes:
  • At the time of writing, NVDA is the only browser that indicates that the tabs have a drop down menu attached. With other screen readers you'll just have to know that they're there.
  • A very important option for the Console, Script and Net panels is whether that panel should be activated or not. If you don't enable a specific panel, you will not be able to use that panel's accessibility enhancements. To enable those panels, open their tab menu and ensure that the 'enable' radio menu item is checked.

Using Context Menus

Most interactive objects in the Firebug interface have context menus. These menus provide a set of available actions for the currently focused element, both in the Firebug toolbars and the Panels themselves. Quite often crucial Firebug actions are only available through a context menu, so often it can help to try and open one when you've focused a particular object. through this documentation context menus will be mentioned where relevant. To open a context menu without using a mouse, you can use your operating system's specific shortcut for opening context menus. In Microsoft Windows this is Shift + F10. Many keyboards also have a special key called the 'applications' key, usually place next to the Ctrl key or somewhere else on the bottom row. Pressing this key will act as a right mouse click and open a context menu for the currently focused element.

Note Mac users do not have a default shortcut to open a context menu for a focused element. However VoiceOver does.

Accessing the Firebug Window

As mentioned before, Firebug is part of Firefox's standard tab order. In most cases however, you'll want to be able to access Firebug in a more speedy and efficient way. Two useful shortcuts for this are:

  • Ctrl + Shift + K will move focus to the Firebug Search textbox. from here you can tab into the panel content (press tab three times.
  • Ctrl + Shift + L Automatically opens the Console panel and moves focus to the Console Command line.

Note: In JAWS and WindowEyes, these shortcuts are already used for screen reader specific features. You will have to change the Firebug Shortcut Binding dialog to change the shortcuts to something else if you want to use them. In NVDA the shortcuts still work.

Another method to quickly reach the Firebug window is to move focus to Firefox's address bar (e.g. by using Alt + D), and then pressing Shift + Tab twice. This will wrap focus to the bottom of the Firefox window, where the Firebug Status bar icon will be the last tab stop of the Firebug tab order. Press Shift + Tab again to tab backwards into Firebug.

Loss of Focus

Although measure have been take to prevent it, you are likely to encounter loss of focus sooner or later. In most cases this has to do with Firebug refreshing its interface or the currently focused element being deleted. Losing focus can be a confusing experience for keyboard and screen reader users. When you find yourself unclear about where your focus is currently located, you can use the two shortcuts mentioned above to find your bearings again.

In some cases it can happen that the tab stop in the panel itself is destroyed, making it impossible to move into the panel without using a mouse. When this happens, try to press the Tab or Shift-Tab key a few times. Whenever you tab through the interface, Firebug checks to see if a tab stop currently exists in the opened panel. If it doesn't, it will try to recreate a default tab stop (usually the first focusable element in the panel).

Note: When you're using the global shortcuts for switching Firebug tabs, you are likely to lose focus in Firebug.

Using Panels in Firebug

Firebug's interface consist mainly of panels, which can be selected through the Panels tablist. To access a panel using the keyboard, you have to tab into it. Once focus is inside the panel, its navigation depends on the panel you're in.

Firebug contains the following panels:

Additionally, it is possible to install additional Firebug extensions which may add additional panels. These panels may not be necessarily be accessible.

Panel Search

You can search the contents a panel by entering text into the search textfield in the Firebug toolbar. As mentioned before, you can quickly reach this input field by using the Ctrl + Shift + K shortcut. In Firebug, search is performed incrementally as you start typing in the search input field. This means you do not have to press a submit button to perform the search. With each character you enter or remove in the field the panel contents will be updated to display the found result(s). The type of results found, and how they are displayed depend on the panel in which you are searching. In some panels, a search will basically filter the contents of the panel so that only the content matching the search text is left visible. In other panels, one search result will be found at a time, and you can press the Enter key to move to the next match found. The panel specific sections in this document explain what to expect from each panel's search feature.

As search results are updated, screen reader users will hear a message describing what the result of the search was. For example, it wil announce where the next match was found, or that no results were found at all. The search will be performed incrementally as you start typing, As the results will be announced after each character, it is useful to stop typing at times to hear how many results are found for your current search text.

Note: Currently, the search feedback is exposed to assistive technology as an alert. This means that the screen reader will say 'Alert' in front of each message, every time a character is entered in the search box, and it will interrupt any echoing of the characters or words being typed in. I am aware that this kind of feedback is too disruptive than it should be. Ideally, polite live regions would be used here instead, but at the moment there are no screen readers that pick up these polite updates. In order to make the search usable for people with screen readers today, i have chosen to use alerts until the popular screen readers start supporting these updates.

Search Options

In some panels, the search field will have an additional option menu which allow you to change setting for the panel's search behavior. For example, some panels allow you to choose whether to perform a case sensitive search or not. Visually, these options will automatically pop up above the search box as it receives focus. To access the menu with the keyboard press either the up or down arrow key.

Note: You will have to press the arrow key twice: once to move keyboard focus to the menu, and once to actually select an item in the menu. Press Esc or select an item with Enter to move focus back to the search box.

Inline Editors

The inline editor is used in the HTML, Layout, CSS, DOM and Breakpoints panels. It is always used to modify an existing value or add a new one. Visually, an inline editor looks like an interactive textbox that is laid over the value you're trying to edit.

In most cases the editor fields have an auto complete feature. Usually the inline editor is started by either pressing the Enter key or by using the context menu, but the presence of an inline editor is not announced by screen readers in any way: You'll just have to know where it is available.

Often inline editors are used in groups. For example, in an HTML element the editable group would be all the attribute names and values that element has.

Once you start the inline editor (for example by pressing Enter on an HTML element or CSS rule) you switch to a different mode of navigation. This 'inline editing mode' works the following way:

  • The arrow keys are now used to move the caret inside the field you are currently editing, and you can type in your new value to change it.
  • The Tab and Shift Tab key is used to move to the next and previous editable field. For example, in an HTML element the first editable field could be the name of the 'id' attribute, which you can change to something else (for example 'class'), if you press tab, you'll move to the next editable field, which is the actual value of the attribute who's name you were just editing. This way you can go over all attribute names and values in an element and modify them one by one.
  • There are two very important caveats to using the tab key in an inline editor in Firebug:
    • When you have reached the last editable field in a group (e.g. the last attribute inside an HTML element ), you will tab into a newly created, empty editable field. You can use this field to add new properties that didn't exist before. If you don't want to do this, simple press Tab or Shift Tab again without entering a value, and the new editable field will disappear again..
    • Pressing tab from the last, empty field in a group (as described in the previous bullet) will move focus into the next editable group, if available. For example, If you tab beyond the last editable attribute in an HTML element, the next editable field will be the first attribute of the element following the current one. Which element that would be depends solely on which elements are currently expanded in the HTML tree. This behavior can be confusing to screen reader users, who should always make clear they understand which group they are currently editing. In most cases however, care has been taken to provide proper labeling or grouping that can help screen reader users to understand they just 'jumped' from one editable group to another.
  • To close an inline editor, use the Esc. button on your keyboard. However, doing that will cancel any change you made to the currently focused editor. To actually save the value, press Enter first. this will move focus ahead to the next editable field, after which you can press Esc to close the editing mode.

Note: In some cases, such as the HTML and CSS panels, if you have tabbed into a different group while using the inline editor, focus will be moved to the new group after you close the editor, not the group where you started it.

Panels Documentation

The following sections describe how each panel has been made moe accessible and how it should be used.

Console Panel

The console panel is one of Firebug's core features. It provides a command line which allows you to evaluate any JavaScript statement. You can use the panel to inspect elements and objects, log errors, and a lot more.

Generating Output in the Console Panel

The console panel consist of two parts: the output pane, and the command line below it. When the output pane is empty, the command line is the panel's only tab stop. Once you start evaluating commands, or events occur that add content to the output pane (such as JavaScript errors or warnings), the output pane will become the first tab stop. The command line will now be the second tab stop.

The content in the output pane is roughly divided into 'log rows', which are appended below each other as new output is added. When you enter a statement to the Console Command line, two log rows will usually be added:

  1. A copy of the statement you just added. Visually, you can recognize a 'statement' row when it starts with '>>>'. Screen readers will announce "command: >>>" in front of a statement row.
  2. An output row. which could be many things, such as a single value, a collection of values, an overview of all members in an object, or error details. Some rows indicate a certain result type. For example, a row can indicate an error, warning, or informational message. Visually this is indicated by an icon at the beginning of the row. Screen readers will announce the row type at the beginning, such as 'error:', 'warning:', etc.

The output pane itself is marked up as a live region. any output that is added should be automatically announced by the screen reader, without having to move focus to it. This is useful for basic output, but for output spanning multiple lines you will most likely want to navigate the output pane itself using the keyboard. In this case you can press Ctrl to silence your screen reader's announcement of the live region when output is added..

Note: At the moment, NVDA is the only screen reader that picks up this live region. JAWS and WindowEyes both ignore it.

Using the Large Command Line

Firebug Also has a larger multiline command line, which you can use to create multiple statements spanning more than one line. For example, you can create entire function blocks here.

You can open the large command line in two ways:

  • Paste a code snippet spanning multiple lines into the command line: Firebug will automatically switch to the large command line.
  • In the drop down menu of the Console's panel tab , check 'larger command line'. To move back to the regular command line, uncheck this item again.

Because the larger command line is a multiline input, simply using the enter key will move your caret to the next line, rather than submitting the statement to the panel. To submit your command, press Ctrl + Enter instead .

Note: remember that you can always quickly reach the command line (also the larger one) using the Ctrl + Shift + K shortcut.

Using Auto Complete

The Firebug Console command line has an auto complete feature which fires when you press the Tab key one or more times. To prevent conflicts with the tab order, this only happens when the command line contains actual characters (including whitespace). If the line is empty, you'll just tab out of the command line.

Navigating the Console Output

As more output is added, your log row list will increase. You can inspect the generated output in more detail by tabbing into the output pane. From the command line, you can do this by pressing Shift + Tab. When you tab into the output pane, there are two possible locations where you can end up:

  1. The last generated output row, at the bottom of the output pane.
  2. Your last focused location in the output pane, if you navigated through it earlier and the output hasn't changed since. If content has been added in the mean time, focus will be moved to the bottom of the list again.

Once focus is place on a log row in the output panel, it is visually highlighted and its contents are read out by the screen reader. from this point, you can use the vertical arrow keys to navigate around the output content:

  • The up and down arrow keys move focus to the row above and below the currently focused row.
  • Home and end move focus to the beginning and end of the output rows.
  • PgUp and PgDn move focus up and down by groups of 10 rows.

Quite often, log rows will have interactive elements inside of them which can either be activated, toggled, or have a context menu with additional options associated with them. To reach the individual elements inside a log row, you can use the horizontal arrow keys to move into the log row's contents:

  • The right arrow key will move to the first focusable element in the row (if present), then the next, and so on.
  • The left arrow key will move back to the previously focused element. If the first focusable element has already been reached, focus will move back to the entire log row.
  • Ctrl + right arrow key will directly take you to the last focusable element in the row, regardless of which interactive element inside the row is currently focused.
  • Ctrl + left arrow key will immediately select the entire row again, regardless of which interactive element inside the row is currently focused.

Basic Command Examples

To try the accessible console panel out, just enter some basic commands into the command line. For example, you can start with these examples, one at a time:

1 + 1;
Result: two log rows are added: one repeating the statement: ">>> 1 + 1", and one showing the result: "2". These rows are static and not interactive, so you can't use horizontal arrow keys here.
window;
Result: a link to the window object is added. If you move focus to the log row, you can use the right arrow key to move focus directly to the link. From here you can press enter to inspect this object in the DOM tab, or use the left arrow key to move focus back to the enter log row. Alternatively, you can use the up and down arrow keys to move to the rows above and below, if any.
document.links;
Result: An array of link objects in the current document is shown. Note that this only works if the currently opened web pages actually has links in it. Tab to the row, then use the right arrow keys to traverse the array. For each link object, you can either press enter to inspect the link in the HTML panel, or open a context menu with more options. For example, you can choose to copy the link's HTML or XPATH code, or have the element scrolled into view in the page.
thisisnotavalidjavascriptstatement;
Result: as this is not a valid statement, an error will occur: 'thisisnotavalidjavascriptstatement is not defined'. Tab to the row, and then use the right arrow key to move to the error object specifically. Click on it to inspect in the DOM tab
console.info("this is the %o object, the title is '%s' and this is the %o element", document, document.title, document.body);
A formatted string is shown, containing two interactive links: one to the document object, and one to the document's body element. Screen reader users can read the entire message my leaving focus on the log row itself, or inspect the two interactive parts by using the horizontal arrow keys.

Note: For a complete overview of available console methods, have a look at the Firebug Console API

The examples given above all provide a basic single row as result. There are additional commands that will provide a lot more quantity in the output panel. The following examples demonstrate these commands:

Console.dir()

A very powerful command provided by the console panel is the console.dir() command. You can enter this command with any object as a parameter, and Firebug will list all properties that object has as an interactive tree structure. The output created by a console.dir() statement is all placed inside a single log row, but since its results can be quite large (over hundreds of properties) there is an additional mechanism for navigating console.dir results:

  • Although visually the console.dir output tree looks like a tree table with two columns (the property's name and the property's value), it is navigated as a regular tree widget, where only the the right column (the property's value) receives focus.
  • The up and down arrow keys move focus to the next / previous property value, just like you would with regular log rows.
  • Ctrl + the up or down arrow keys allow you to immediately move out of the console.dir tree to the previous or next row. This will save you from having to move to the entire console.dir output before reach the adjacent log row.
  • The left and right arrow keys are used to open and collapse branches of properties that have members of their own. Left can also be used to quickly move to a parent branch , like in a regular tree widget.
  • Although only the property's value actually receives focus, screen reader users will hear both the property name and value, separated by a colon.
  • As with interactive objects inside log rows, interactive objects inside console.dir output can be clicked and often have a context menu.

Note: Screen readers will usually announce an object's type in parentheses following the object's value. Recognized types are: 'string', 'number', 'Boolean', 'object', 'element' and 'array'.

As example, try the following command:

console.dir(window)

This will list all properties defined for the window object. If you tab back into the console output, focus will start at the bottom of the dir tree. You can either use the arrow keys to move up the tree, or use Ctrl + up to move to the row above, and then down arrow to start at the top. Screen readers should announce which nodes are expanded or collapsed, and what their level in the tree is.

Additional Console Output Result Types

You can use the console.group('myGroupName') and console.groupEnd('myGroupName') commands to group a collection of log rows together. Use these commands multiple times to nest groups inside each other. At the top of each group will be a group header, which you can expand or collapse using the left and right arrow keys. This can help you to hide large sections of output when they are not needed, and also makes it easier to skip a large number of rows.When focused on a row inside a group body, you can quickly navigate to the group's header by pressing the Left arrow key.

Errors generated by a web page or by the console.assert() command often have a stack trace that can be expanded. To do this, navigate to the error's title row and use the Right arrow key to expand or the Left arrow key to collapse the stack trace. Each function call in the expanded stack trace can be navigated to with the vertical arrow keys. The horizontal arrow keys can be used to navigate focusable objects in in a stack item. These focusable objects are usually:

  • The actual name of the function,which links to its definition in the script panel.
  • Any objects used as function parameters, which can be inspected in the DOM pane.
  • A link to the associated line number in the script file.

For some errors, a 'break on this error' icon is available, which acts as a checkbox.

All these objects also have context menus that allow you to copy error details or view the object in the appropriate Firebug panel..

Console Panel Search

As you type into the search box, the output rows present in the console panel will be filtered so that only the ones containing your search term remain. Screen reader users will hear a message about how many rows containing the search term were found, or that no results were found.When your search is complete, simply tab into the panel to navigate the filtered rows. To restore all rows to their unfiltered form, delete the text from the search box.

HTML Panel

This panel shows the HTML structure of your web page as a navigable tree structure. You can navigate, this structure like any other tree widget: using the arrow keys. As you navigate the tree, Firebug will visually highlight your selected object in the page.

Note: The following node types of the HTML tree are currently not accessible. These nodes will be skipped in keyboard navigation and will not be announced by screen readers.

  • Whitespace nodes (which are disabled by default)
  • Comment nodes (which can still be edited by mouse users if they click on the comment text)
  • Embedded <script> tags. The script tag itself is accessible, but its contents (the actual lines of source code) will be skipped. To read this code, open the script tab and choose the HTML file from the files drop down selector in the toolbar. This will allow you to read through the script sections using a caret.
  • Embedded <style> tags containing CSS styles. The tag itself is accessible, but the styles are not. To read the styles in accessible form, go to the main CSS panel and choose the HTML file from the files drop down menu in the panel toolbar. This will show any CSS rules embedded in the document.

Additionally, there are some other things you can do with HTML elements in this panel:

  • Open a context menu to access options specific to the currently selected element. for example, you can copy the element's HTML code, delete it, or inspect it in the DOM panel.
  • As you move deeper into the HTML element tree, the Panel toolbar will show a list of buttons representing the path from the currently selected element back to the HTML root node. You can tab back into the panel toolbar, and then use the arrow keys to navigate this 'ancestry' path. Each button in the path can be clicked and has a context menu. For faster access, you can move up to the current element's parent node by using the shortcut Ctrl + .(period), similarly, you can move to the child nodes in the ancestry path by pressing Ctrl + ,(comma),
  • Use the element's inline editor to modify or add attribute names and values. The inline editor can be started by doing one of the following:
    • Clicking on an attribute name or value.
    • Choose 'add new attribute' from the element's number , this will start the editor after the last attribute in a blank field.
    • Press the space bar. If an element already has attributes defined, the inline editor will start at the name of the first attribute. If the element does not have any attributes, it behaves exactly like the 'add new attribute' option.
    • Press the enter key, this always behaves exactly like the 'add new attribute' option.
    • If an element is a text element (such as <p>, <h2> or <strong>, you can press F2 to edit the element's text contents.
  • For screen reader users, the inline editors will have special labels that should make it easier to understand what it is exactly you're editing:
    • The name always starts with: "inline editor:"
    • For attribute names: "Attribute for div element" where div is the tag name of the element currently being edited.
    • For attribute values: "value for 'class' attribute in 'div' element", where "class" is the attribute name defined in the previous editor, and 'div' is the tag name.
    • For text content: "text content for P element ", where "P" is the text element.
  • The editors in the HTML panel also expose to assistive technology how many editable fields there are in the current editable group (i.e. the element), and what the current field's index is. So when you tab through editable fields, the index should increase each time while you stay inside the editable group. When you hear it start counting at "1 of ..." again, you know that you have tabbed into a different editable group. Also note that at the end of the editable group, Firebug will always add a new, empty editable attribute. So the length the editable group will appear to be 1 item longer longer when you tab into the last field.

You can also just edit the complete code for the currently selected element in a textarea field, as if you were using a standard text editor. To start this form of editing, choose 'edit' in the HTML panel's toolbar or use the element's context menu. After making your editing changes, press the 'edit' button again to leave editing mode. Note: While in editing mode, you will not be able to tab beyond the HTML panel as the tab key will actually insert tab characters in the HTML code.

HTML Panel Search

When a result is found, Firebug will highlight the matched text in the HTML tree. Screen reader users will hear an update describing the match found. There are three types of matches that can be found:

  • The search string was found in a tag name, for example: Match found for 'spa' in SPAN element, at path html/body/div[4]/span.
  • The search string was found in an attribute name or value, for example: Match found for 'aria' in attribute aria-expanded='true' of div element at path html/body/div[2]/div.
  • The search string was found in the text contents of an element, for example Match found for 'welcome' in text content 'Welcome to our Website' of H1 element at path html/body/div/h1

As these examples show, the search results will include an XPATH string for the element in which the match was found, to give you a better indication of where the match is located.

If no match is found, the screen reader will say "No match found for <search string>".

After the first match is found, you can perform two actions:

  • Press Enter to search for the next occurrence of your search string
  • Press Ctrl + Enter to move focus to the matched element in the HTML tree

Note: Although multiple matches can be found (and looped through using the Enter key), screen readers will currently not provide information about how many matches there are in total, or whether Firebug has wrapped to the top of the HTML tree to start with the first match again. To know which match is currently being announced, listen to the information provided in the result's XPATH string,

HTML Inspect Feature

Instructions for the using the inspect feature will be added later,

HTML Side Panels

The HTML panels has three side panels: CSS, Layout, and DOM. These panels appear to the right of the HTML panel and can be accessed by tabbing from the HTML panel into the side panel tab list and the side panel contents.

Note: The contents of these side panels depend on which element is currently selected in the HTML panel.

CSS Side Panel:

This panel shows all the styles applicable for the element currently selected in the HTML panel. The styles are grouped the same way as they would be in a regular CSS style sheet, by rules. A CSS rule always starts with one or more selectors followed by zero or more property name-value pairs. You can navigate this panel in the following way:

  • The Up and down arrow keys move through the selectors and properties, one line at a time.
  • Ctrl + up and down arrow keys always move to start of the next or previous rule. This is useful for skipping lengthly, complex CSS rules.
  • The Home and End keys move to the beginning and end of the rules list

Each selector also contains a link to the style sheet in which it is defined, and it's line number. To quickly move to that line and file, use the selector line's context menu.

Styles can be temporarily disabled. To toggle a selected style press the Space key. For screen reader users, the style properties in a rule are exposed as a list box, where each property is an option that can is checked (i.e. enabled) by default, and unchecked (i.e. disabled) when you disable the style.

Styles can be overridden by other styles with higher specificity. visually, these styles will have a line struck through them. Screen readers will say 'overridden' at the beginning of such styles.

CSS properties can be edited by using the inline editor the same was as in the HTML panel. to start editing press the enter key or use the property's context menu. As in the HTML panel, you can tab through the available property names and values. And again, you can tab from one editable group (i.e. CSS rule body) into another. Screen reader users will announce the CSS selector in the editor as well, to make it easier to understand which property you're editing. As you type a property name, Firebug will automatically fill in possible CSS property names using its auto complete feature.

You can also use the panel's context menu to edit styles directly on the element (as opposed to using a predefined selector) or to disable or delete a property

In some cases the CSS rules in this panel are separated by higher level groups which list the CSS rules the current element inherits styles from. Each of these groups is preceded by a row saying "inherited from " followed by the selector this element inherits styles from. To quickly navigate between these groups, us Ctrl + Shift + up and down arrow keys.

CSS Panel Search

When a result is found, Firebug will highlight the found text in the style properties. Screen reader users will hear a description that describes where the text was found. The following type of matches are available:

  • The text was found in a selector. For example: Match found for 'company' in selector '.companyLogo h2'.
  • The text was found in a style property name or value. For example: Match found for 'font' in style property 'font-size: 1.2em;' in selector 'h3'.

If no match is found, the screen reader will say "No match found for <search string>".

After the first match is found, you can perform two actions:

  • Press Enter to search for the next occurrence of your search string
  • Press Ctrl + Enter to move focus to the CSS selector or property
Computed Styles

Firebug can also be used to show an element's current computed styles. To enable this view, choose 'show computed styles' from the CSS side panel tab's drop down menu. The computed styles view simply shows static lists containing all available style properties and their computed values for the currently selected element. The styles can be navigated using the up and down arrow keys, but they cannot be edited. The computed styles are grouped into categories, such as 'Text', 'Layout', or 'Background'. You can quickly move from one category to the next by using the arrow keys in combination with the Ctrl and Shift keys.

Note: In Firebug 1.5, the computed styles can be viewed as a separate tab in the HTML sidepanel tablist, rather than through the drop down menu used in Firebug 1.4.

Layout Side Panel

This panel shows a set of 5 nested boxes which allow you to inspect and modify the currently selected element's offset, margin, border, padding and size. When you tab into the panel, you'll start at the outer most box (offset). You can then do one of the following:

  • Press Enter to start the inline editor for layout properties. Pressing tab repeatedly will 'spiral' through all the editable fields, into the nested boxes. For example, if you start the inline editor at the outside box (offset), and press tab repeatedly, you would encounter the following editable fields: offset left, offset top, margin top, margin right, margin bottom, etc. all the way to the deepest editable values: height and width.
  • Use the arrow keys to move 'deeper' into the layout box e.g. from the outer offset box you can press the right arrow key to move into the margin box, then the border box, etc. Firebug will visually highlight the measurements of the corresponding element in your web page, and screen readers will announce a summary of all values for that layout type, e.g. "border top: 2, border right 2, border bottom: 5, border left: 10".
DOM Side Panel

This panel behaves exactly like the main #DomPanel, with the exception that the object shown reflects the currently selected element in the HTML panel.

CSS Panel

This panel works very similar to the #CSS Side Panel. There are some differences though, which are listed below:

  • All rules defined in a style sheet are shown, not just the ones applicable to a single element.
  • You can select different style sheets (if more than one is loaded) from the Panel Toolbar's drop down list, or edit the entire style sheet using the toolbar's 'edit button'.
  • The style rules do not show a link to the stylesheet document next to the CSS selectors.
  • The selectors themselves can now also be edited in an inline Editor, using the Enter key.

CSS Panel Search

See the #CSS Side Panel section for a description of the CSS search behavior.

Script Panel

The script panel can be used to inspect and debug JavaScript source code by setting breakpoints. You can choose a script from the list of currently used script files using the drop down menu in the panel's toolbar. With the accessible enhancements enabled, the script panel uses caret browsing to provide the user with keyboard access. You can use standard navigation keys such as the arrows keys, Home, End, PgUp and PgDn to navigate the code.

To set or remove a breakpoint, move to a specific line, and open up a context menu. Here you can either set a regular breakpoint or a 'conditional' breakpoint, which means that the script will only stop when a certain condition is true. Similarly you can use the context menu to remove or disable a breakpoint for a certain line.

To hear more information about the current line, screen reader users can press the Enter key. The screen reader will then announce a summary of the line, including:

  • The line number
  • Whether the line is executable (meaning that it can receive a breakpoint)
  • Whether the line currently has a breakpoint, and whether that breakpoint is disabled or conditional
  • Whether script execution has currently halted on this line
  • The actual source code on the line

When a script execution stops, for example because a breakpoint is triggered or because the 'break on next function call' feature is enabled, focus will automatically move to the line responsible. Also, for screen reader users an alert will fire, announcing that the script has been suspended, and on which line, function and file this has occurred.

When a script has been suspended, you can choose to 'continue' (F8), 'step into' (F11) or 'step over' (F10), or 'step out'. These features are also accessible as buttons in the Script panel toolbar. During script suspension the toolbar will also contain a list of toolbar buttons representing the current stack trace. This stack trace is also available in the 'Stack' side panel.

Script Panel Search

When searching for text in the script panel the line matching the search text will be highlighted in the panel's code viewer. Screen reader users will hear a message that describes the line number, file name, and the actual code on that line. For example: Match found for 'valida' on line 25: var validators = document.getElementsByClassName('hasValidator'); in login.js

After the first match is found, you can perform two actions:

  • Press Enter to search for the next occurrence of your search string
  • Press Ctrl + Enter to move the caret to the line in which the search was found

Note: To quickly move to a line number, type in a hash character(#) followed by a line number in the search box. For example, if you do a search for #200 and press Enter, you'll jump to line 200 in the document loaded in the script panel.

Script Side Panels

The script panel has three side panels: 'Watch', 'Stack Trace' and 'Breakpoints'.

Watch Panel

The watch panel works similar to the console panel, except that you can store certain expressions and see what they evaluate to at a later stage. You can create multiple watch statements, and during script suspension Firebug will also add useful watch statements itself, such as the scope chain of the currently halted function and local variables.

To add a watch statement, tab into the the watch editor in the Watch side panel. Press the Enter key to activate the inline editor, and then start typing the statement you want to watch. pressing Enter again will add the new watch expression to the list. The output is similar to the console.dir() output in the console panel, and is navigated in the same way: as an interactive tree. The only difference is that new watch statements are added to the top of the list instead of the to the bottom.

When you tab into the watch variables result list, you can use the up and down arrow keys to look at each expression's current value and the left and right keys to expand or collapse branches. You can also perform the following actions:

  • Choose 'remove watch' from its context menu to delete it.
  • If the watch expression's value is an interactive link, press Enter to start inspecting it in the appropriate panel.
  • Choose 'refresh watch' in the value's context menu to refresh the value.
  • Choose 'edit watch' from the context menu to change the expression.
Stack Trace Panel

The stack trace panel lists the stack trace while a script is suspended, similar to the trace you see in the script toolbar. You can click on individual links in the trace to move focus to their presence in the script.

Breakpoints Panel

This panel provides a quick overview of all breakpoints currently set for your script. The breakpoints do not have a context menu, but you can perform three actions using the keyboard:

  • Press Space to disable or enable the breakpoint. For screen reader users disabled will appear as 'not checked' and enabled will appear as 'checked'.
  • Press Enter to move directly to the breakpoints corresponding line in the script.
  • Press the 'Del' key to remove the breakpoint.

DOM Panel

The DOM panel shows all properties for any object as a tree structure. It is navigated exactly the same way as console.dir() output in the console panel and the DOM side panel in the HTML panel. Additionally, you can choose to edit or delete properties using a focused value's context menu.

DOM Panel Search

When a match is found, the corresponding object property is highlighted. Screen readers will announce the property name and value in which the search text was found

After the first match is found, you can perform two actions:

  • Press Enter to search for the next occurrence of your search string
  • Press Ctrl + Enter to move focus to the object property in which the search text was found

Net Panel

The Net panel will show all network traffic with the remote server that the currently loaded page is generating. In other words,it will lists all files that the web page requires, such as images, HTML, JavaScript and CSS documents. You can use the Net panel to inspect these files, how fast they were loaded, and the headers were used in the request and response. You can also use this panel to inspect the GET and POST parameters sent when the page loaded as well as dynamic XMLHttpRequest round trips.

Note: The accessibility changes applied to the Net panel are included in Firebug 1.5, which at the time of writing is only available as alpha release. To try it out, download the latest version from the Firebug 1.5 Releases page. In Firebug 1.4 the Net panel is not accessible.

Overview of the Net Panel Interface (without accessibility changes)

The interface used by the Net panel is quite complex, and might be difficult to visualize for users with visual impairments. Before going into the accessibility arrangements that have been made for this panel, it is important to understand how the panel's output is structured and what kind of information it provides:

  • Each file request is represented by a row in a grid.
    • The rows are appended to the grid dynamically as the files are loaded.
    • How long it takes before all files are visible in the grid depends on your network connection speed and each file's size.
    • Even after initial files are all loaded, new files may be added later as the result of dynamic updates or form submissions.
  • Each grid row consists of the following cells:
    • URL: The file's name and path, and the file's request method (for example GET and POST)
    • Status: The status code and description for the request, for example "304 Not Modified"
    • Domain: the web domain the file is served from.
    • Size: The file's size.
    • Timeline: A colored bar showing the time the file started and stopped loading. The loading time is split up in different colors, indicating the following phases: DNS lookup, Connecting, Sending, Waiting and Receiving. Additionally, the difference between the file load and the main document's DOMContentLoaded and 'load' events are also indicated, as well as whether the file is loaded from the browser cache or from the server.
  • The most bottom row in the grid always shows a summary row containing the total number of request, size total and time total.
  • Some of the columns have popup panels which appear next to the mouse cursor when a cell in the grid column is hovered over with the mouse. These panels show more detail information about the current cell.
    • For the URL column, the full URL path will be shown (as opposed to only the file name).
    • For rows representing an image, a thumbnail of the image will be shown.
    • For cells in the 'Size' column, the size in bytes will be shown (as opposed to for example kilobytes).
    • For the Timeline column, a table will be shown which breaks down the individual colored parts in the timeline (such as connecting, sending, etc.) in seconds or milliseconds.
  • Each gridrow can be expanded by clicking on it. The expanded section will show a tablist where each tab contains specific details about the file.
    • The Headers tab lists all request and response headers for the file (such as 'referrer' or 'last-modified').
    • The Response tab shows the file that was sent as a response to the files request, e.g. the image, html, js or css document.
    • The Cache tab shows cache specific parameters.
    • The Params tab shows parameters sent as GET or POST information.
    • The HTML tab shows (for HTML documents) an iframe in which the html document is rendered (in its pure form, without external scripting or styling).
  • You can filter the results using the buttons in the panel toolbar. The available filters are: All, HTML, CSS, JS, XHR, Images and Flash.

Note: Firebug will only show information about files that were loaed when the Firebug window was actually opened. If you do not see any file requests listed in the panel, try to reload the current web page while keeping the panel open.

Navigating the Accessible Net Panel

When the accessibility changes are enabled, the Net panel can be navigated in the following way:

  • The grid containing the Request details is marked up as an ARIA treegrid.
  • When tabbing into the panel, the first tab stop will be the first row of the grid, which contains the grid's column headers.
    • You can hide and show columns from the grid using this row's context menu.
    • When version 1.5 is released, these columns will be sortable. This can be achieved by clicking on the header cell or pressing the Enter key when it is focused.
  • The up and down arrows can be used to navigate up and down the rows. Similarly, the PgUp, PgDn, Home and End keys can be used to make large jumps in the list.
  • When a row has focus, the right arrow key can be used to move focus to its first cell. Pressing the right arrow key again will move focus along the other cells in the row. The left arrow key will move focus to the left cells, and eventually back to the entire row.
    • When an individual cell receives focus, any popup content that cell might have (such as an image's thumbnail, or a file's timeline details) will be shown adjacent to the cell. Additionally, screen readers will announce these details as a description for the cell.
    • Holding down the Ctrl key while using the right arrow key allow you to jump to the last cell in the row. Holding down Ctrl while using the left key will focus the entire row again.
    • When an individual cell is selected, the vertical arrow keys can be used to move up and down within that column. Again, the Home, End, PgUp, PgDn keys can be used to skip rows.
  • When an entire row is selected, it can be expanded or collapsed by pressing the Enter key. Note that the Right arrow key cannot be used for this because it is already used for gidcell navigation. The Left arrow key can still be used to collapse the row though.
    • To move into the expanded part of the row, simply use the Down arrow key. This will place focus on the selected tab in the file's tablist.
    • The Left and Right arrow keys can be used to change the selected tab.
    • Most tab contents can be navigated using the vertical arrow keys. This includes the header parameters and file contents (each line in the file is marked up as a navigable list item). The HTML tab contains a loaded HTML document, you can navigate that document as you normally would. The tab order inside the document depends on the HTML file is being shown.
    • As the contents of these tab panels can be quite long, you can hold down the Ctrl key while using the vertical arrow keys. This will skip past the file details to the next or previous file request row.
  • Anywhere in the request rows, a context menu can be opened to access file specific options. The options are:
    • Copy Location
    • Copy Request Headers
    • Copy Response Headers
    • Open in New Tab
Net Panel Support Issues and Notes
  • Currently, none of the screen readers announce the column headers defined for the treegrid.
  • Currently, NVDA announces the treegrid as a grid, and JAWS announces it as a tree.
  • There seems to be an issue in NVDA when navigating up or down a specific column. NVDA will first read the entire row, and then the cell contents (which were already included in the row details. Until this is fixed, column navigation can be quite tedious in NVDA. It's recommended to use the Ctrl key to interrupt the row content announcement, and then press Ins + Tab to have NVDA re-announce the cell description.
  • Currently, the timeline uses color as only means to convey information. For example, a light gray bar indicates that a file is loaded from cache, while a dark gray bar indicates it's loaded from the server. I am aware of this issue and am working on a solution for users with color blindness. Screen reader users will hear a correct textual indication though.

Net Panel Search

When a result is found, the corresponding text is highlighted in the Panel. Screen readers users will hear a message about the file and column in which the search text was found. The Net Panel Search feature has an option which allows you to include response bodies in your search. When this options is enabled, and a match is found in one of the response bodies, the screen reader will announce the file name and indicate that the text was matched in the file's details.

After the first match is found, you can perform two actions:

  • Press Enter to search for the next occurrence of your search string
  • Press Ctrl + Enter to move focus to the cell in which the match was found

Issues and To Do Items

Console Panel:

  • Output created by the 'profile' command has not been made accessible yet.

Script Panel

  • Navigating through the source code with the caret won't tell you immediately whether that line has a breakpoint or not.
  • When the script is halted, screen reader and keyboard users need to be able to access variable's current values like mouse users can by hovering over them.
  • Opening a context menu on a text selection using the keyboard currently causes the selection to be destroyed .
Personal tools