Difference between revisions of "SVG Element/buttonWithSvgInside/"

From Level Access Web Labs
Jump to navigation Jump to search
 
Line 22: Line 22:
 
}
 
}
  
#content { font-size: 3rem; }
+
 
 
button { width:200px; height:200px;}  
 
button { width:200px; height:200px;}  
 
*:focus { outline: 3px dotted #000; }  
 
*:focus { outline: 3px dotted #000; }  

Latest revision as of 01:24, 29 November 2018

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