Re: working up examples

On Fri, 02 Oct 2015 17:15:01 +0200, Chaals McCathie Nevile  
<chaals@yandex-team.ru> wrote:

> I started to mess with a chemistry example I had lying around, as a way  
> of figuring out what works now, what makes sense, and where we should be  
> going.
>
> <http://svg-access-w3cg.github.io/use-case-examples/chem-BV-ox.svg>

I've done some more to it.

* added role="img" to lots of things that can be treated as "symbols". I  
initially tried to add it for the whole image, but despite what the ARIA  
specs say VoiceOver seems to have implemented that as an indivisible unit.  
I'll return to using group or something.

* added aria-describedby to link to desc elements. This seems to be the  
only way to get at their content, in my initial testing set: Mac OS X,  
Yandex browser, Safari and Firefox, and it only works when they are  
running with VoiceOver.

* turned all the text things into text, mostly defined in the defs section  
with labels, roles and sometimes descriptions. In the case of OH groups in  
the diagram, I made a group with two use elements to combine the two  
things and gave the group a role and title.

* added more aria-labelledby and titles

I also made a little shell script I can use to turn any of the SVG files  
into SVG embedded in HTML. It's dependent on sitting on my own laptop  
still, but hopefully tomorrow I'll fix that and put it into the repo. I  
used it to produce

<http://svg-access-w3cg.github.io/use-case-examples/chem-BV-ox.html>

because Léonie reported in some quick Windows testing that having SVG  
directly embedded in HTML made it work better in some screenreader/browser  
combos.

comments, and especially test results or Pull Requests welcome...

cheers

> It started out as the typical rubbish of a lot of paths. We certainly  
> have a task in terms of getting authors to do something useful. Here are  
> some things I did, and what they achieved...
>
> * removed the clip-path
>   - because it didn't do anything useful
> * used <defs> for the various symbols that are repeated
>   - made it much easier to read the code
> * grouped things according to the logic of the image
>   - where groups are navigable, makes it easier to understand.
>   - helps reading and editing the code rationally
> * added title elements
>   - helps in a couple of systems to make things navigable
> * added tabindex to a few things
>   - helps in lots of cases to make things navigable.
>   - brings focus rings (to bounding boxes) in a number of browsers
> * added aria-labelledby to some things
>   - makes some screen reader/browser combinations provide useful info
> * added a desc
>   - in some cases it is accessible
>
> There are a lot of other things to note. For windows, which Léonie  
> tested, having the SVG embedded in HTML makes a huge improvement on what  
> is available. I didn't test that yet on Mac, but the basic story for SVG  
> as is was pretty sad. Only Firefox of the three I tried enabled zoom,  
> only YANDEX BROWSER enabled tabbing if there was a tabindex, with Safari  
> adding it when VoiceOver is running, no browser provided clear and  
> consistent navigation and reporting of what was there…
>
> I have a bunch of things to do on the document, and I'll collect up the  
> notes on test results in a more systematic form, along with a version of  
> the diagram embedded in HTML, and put them in the CG wiki in due course.
>
> But one of the conclusions I drew was that while little I can see in the  
> proposed aria extensions would help much in this case, there is a lot we  
> can do by filling in from existing stuff we have that would be helpful.
>
> Anyway, food for thought.
>
> cheers
>


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

Received on Monday, 5 October 2015 21:55:38 UTC