Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating accessibility of resulting SVG #26

Closed
wants to merge 4 commits into from
Closed

Updating accessibility of resulting SVG #26

wants to merge 4 commits into from

Conversation

jonnyhaynes
Copy link

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.

Jonny Haynes and others added 4 commits March 19, 2015 09:44
@jonnyhaynes
Copy link
Author

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

@protodave
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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!

@jonnyhaynes jonnyhaynes closed this by deleting the head repository Feb 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants