IOS focus movement

From Level Access Web Labs
Revision as of 18:15, 4 December 2017 by Clane (talk | contribs) (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; }...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

<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


       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);