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>
I found that using role="button"
the element is treated as a group and its innerText property is read, but announced as a button.