Snap.svg and Accessibility / Screen Readers

[Bob Richardson]

Hello -

I'm starting a project which involves creating an interactive graphical control surface that runs in a browser. I'll be using JavaScript and SVGs for this purpose.

However, one of the requirements is that the controls be compatible with a screen reader application for the visually impaired. One of the reasons I intend to use SVGs is that the individual elements within can have tags that support titles and descriptions, either directly or via Aria.

For additional information on how this works with ordinary SVGs, see this article:

    https://www.tpgi.com/using-aria-enhance-svg-accessibility/

I'd also like to use a library such as Snap.svg to simplify things.

I've gone through the documentation for Snap.svg but I'm not finding any indication as to whether this kind of accessibility support is provided or how to implement it.

Can anyone answer this or point me in the right direction?

Thanks in advance.

[Ian]

Heya, 

Just wondering, would it work, just to add attributes, example..to add a role of presentation and labelled by... 

var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.2, role: "presentation", "aria-labelledby" :"title description"  });

I'm not sure if things like order are preserved

Kind regards,

Ian

[Peter Sersch]

My suggestion would be to give the object the attribute "tooltip" by implementing and then use this function to show the description on screen. If you want to see it in action just do a trial membership on www.virtualoon.com and insert a Gemar Balloon for example and hover over the balloon.

$(document).on( "mouseover", ".obj", function() {  // event mouseover for pics

this.getAttribute("tooltip");
var tooltipWrap = document.createElement("div"); //creates div
tooltipWrap.className = 'tooltip'; //adds class
tooltipWrap.appendChild(document.createTextNode(text)); //add the text node to the newly created div.

var firstChild = document.body.firstChild;//gets the first elem after body
firstChild.parentNode.insertBefore(tooltipWrap, firstChild); //adds tt before elem
var padding = 25;
var linkProps = this.getBoundingClientRect();
var tooltipProps = tooltipWrap.getBoundingClientRect();
var topPos = linkProps.top - (tooltipProps.height + padding);
tooltipWrap.setAttribute('style','top:'+topPos+'px;'+'left:'+linkProps.left+'px;');
});

$(document).on( "mouseout", ".obj", function() {  // event mouseover for pics
document.querySelector(".tooltip").remove();
});

I think with some changes you could show the text where ever you want and with some css you can decide in wich size the text would be.

I hope that helps,

Peter Sersch

P.S.: If you need help, just contact me. Maybe we could work together ;-)