working up examples

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  


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.


Charles McCathie Nevile - web standards - CTO Office, Yandex - - - Find more at

Received on Friday, 2 October 2015 15:15:37 UTC