SVG Element/buttonWithSvgInside/

From Level Access Web Labs
Revision as of 01:23, 29 November 2018 by Clane (talk | contribs) (Created page with "<section> <style data-la-initdispnone="true"> .visuallyHidden { position: absolute; border: 0; clip: rect(0,0,0,0); height: 1px; width: 1px; margin: -...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

<section>

<style data-la-initdispnone="true"> .visuallyHidden {

   position: absolute;
   border: 0;
   clip: rect(0,0,0,0);
   height: 1px;
   width: 1px;
   margin: -1px;
   padding: 0!important;
   overflow: hidden;
   opacity: 0;

}

  1. content { font-size: 3rem; }

button { width:200px; height:200px;}

  • focus { outline: 3px dotted #000; }

</style>

Button with SVG inside

<button type="button" aria-disabled="false" class=" _2ZJXcw3U _1WWWIjK6 _25NrlU0G">Open Popover

<svg width="10px" height="24px" class="_1gDwV8eC " cy="2.5" cx="12.5" r="2.5"><title>test Menu</title><circle cy="2.5" cx="5" r="2.5"></circle><circle cy="20.5" cx="5" r="2.5"></circle><circle cy="11.5" cx="5" r="2.5"></circle></svg>

</button>

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

<button aria-labelledby="svgTitle" type="button" aria-disabled="false"> <svg focusable="false" width="10px" height="24px" cy="2.5" cx="12.5" r="2.5"> <title id="svgTitle">test Menu opens popover</title> <circle cy="2.5" cx="5" r="2.5"></circle> <circle cy="20.5" cx="5" r="2.5"></circle> <circle cy="11.5" cx="5" r="2.5"></circle> </svg>

</button>

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


   </section>