Difference between revisions of "IOS focus movement"

From Level Access Web Labs
Jump to navigation Jump to search
Line 5: Line 5:
 
<style>
 
<style>
 
#overlayAbandonDiv { background-color:#000; color:yellow; padding:50px; position:absolute; top:195.5px; left:412.5px;}  
 
#overlayAbandonDiv { background-color:#000; color:yellow; padding:50px; position:absolute; top:195.5px; left:412.5px;}  
 +
#overlayAbandonDiv  h1 { color:yellow;;}
 
#va { display:none; }  
 
#va { display:none; }  
 
#abandonHead > span:focus { outline-color:#fff; }  
 
#abandonHead > span:focus { outline-color:#fff; }  

Revision as of 18:23, 4 December 2017


iOS/VoiceOver does not follow shallow focus targets

12/04/17

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.

Open Dialog

Testing

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.

Visual ARIA is an ARIA education and testing tool

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