Search code examples
accessibilitywai-ariascreen-readers

ARIA: Treat HTML element as a whole


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?

First example

Using iOS VoiceOver and a with a field on it, it gets splitted into two different elements:

Screen shot of a control showing focus on just one part of the text.

Second example

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>

Screen shot of a control showing focus on just one part of the text.


Solution

  • I found that using role="button" the element is treated as a group and its innerText property is read, but announced as a button.