Voiceover / NVDA / JAWS Accessibility (A11y) support?

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/

[czeckd]

The svgAriaLabel discussed above is now released in angular-svg-icon@11.2.0. Please let me know how it works out for you.

[czeckd]

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?