Difference between revisions of "SVG Element/buttonWithSvgInside/"

From Level Access Web Labs
Jump to navigation Jump to search
(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: -...")
 
Line 1: Line 1:
<section>
+
<html lang="en"><head data-la-initdispnone="true">
 +
    <meta charset="UTF-8" data-la-initdispnone="true">
 +
    <title data-la-initdispnone="true">Button with SVG inside</title>
 +
    <style data-la-initdispnone="true">
 +
      #content { width:960px; margin:auto; }
 +
    </style>
 +
  <script src="chrome-extension://ojiighldhdmahfdnhfdebnpmlbiemdfm/AccessEngine.js" data-la-injected="levelaccess-engine"></script><script src="chrome-extension://ojiighldhdmahfdnhfdebnpmlbiemdfm/LevelAccess-AST.js" data-la-injected="levelaccess-ast-js"></script><link rel="stylesheet" href="chrome-extension://ojiighldhdmahfdnhfdebnpmlbiemdfm/LevelAccess-AST.css" data-la-injected="levelaccess-ast-css" data-la-initdispnone="true"><script src="chrome-extension://ojiighldhdmahfdnhfdebnpmlbiemdfm/LevelAccess-Macro.js" data-la-injected="levelaccess-macro-recorder"></script></head>
 +
  <body>
 +
    <section id="content">
  
 
<style data-la-initdispnone="true">
 
<style data-la-initdispnone="true">
Line 55: Line 63:
  
 
     </section>
 
     </section>
 +
 
 +
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'a2plcpnl0694'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src="https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js"></script>
 +
 +
<div id="level-access-access-assistant-highlight-container"></div></body></html>

Revision as of 01:23, 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