SVG Element/buttonWithSvgInside/

From Level Access Web Labs
Jump to navigation Jump to search

Button with SVG inside

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