Difference between revisions of "IOS focus movement"

From Level Access Web Labs
Jump to navigation Jump to search
 
(10 intermediate revisions by the same user not shown)
Line 1: Line 1:
  
  
 
+
<HTML>
 
<section id="example">
 
<section id="example">
 
<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:50px; left:10px;}
 +
#overlayAbandonDiv h1 { color:yellow;}
 +
#overlayAbandonDiv h1 span:focus { outline:5px dotted #fff; }  
 
#va { display:none; }  
 
#va { display:none; }  
 
#abandonHead > span:focus { outline-color:#fff; }  
 
#abandonHead > span:focus { outline-color:#fff; }  
Line 17: Line 19:
  
 
<h1>iOS/VoiceOver does not follow shallow focus targets</h1>
 
<h1>iOS/VoiceOver does not follow shallow focus targets</h1>
<p>12/04/17</p>
 
 
 
<p>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.</p>
 
<p>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.</p>
  
<p>My recommendation is to move focus closest to the text you want the user to hear as seen in the example below.</p>
+
<p>One solution is to move focus close to the text you want the user to hear as seen in the example below.</p>
 
 
  
 +
<p>Activate the following link using iOS 10 + with VoiceOver</p>
 
<a id="trigger" href="#">Open Dialog</a>
 
<a id="trigger" href="#">Open Dialog</a>
  
Line 121: Line 121:
  
 
</script>
 
</script>
 +
</HTML>

Latest revision as of 18:41, 4 December 2017


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.

One solution is to move focus close to the text you want the user to hear as seen in the example below.

Activate the following link using iOS 10 + with VoiceOver

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