WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible DOM Inspector

for

From: Birkir R. Gunnarsson
Date: Oct 26, 2014 7:01PM

I am a big fan of Firebug, and it works fairly nicely with screen
readers, particularly with Jaws.
The trick is to use Jaws's right click simulator (JawsKey - 9) and
select the "inspect element with Firebug", which should be the first
option in context menu (once Firebug has been installed).
This usually puts you at, or at least very near, the node in Firebug
when you open it (if you do not do this you have to start from the
root element of the document, and it can be hard to locate the current
element that way).
Once you open Firebug using the JawsKey - 9 method, you have to tab
about 3 or 4 times until you get into the html tree.
Once in the html tree you can navigate it using arrow keys (up and
down, arrow right to open child node of the tree, arrow left to close
it). The level of nesting is announced along with the html code, so
you always know the structure and how the tree nodes relate to each
other.
This tree does not show the contents of each node, for that you have
to bring up the context menu (shift-f10) and then select "copy
element" and paste it into notepad or other text editor.
You can even make changes to the html code in notepad and paste it
back in, at the same spot, using the context menu and select 'replace
node'.
You can review the page change in the Firefox window, but once you
refresh or close it, the change goes away.
Another advantage of Firebug is that if you tab a couple of more times
after hitting the html tree you get into the CSS inspector and can see
the CSS class(es) used on that particular node in the dom tree.

Another little tool I use frequently is a script that comes with Jaws,
called Display extended element info.
On desktop this usually has its own pre-defined keystroke
(ctrl-JawsKey-']) but on laptop layout this is not the case. You have
to go into keyboard manager and map the script to a hotkey in your
selected browser(s).
When you areWith the cursor on any element in the virtual buffer you
can press this key and get a list of this element and all its
attributes, as well as its parent elements and their attributes all
the way up to the root.
You do not have to be on a focusable element or anything, and it also
shows the MSAA mapping (though it is inaccurate and BX does a much
better job of that).
I am sure the script is a little dated and could use slight
improvements such as including how elements are labelled and other
important relationships, but it is an incredibly valuable tool for a
basic snapshot overview.

I know NVDA has accessibility tools as well, and I have been wanting
to explore those, but with 40 to 60 hour work weeks and 3 kids I
seldom find the time to sit down and do a lot of the things I really
want to do re accessibility tool improvements and documentation for
blind accessibility professionals.
If anyone wants to join me in a group to jointly explore and document
different accessibility options for blind testers, this is something
that would be very exciting and valuable for our profession.
Thanks
-Birkir



On 10/19/14, Jennifer Sutton < <EMAIL REMOVED> > wrote:
> Here's a link to the Dom Inspector for Firefox:
> https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/
>
> This is for version 2.0.14.
>
> Here's a link to the home page -- seems, as far as i can tell, that
> it was last updated in April of 2013:
> https://developer.mozilla.org/en-US/docs/DOM_Inspector
>
> Best,
> Jennifer
>
> > > >


--
Work hard. Have fun. Make history.