Re: semantic level of SVG usage

Hi Sean,

18.08.2016, 07:21, "Sean Murphy (seanmmur)" <seanmmur@cisco.com>:
> Is there any examples of accessible diagrams using SVG? As I find this difficult to understand how the final product will be accessible to a screen reader user who cannot see the screen. Described diagrams are something that someone has to interpret and then explain in a way the end-user can understand. Look at any network l2 or l3 topology diagram, programming logic flow chart, work flow complex flow chart, etc which has multiple paths and exit/entry points. Very quickly the diagram becomes difficult to understand from a blind persons point of view if the diagram hasn't been carefully transcribed.

Yes, these things are hard to understand. For a sighted user as well - and that's assuming the actual graphics were well designed for easy understanding, which often they aren't.

Essentially, working out how to break down structures in the right way is difficult, and can be audience-dependent. The sort of CSS techniques I used in the process diagrams - as Rich pointed out, the link was wrong but he corrected it in his mail already - can be used with e.g. a diagram of a car or a camera, to provide layers of structure that can be explored - enabling the user to get a sense of what is there at different levels of detail from an overview to a detailed look at some structure.

As a kid I had some books that did this with transparent or semi-transparent overlays, but what we can do with SVG is more powerful because of the ability to provide animation and interactivity. This is the sort of stuff that graphic communication and instructional design covers, and there are millions of people in those fields who could teach something to those of us who are experts in back-end programming, front-end aesthetics, translating things to web technology, or analysing Web accessibility...

> Bar charts, Pye charts and simular charts from Excel showing data is far easier to be made accessible.
>
> So is there any examples of complex SBG diagrams that I could see using the SVG concepts discussed here?

I don't know of any. I got some diagrams from Boeing, which are in the SVG-access use cases repository but I haven't been able to understand them well enough to try playing with the SVG - and I have had very limited time.

By the way, the use-cases repo is full of diagrams, and the idea is that anyone is free to try making them more accessible however they think they can. Throw your tools at them, hand-craft improvements - which is what I do, although largely in my spare time - whatever you think can show us a way forward even if it's a one-off demonstration of an idea.

cheers

> Sean Murphy
> Accessibility Software engineer
> seanmmur@cisco.com
> Tel: +61 2 8446 7751 Cisco Systems, Inc.
> The Forum 201 Pacific Highway
> ST LEONARDS
> 2065
> Australia
> cisco.com
>
>  Think before you print.
> This email may contain confidential and privileged material for the sole use of the intended recipient. Any review, use, distribution or disclosure by others is strictly prohibited. If you are not the intended recipient (or authorized to receive for the recipient), please contact the sender by reply email and delete all copies of this message.
>
> -----Original Message-----
> From: Rich Morin [mailto:rdm@cfcl.com]
> Sent: Thursday, 18 August 2016 2:21 AM
> To: w3c-wai-ig@w3.org
> Cc: www-svg <www-svg@w3.org>
> Subject: semantic level of SVG usage
>
> Although I like the idea of adding ARIA metadata to SVG, I'm concerned that its effectiveness may be extremely limited by the semantic level of SVG tags and their typical usage.
>
> # Motivation
>
> Consider a data flow diagram, as produced by OmniGraffle. The building blocks of the diagram are geometric shapes and arrows, but this level of abstraction is largely absent from the SVG. Instead, it uses either a filled `path` or a pair of `rect` elements.
>
> And, although the semantic payload of the diagram is largely concerned with connectivity, the SVG contains no information on this. The only way I can see to get connectivity information is to compare locations of line endpoints with the (fuzzy) boundaries of geometric shapes.
>
> I have similar concerns about other kinds of plots and diagrams. For example, the semantic payload of a pie chart or a histogram has to do with the numeric quantities being represented, not with the angles or heights used in the generated image.
>
> The SVG images produced by D3.js are even more problematic, using tags which have only a distant relationship to the semantic payload:
>
>   https://github.com/d3/d3/wiki/gallery
>   http://bl.ocks.org/mbostock
>
> In summary, adding attributes to SVG tags may not be enough to make the resulting image particularly accessible.
>
> # Proposal
>
> By combining SVG attributes (e.g., object identity) with a separate section of the XML document, it would be possible to add arbitrary semantic information to the image. For example, the added section could describe graph connectivity, encode raw data for plots, etc.
>
> This could support a variety of post-processing needs, ranging from accessibility to machine learning. And, because the added section wouldn't be part of the base SVG, programs could simply ignore it.
>
> Comments and suggestions welcome.
>
> -r
>
> P.S. Amanda Lacy, Johannes Rössel, and Gene Dronek contributed
>       valuable information and insights to this note, but they
>       are not responsible for my conclusions.
>
> --
> http://www.cfcl.com/rdm Rich Morin rdm@cfcl.com
> http://www.cfcl.com/rdm/resume San Bruno, CA, USA +1 650-873-7841
>
> Software system design, development, and documentation

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

Received on Thursday, 18 August 2016 11:47:46 UTC