Button with SVG inside

Testing

• iPhone iOS 12 VoiceOver - title of SVG NOT announced
• iPad iOS 12 VoiceOver - title of SVG NOT announced
• Android Tablet -Android 7/Chrome/TalkBack 6.2 - title of SVG IS announced
• Desktop Windows 7 IE11 JAWS 2018 - title of SVG IS announced

Fixed Version

Using aria-labelledby

All text is put into the accessible name so it is read when using the arrow key with a screen reader. focusable="false" is used to keep the SVG out of the tab order in IE 11

Testing

• iPhone iOS 12 VoiceOver - accessible name is announced when you swipe to it
• iPad iOS 12 VoiceOver - accessible name is announced when you swipe to it
• Android Tablet - accessible name is announced when you swipe to it
• Desktop Windows 7 IE11 JAWS 2018 - accessible name is announced when accessed by either the down/up arrow or tab keys