Difference between revisions of "IOS focus movement"

From Level Access Web Labs
Jump to navigation Jump to search
(Created page with " <section id="example"> <style> #overlayAbandonDiv { background-color:#000; color:yellow; padding:50px; position:absolute; top:195.5px; left:412.5px;} #va { display:none; }...")
Line 121: Line 121:

Revision as of 18:16, 4 December 2017

<section id="example"> <style>

  1. overlayAbandonDiv { background-color:#000; color:yellow; padding:50px; position:absolute; top:195.5px; left:412.5px;}
  2. va { display:none; }
  3. abandonHead > span:focus { outline-color:#fff; }

table { border-collapse:collapse; } table, tr, th, td { border:1px solid #000; } th, td { padding:5px; } td { vertical-align:top; text-align:left; }

  1. close { display:block; }


<section id="example">

iOS/VoiceOver does not follow shallow focus targets


Generally speaking iOS/VoiceOver does not follow shallow focus targets. Since around iOS 10, it appears that when focus is not moved directly to text, VoiceOver does not follow it, such as the case when moving focus to the outer container of a deeply nested structure.

My recommendation is to move focus closest to the text you want the user to hear as seen in the example below.

<a id="trigger" href="#">Open Dialog</a>


<section id="testing`">


<tbody> </tbody>
OS Browser Screen Reader Results
iOS 11.2 Safari VoiceOver VoiceOver announces desired text and the virtual cursor can access all of the dialog's content.

</section> <script> var trigger = document.getElementById('trigger'); document.querySelector('#abandonHead span').setAttribute('tabindex','-1'); trigger.addEventListener('click', function(e){

   document.querySelector('#overlayAbandonDiv').setAttribute('style', 'display:block;'); 

document.querySelector('#abandonHead span').focus(); });

var closeButton = document.getElementById('close'); closeButton.addEventListener('click', function(e){

   document.querySelector('#overlayAbandonDiv').setAttribute('style', 'display:none;'); 





<button id="ariaButton">Run Visual ARIA</button>

Visual ARIA is an ARIA education and testing tool

For more see http://whatsock.com/training/matrices/visual-aria.htm


       function runVisualARIA (){
           var a=document.createElement('script');
       var visualAriaButton = document.getElementById('ariaButton');
       //visualAriaButton.addEventListener('click', runVisualARIA(), false);             
       //visualAriaButton.addEventListener('click', function(){ alert('test')}, false);             
       visualAriaButton.addEventListener('click', function(){ runVisualARIA(); }, false);