Voiceover / NVDA / JAWS Accessibility (A11y) support?
localpcguy opened this issue · 9 comments
Is there a defined pattern for making sure SVGs served using Angular SVG Icon are accessible, particularly as related to voice over support? I know you can set the title/description in the SVG itself and that works for some combinations of voice readers, but it would also be nice to have the option to pass dynamic voice over text into svg-icon and have it be rendered consistently for the best accessibility support.
If there isn't a pattern yet, this may be something we will be adding and if there is interest, could contribute back to the plugin.
related information about SVGs and accessibility:
https://www.deque.com/blog/creating-accessible-svgs/
I don't have a defined pattern to recommend. It certainly could work as an enhancement for svg-icon. If you have something in mind, a pull request would be welcome.
@localpcguy I've been thinking about how to add accessibility support. Would it be helpful to be able to set on svg-icon: title, role, desc, and/or aria-labelledby? From reading elsewhere, it seems that setting aria-hidden is the correct thing to do on icons not specified explicitly.
Would having the title, role, desc, and/or aria-labelledby duplicated in both the svg-icon and the svg itself cause problems?
Sorry I haven't had time to look into this. I do think that sounds like a decent pattern. We've been "handling" it by setting A11y properties manually on the SVGs themselves in their code.
@czeckd It would be really helpful to be able to set at least aria-hidden and aria-label on the SVGs. Using aria-hidden is a valid case if icons are for example used in buttons and are not needed as the button has a label.
@fynnfeldpausch - would something like attribute svgAriaHidden and svgAriaLabel on svg-icon then apply those to the loaded SVG as aria-hidden and aria-label? Or, would you want to use aria-hidden and aria-label on svg-icon and then apply those attributes on the SVG?
Either option is fine for me. The first one is the one that I would have expected, but don't know what API you have in mind.
You could also just use one attribute for the label and apply aria-hidden by default if no attribute is given. I think this is what Angular Material does as well. But that's certainly the more complex solution as you would have to check if the SVG source not already defines an aria label in it's source code since you don't want to apply aria hidden by default if an aria label exists on the SVG. 🤔
I'm looking over at Angular Material for what they're doing with icons and how I'm interpreting their response is the icons are mostly decorative. Thus the default is aria-hidden=true, which can be overridden.
Experimenting with setting an aria-label on the svg-icon, it sounds like the label is duplicated on both the svg-icon and then the SVG. This seems like the wrong approach to me. Therefore, I think having a svgAriaLabel attribute on svg-icon is the preferable approach.
If the svgAriaLabel is set to a non-empty string, then the aria-hidden=true on the SVG would be removed and the SVG's aria-label would be set to the string in svgAriaLabel. If the svgAriaLabel="", then the aria-label is removed from the SVG and the aria-hidden=true is set.
Thus, one new, optional attribute, svgAriaLabel and aria-hidden=true by default. Does this seem like the correct approach?
Sounds perfect to me 👍
The svgAriaLabel discussed above is now released in angular-svg-icon@11.2.0. Please let me know how it works out for you.