title / description for accessible svg

[DanielRuf]

Afaik we should use title/description as this is what most a11y testing tools like pa11y, Koa11y and so on are looking for.

https://css-tricks.com/accessible-svgs/

Also role="img", aria-hidden="true" and similar solutions might be needed in accessible projects.

[edent]

Our current accessibility guidance was kindly provided by @LJWatson in #50.

As per the article you listed - https://css-tricks.com/accessible-svgs/#article-header-id-11 - we use aria-label= as these are plain icons. If people want to use them in other contexts, they can use alt or title.

[DanielRuf]

alt or title should not and can not be used when used as xhref and inline svg ;-)

Then we would need title / desc in the svg tag and role="img" or in some cases aria-hidden="true".

[DanielRuf]

Well, at least the given guidance is not correct in most cases and misses some things.

I'm fine with this if this is documented with some examples somewhere or the CSS Tricks or anything else linked .

[edent]

OK - I'm very happy if you want to edit the README to include more accessibility information.

[LJWatson]

The icons already use role="img".

The aria-label attribute and <title> element are different ways of providing an accessible name. Either can be used in this situation, but aria-label has the advantage of requiring less bytes to do it.

The advice to use alt (found on the README) is when the icon is pulled in using the <img> element, not for use with the SVG itself.

[DanielRuf]

The aria-label attribute and <title> element are different ways of providing an accessible name.

Mh, is the browser support the same?

Thanks for the clarification.

Currently we test with pa11y / Koa11y.

[LJWatson]

<Mh, is the browser support the same?<

With the exception of aria-label in IE, both methods are supported across all major browsers (Chrome, Edge, Firefox, IE (with the noted exception), and Safari).

[DanielRuf]

So it may make sense that we stick to desc/title in svh elements as we also optimize for IE11.

[LJWatson]

To be on the safe side, yes. It seems that Jaws and NVDA both have workarounds, meaning that the accessible name is announced even when it's applied using aria-label and viewed in IE11. Narrator doesn't seem to though.

[DanielRuf]

To be on the safe side, yes. It seems that Jaws and NVDA both have workarounds, meaning that the accessible name is announced even when it's applied using aria-label and viewed in IE11. Narrator doesn't seem to though.

Interesting. Thanks for the information. Could be useful for our further testing. And thanks for taking the time give feedback on my proposal.

@edent should I keep the issue open and propose an update to the readme with the CSS Tricks article or what do you think?

[edent]

Yes, please update the README with clear guidance 😀