aria, SVG, browsers and bugs

Hi folks,

I have been working a bit on trying to make some SVG diagrams more  
accessible. This is a project that is partially documented on the W3C SVG  
accessibility Task Force wiki [1], and there are some attempts to produce  
something useful in the SVG accessibility Community Group's github  
repository [2] which I have described a bit in email [3],[4].

I'm running into a lot of bugs. I think SVG can be used in prime time,  
given that the best alternative is often longdesc in which you can  
actually put an SVG as well as some additional help. But there are a lot  
of things that would be really useful, but don't seem to work.

All my testing has been on a Mac with OS X 10.10.5 using the latest  
versions I have of the Yandex Browser (chromium-based), Safari and  
Firefox, mostly with VoiceOver - without it only Yandex lets me do simple  
things like navigate elements with a tabindex…

Among them:

I tried to use aria-flowto, to describe navigation. An example is a  
diagram of a chemical compound which is like a 3-pointed star - "the  
initial ketone" in [3]. As far as I can tell, it is at best unreliable,  
sometimes working if I use a single ID, and useless for multiple IDs.

In some browsers, aria-label doesn't seem to work, and I have to use  
aria-labelledby and point to a title element. It failed when I pointed to  
a text element, although as far as I can tell from the spec that should  
work.

I couldn't get role="img" to work for the case where the image was  
composed of various other things. I could use aria-labelledby to point to  
a title for a screenreader, but otherwise couldn't get one.

Finally, firefox wouldn't even let me tab to things with a tabindex  
attribute.

Are these known problems of aria in general, or specific to trying to use  
it in SVG?

Any comments, contributions, pull requests, or other thoughts are welcome…

[1] https://www.w3.org/wiki/SVG_Accessibility/
[2] http://svg-access-w3cg.github.io/use-case-examples/composed-tree.html
     http://svg-access-w3cg.github.io/use-case-examples/composed-tree.svg
     http://svg-access-w3cg.github.io/use-case-examples/chem-BV-ox.html
     http://svg-access-w3cg.github.io/use-case-examples/chem-BV-ox.svg
[3] https://lists.w3.org/Archives/Public/public-svg-a11y/2015Oct/0005.html
[4] https://lists.w3.org/Archives/Public/public-svg-a11y/2015Oct/0002.html

cheers

Chaals

-- 
Charles McCathie Nevile - web standards - CTO Office, Yandex
  chaals@yandex-team.ru - - - Find more at http://yandex.com

Received on Tuesday, 6 October 2015 22:51:04 UTC