无法在移动Safari中为带有子项的tabindexed元素设置focus（）？

Question

As part of some a11y work I've been doing recently on an one page app, I've added code that calls focus() on the header of a page whenever a new page loads. This works great on desktop, and gets read out correctly by a screenreader, but completely fails with VoiceOver in mobile Safari.

After hours of debugging and Googling, I discovered that it seems to fail when trying to focus on an element (that is normally not-focusable) with children.

Example code:

<div id="header1" tabindex="-1">Hello world</div>
<div id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>

Then enable VoiceOver in Safari, and try to call:

document.getElementById('header1').focus();

And notice that it gets read, but that

document.getElementById('header2').focus();

does absolutely nothing, which seems like completely broken behavior to me. Am I doing something fundamentally wrong, or is this a known issue, and is there any way around this without having to resort to focusing on elements without children?

Answer 1

That does sound messed up. You can try two different things:

1. add a tabindex="-1" to the inner <span> . I doubt that will do anything but perhaps the non-focusable nature of the inner element is affecting the parent element.

2. use the undocumented role="text" on the outer <div> . That will cause the entire <div> to be treated as one element instead of treating the inner element as a separate VoiceOver "tab stop". This probably has a better chance at fixing the problem.

<div role="text" id="header2" tabindex="-1">Goodbye <span>cruel cruel</span> world</div>