A11y tree screenshots

[jasonkiss]

I like the idea of some visual representation of the a11y tree, but think the use of screenshots from AViewer might be a little confusing, esp. in the role=presentation section. They use icons and include information that probably need some explanation, e.g. what do "<> (none)" and "ab|text - editable text" mean? In most cases the images contain more information than the alt text. Also, because the screenshots are from AViewer with Firefox, they give the impression, if one knows something of what they mean, that the abbr element actually has an accRole, but that's just Firefox.

If you stick with using these screenshots, it might be good to always show the screenshot for the a11y tree before application of role=presentation AND after so that the effect of role=presentation is clearer. More explicit text explanation with each example would also help, I think.

I wonder if the plainer tree representation provided by accProbe might be better, or even some custom, simple visual tree built out of text?