Javier Marín
Javier Marín

Reputation: 2106

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.

Upvotes: 0

Views: 426

Answers (2)

Javier Mar&#237;n
Javier Mar&#237;n

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

slugolicious
slugolicious

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.)

enter image description here

Upvotes: 1

Related Questions