Reputation: 2106
Is there any way to tell an assistive tool to treat an element (e.g: <div>
) as a whole, and not split it in child elements?
Using iOS VoiceOver and a with a field on it, it gets splitted into two different elements:
This elements are splitted in two parts, where the best solution would be read "122 points" and "First position":
<div class="row">
<div class="stat lg col-xs-6">
<span>122</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Points</h5>
</div>
<div class="stat lg col-xs-6">
<span>1º</span>
<i class="icon icon-prize" aria-hidden="true"></i>
<h5>Position</h5>
</div>
</div>
Upvotes: 0
Views: 426
Reputation: 2106
I found that using role="button"
the element is treated as a group and its innerText property is read, but announced as a button.
Upvotes: 0
Reputation: 17435
VoiceOver on iOS does indeed sometimes split a sentence, although your example code actually works fine. I used your code as the first line in the screen shots below and then copied the text without the <a>
tag as the second line. The second line gets broken up by VoiceOver but the <a>
tag does not.
<span class="label info">
<a href="/round/next">
Next round starts <strong>in 3 days</strong>
</a>
</span>
<br>
Next round starts <strong>in 3 days</strong>
(Note: I have the enhanced outline turned on for VoiceOver so the black outline is probably thicker than what you're used to seeing.)
Upvotes: 1