Hi, I'm a web developer and I'm developing in the Safari (WebKit) environment.
I've been using role="text" for VoiceOver focus behavior on iPhone & iPad, but have noticed that it hasn't been working properly since iOS v17.2
I learned that role="text" is a deprecated practice and was eventually removed from the ARIA specification.
Until then, we were using role="text" to merge HTML text focuses into one.
I know that for form, button elements, I can use the HTML button tag or role="button" or something like that to tie the focus together.
However, I need something to bind text elements that are not feature elements.
You may be familiar with the phenomenon of breaking the focus area of a text element in VoiceOver.
The HTML structure below illustrates the case where the focus is split.
For example, we want to announce id="text-box" with a single focus. This could be accomplished using role="text" until iOS v17.2.
Announce: “This is a one-month history of data. Measured numbers may vary from actual.”
<div id=“text-box” role=“text”>
<div>This is a <strong>one-month</strong> history of data.</div>
<div>Measured numbers may vary from <span>actual.</span></div>
</div>
However, starting with iOS v17.2, text will be fragmented and focused in the following order.
1. “This is a”
2. “one-month”
3. “history of data.”
4. “Measured numbers may vary from”
5. “actual.”
The strong and span tags are a necessary part of semantic markup, but in a mobile VoiceOver environment, they create an unnecessary break in focus.
Do you have any plans to provide an alternative in the future?
Alternatively, if you have any guidance on how to bind focus to text elements, I would appreciate it.
Thank you for your hard work.
Comments
Front end web developer checking in
Are there any official replies to this?
@Kim Dunagan
Hi, I reported the same issue to Webkit Bugzilla and got a reply that they will revert the patch that caused the problem.
Issue resolved
This issue has been confirmed fixed in 17.4.