We've been working with SVGs a lot recently, which has led our developers down a rabbithole of discovery! Here are some things to consider when it comes to SVGs and accessibility.
When SVGs are implemented as <img> tags with an .svg as the source, we've encountered a few issues for VoiceOver and TalkBack users. These issues occur when those <img> tags don't also have an ARIA role="img" attribute.
We often see examples of making SVGs accessible by simply adding a <title> element within the inline <svg>. While this does help in some situations, like a lone SVG icon within a link, adding a <title> element doesn't make SVGs accessible in all browsing environments.
The <svg> elements inside focusable elements (like links or buttons) in Internet Explorer default to focusable="true" due to a bug. This causes both the parent element and the <svg> to receive focus.
When accessed in Safari 10, <svg> that have <use> elements without whitespace between the parent <svg> and child <use> tags prevent focus from moving past the <svg>.