RE: Agenda May 1 SVG Accessibility TF

Leonie,

The purpose of the tool is to let us look at marked up SVG. If you are
sighted and keep the show as SVG tree: checkbox checked a tree of the SVG's
structure is drawn (naturally in SVG).

The SVG tree shows the tree as a rectangles for nodes that contain the tag
(ie path, g, text...) with lines linking their children. Above the box is a
symbol, usually a single letter but sometimes two letters when the tag has
a role. The nodes are color coded svg and g tags are green, defs and style
stuff are blues/purples, title and desc are a grayish color and everything
else - mostly drawn stuff are a yellow color. Text nodes show the text to
the right of the node.

If you hover over a desc or title node a tooltip shows you the string. With
other nodes, hovering shows you the properties of the node. Hovering over
the symbol for a role spells out the role, for example hovering over an
role symbol x gives role = none.

I found this tool useful when marking up SVG as it showed me how far I got
in the file and I could trace which groups should be marked as an
axis/legends by working backwards from the axis/legend labels and so on. I
think this tool will be useful for discussing markup as I found it useful
to markup groups and letting the children inherit roles, rather than
marking up tens or hundreds of individual items. I was also able to figure
out missing groupings which I think would be beneficial in designing
navigation. Especially in the stacked bar chart where the stacks needed
summary info (ie total for the stack) and where navigation should respect
the grouping.

Because you and Jason can't use the SVG tree display, I grabbed a tree
control from the OpenAjax example and followed the jQuery treeview.js
instructions and copied from the online example. The online example has the
div being an application. Rereading the jQuery treeview.js instructions it
doesn't state that a containing div needs to be given the role application.
                                                              
                                                              
                    Regards,                     Fred         
                                                              
                   Fred Esch                                  
       Accessibility, Watson Innovations                      
    AARB Complex Visualization Working Group                  
                     Chair                                    
        W3C SVG Accessibility Task Force                      
                   IBM Watson                                 
                                                              
                                                              






From: Léonie Watson <lwatson@paciellogroup.com>
To: Fred Esch/Arlington/IBM@IBMUS, <public-svg-a11y@w3.org>
Date: 04/30/2015 07:04 PM
Subject: RE: Agenda May 1  SVG Accessibility TF



 From: Fred Esch [mailto:fesch@us.ibm.com]
 Sent: 29 April 2015 16:41
 <SNIP>


I have a web page (tool) that lets you upload a SVG and it shows the
structure of the SVG as a SVG tree or alternatively a HTML tree.  The SVG
tree shows the markup (role, desc, title) as part of displaying the tree. I
am working with Jason White on getting the HTML tree usable for those who
can't see the SVG tree.

Thanks Fred. Had a look at the tool…

You don’t need role=”application” on the <div> containing the HTML tree
view:

<div id="svgContainer2"" role=”application”></div>

The tree role on the subsequent <ul> should trigger applications mode
automatically:

<ul id="svgTreeUl" aria-labeledby="svgRootLabel" role="tree" class="tree
root-level"></ul>

With the application role removed the tool works with Jaws and NVDA in
Firefox, and VoiceOver in Safari. VO treats the tree as a collapsible
table, but otherwise the interaction remains the same.

It does not work in IE with either NVDA or Jaws. It works with both screen
readers in Chrome to the extent that the tree structure is announced, but
not the actual content. Note that Jaws does not officially support Chrome
though.

Note that the OAA tree example does not work with these browser/screen
reader combinations either [1].

The readme says the purpose of this tool is to evaluate SVG markup. Based
on my exploration so far, it appears to simulate the behaviour of
inspection tools like Firebug. Is that right, or am I missing something?



Léonie.




--
Léonie Watson Senior accessibility engineer, TPG
@LeonieWatson @PacielloGroup PacielloGroup.com