DOM Inspector for accessibility. New features.

A couple new features were introduced after I wrote the previous post about DOM Inspector (aka DOMi). Note, some features aren't available in release version yet. So if you want to get an access to them then you need to build DOMi yourself.

Text attributes

You can inspect text attributes of the accessible object (also refer to IAccessible2 text attributes). All you need is to choose 'Accessible Properties' view in the right panel (make sure 'Show Accessible Nodes' menu option of 'View' menu is on) and then switch to 'Text attributes' tab as it shown below.

You can see default text attributes for the selected accessible and inspect text attributes and offsets for each text range where text attributes stay permanent. For example if you have

  <p><b>hello</b><i>italic</i></p>

then HTML p element is divided into two ranges, the first text range corresponding to 'hello' text has 'font-weight:700' text attribute, the second text range corresponding to 'italic' text exposes 'font-style:italic' text attribute.

Note, if the selected accessible doesn't support nsIAccessibleText interface then 'Accessible Properties' view doesn't have a 'Text attributes' tab.

Note, this feature is not available in current 2.0.13 version.

Search the tree

'Accessible Tree' view of the left panel gained a JS style search. Now when you open 'JS console' (right click on the selected item and choose 'Evaluate JavaScript' menu item) you can operate on JS object named tree having following methods:

search
  Search though the accessible tree and highlights accessibles complying with
    the given criteria.
  Arguments
    accessible of type nsIAccessible
      The root of the subtree the search is performed in.

    criteriaFunc of type Function
      Function invoked for each traversed accessible to determine whether it complies
        with the criteria.
      Arguments
      accessible of type nsIAccessible
        The traversed accessible.
      Return value
        true if the traversed accessible complies with the criteria, otherwise false.

clearSearch
  Clears search results (unhihglights highlighted accessibles)

So say you want to find all text leaf accessibles in the document:

To do that you write the criteria function and invoke the tree.search() on the document accessible.

  function searchTextLeafs(aAcc)
  {
    // Ci is shortcut for Components.interfaces
    // nsIAccessibleRole is an interface defining accessible roles 
    return aAcc.role == Ci.nsIAccessibleRole.ROLE_TEXT_LEAF;
  }

  // 'accessible' is the selected accessible in the left panel, in our case
  // it's the document accessible.
  tree.search(accessible, searchTextLeafs);

When you press 'Evaluate' button then all text leaf accessibles in the document are highlighted.

I should add that all diversity of Gecko accessibility API is available for you from JS console and that allows you to create any criteria you need.

In short, this search tool is rather for JS hackers but it's very flexible and easy enough.

Build DOM Inspector

From time to time I'm getting asked how to build DOM Inspector (aka DOMi) from sources. It's helpful when you need to access to the latest features which aren't available in release yet or if you want to hack on it.

So if you build Firefox on your machine then building the DOMi is easy.

1. You need to download DOM Inspector sources: hg clone http://hg.mozilla.org/dom-inspector/ inspector 
2. Copy the inspector folder under extension folder of Mozilla sources you build Firefox from
3. Add ac_add_options --enable-extensions=default,inspector into your .mozconfig file
4. Build Firefox

That worked fine for a long time. But recently I noticed it doesn't make a trick and DOMi isn't shown in installed add-ons anymore.

In this case cd firefox-objdir/extension; make; helps to appear the DOMi. When you open Firefox for the first time then you will see an extra tab with request to enable the DOMi. You just click the checkbox and restart Firefox.

After that you can summon DOMi from Tools -> Web Developer -> DOM Inspector menu.

DOM Inspector as accessibility tool

As you probably know DOM Inspector (aka DOMi) is Firefox add-on designed to inspect web pages and Firefox UI. In some sense it's ancestor of Firebug but perhaps not so fancy and miss some useful features like integrated JavaScript console. Nevertheless DOMi allows you to inspect Firefox UI what makes it quite different from Firebug. You may say there's ChromeBug but it has less amount of features than DOMi, for example, it doesn't allow to inspect XBL elements.

Anyway, DOMi is really nice accessibility tool also. It's not feature complete and far from ideal but it's quite powerful. And that's probably something new for you. Each platform provides set of accessibility tools like accprobe on Windows, accerciser on Linux or built-in tools on Mac. These tools have own benefits and disadvantages but main thing I dislike they don't allow me to inspect DOM. When you need to understand why your web page or your ARIA widget has accessibility issues then it's quite handy to inspect both DOM and accessible trees and what's most important to see *relation* between elements of these trees. That's what DOMi gives you.

DOM Tree

If you check 'Show Accessible Nodes' menu option then 'DOM Nodes' view of the left panel marks accessible DOM nodes by bold font. This view is good to understand where the specific accessible is located in DOM tree.

Accessible Tree

If you don't want to see inaccessible DOM nodes then you can switch to 'Accessible Tree' view of the left panel. The tree displays accessible role, name and related DOM node information for each accessible. Also you can inspect different properties and relations of interesting accessible by selecting it and choosing corresponding view in the right panel.

Also you should choose this view if you want to work with complete accessible tree. 'DOM Nodes' view doesn't always allow you to do this because accessible tree is not a strict subset of DOM tree. For example, XUL trees often don't have underlying DOM however they have rows and cells in accessible tree.

JavaScript Console

JavaScript console is available in 'Accessible Tree' view from context menu on selected accessible. It gets open in separate window (what is not super comfortable) and it doesn't have set of handy functions to help you with tree inspection but you can evaluate arbitrary JS code and call any method on selected accessible object.

 
Accessible Properties

'Accessible Properties' view of the right panel allows you to inspect accessible properties of the accessible selected in the left panel. You can inspect accessible role, name, states, object attributes i.e. standard set of accessible properties. Also it allows you to invoke accessible actions. Switch to 'Actions' tab to find it out.

Accessible Relations

'Accessible Relations' view of the right panel allows you to see accessible relations and inspect relation targets in separate window.

Accessible Events

'Accessible Events' is a super feature to inspect web pages and ARIA widgets in dynamics. It allows you to

• watch accessible events and choose events you want to watch;
• add custom event handlers and see output.

If you switch to 'Watched Events' tab then you can choose a number of events you'd like to listen and add custom event handlers. Custom event handlers feature provides you a set of helper functions to inspect accessible tree and accessible properties at time of event handling. For example, you can use outputTree() function to make a snapshot of accessible tree. Small help button marked by '?' is available to get a list of helper functions.

You can see custom event handler output by selecting handled event in the left panel and choosing 'Accessible Event' view in the right panel.

Accessible Event

'Accessible Event' view of the right panel is used to inspect properties of handled accessible event and contains output of custom event handlers. Here's a snapshot of accessible tree when accessible focus event was handled. Highlighted accessible in the tree is focus event target.