Updating accessibility of resulting SVG

[jonnyhaynes]

Removed reliance on title attribute and swapped it for alt attribute as per the Paciello Group recommendations. Added aria role support and bumped bower version number.

[jonnyhaynes]

Realised I shouldn't have bumped the bower version, just so use to doing it in my own projects. Apologies.

[protodave]

Hey thanks for this! No worries about the bower version bump... totally get it ;}

We started talking about this over in issue #14. Basically, SVG elements don't have title (or alt) attributes, per the spec... various browsers may or may not use them I guess?

The Paciello Group link was helpful, thanks... I also just found this there: http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/

Adding role makes a lot of sense. Thoughts about mapping any <img> title/alt attributes into SVG <title> and/or <desc> elements? And what to do if the SVG already has either or both of those top-level elements? Then adding the aria-labelledby attribute makes sense as it will point to the title element in the SVG.

Also some more SVG accessibility thoughts here: http://www.sitepoint.com/tips-accessible-svg/

[jonnyhaynes]

Cool.

So from your feedback here and the brief discussion on issue #14. I think what needs to happen is the original inline <img> needs an alt attribute rather than the title attribute it currently has as per the Paciello Group recommendations.

Then we need to test the SVG to see if it already has a <title> tag, if it does we leave it alone? Otherwise we create one with the alt attribute from the original inline images alt attribute.

Then we add role="img" and add in the aria-labelledby="title" attributes.

We can also use the longdesc attribute as recommended by the W3C for the SVG's description tag content. Again checking to see if one exists, if not we create one. We'd then expand the aria-labelledby attribute to include the description as per the Paciallo Group's recommendations.

If you're happy with that, I'll make more amends and do another pull request?

[protodave]

Awesome, I think we are reaching some decisions.

Interesting thought about using longdesc. Seems like that attribute is meant to be a link to another page (or on-page element) that itself is the longer description, so I'm not sure that maps as cleanly to the SVG desc element, which is commonly plain text?

Another option could be to map image title attribute to SVG title element and image alt attribute to SVG desc element?

From the SVG spec:

...‘title’ elements are not rendered as part of the graphics. User agents may, however, for example, display the ‘title’ element as a tooltip, as the pointing device moves over particular elements.

So setting a title attribute on the image and then potentially seeing it as the tooltip for the injected SVG would be intuitive I think.

And this sort of validates the alt -> desc mapping:

The description provided should be commensurate with the information contained in the image: use alt-like descriptions for simple images and longer descriptions for complex ones.

via http://www.idpf.org/accessibility/guidelines/content/svg/desc.php

Also, maybe if the image doesn't have either a title or alt attribute we can assume the SVG is "purely decorative" and set the role to presentation?

If an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.

Thanks again for your thoughts and work on this!