0

I am doing web accessibility work now. But when I use the voiceover in iOS11, I find that the focus is not good. There was no problem before that.

See the example below.

<a href="#test">skip</a>
[focus O]
1) <div id="test" tabindex="-1">test1</div>
2) <div id="test" tabindex="-1"><span>test1</span></div>
3) <div id="test" tabindex="-1"><img src="url" alt="test"></div>

[focus X]
1) <div id="test" tabindex="-1">test1<img src="url" alt="test"></div>
2) <div id="test" tabindex="-1">test1<span>test2</span></div>

It seems that if there are more than two elements in an element, it does not.

What is the reason for this?

Is there any solution?

user1920486
  • 21
  • 4

1 Answers1

0

Trying to understand your question. I'm not sure what your "focus O" and "focus X" are supposed to mean. I think "O" was the good example and "X" was the bad example.

VoiceOver will navigate to each element in the DOM, so in your "X" examples, VO will stop on the <div>test1<div> and will then stop on the embedded <img>. In the second example, VO will stop on the <div>test1<div> and will then stop on the embedded <span>.

If you want to change this behavior, you can add role="text" to the <div>, so your "X" examples would be:

<div id="test" tabindex="-1" role="text">test1<img src="url" alt="test"></div>
<div id="test" tabindex="-1" role="text">test1<span>test2</span></div>

That will cause the entire <div> to be one focus area and will read all the text as one. However, that will also lose the image role. You'll hear the alt text of the image but you won't hear the image role announced.

slugolicious
  • 15,824
  • 2
  • 29
  • 43
  • For example, skip navi contains many elements in the target, and role = "text" is not a good idea... Voiceover works very differently from other browsers, and I wonder if it is a bug or is it normal? – user1920486 Jul 19 '18 at 04:11
  • Can you explain why it’s not a good idea? Personal opinion or based on some references? – slugolicious Jul 19 '18 at 20:40
  • In general, an element that moves to an in-page anchor contains many sub-elements. However, if it set role = "text", it can not access child elements. So that's what I'm talking about. – user1920486 Jul 20 '18 at 03:01
  • then i misinterpreted your original question. it sounded like you wanted the entire `
    ` to be treated as one object and not access the child elements, but your last comment sounds like you **do** want to access the child elements?
     – slugolicious Jul 20 '18 at 17:15
  • My English is bad. I'm sorry. On iOS10, the focus was on a div with a tabindex of -1. However, the focus is not on iOS11. And if this is a bug, I asked for a solution. – user1920486 Jul 22 '18 at 01:51
  • Are you saying that `tabindex` is affecting navigating with iOS voiceover? Swiping left/right with VO walks the DOM and should ignore `tabindex`. If you want to group multiple objects together as one then you can use the aforementioned `role=“text”`. – slugolicious Jul 23 '18 at 13:36