Change html element accessibility text

Question

On a webpage I have a div

<div class="expand">+</div>

Tapping this div expands content.

I need to change what screen readers say when they encounter this element. I've been able to come close with:

<div class="expand" role="button" title="Tap to expand">+</div>

If you tap the button, the iPhone will say

Plus ... Button ... Tap to expand

Ideally it would just say "Button ... Tap to expand," or I could have complete control over what is said.

Additionally, tapping changes the content and the title to "Tap to hide." The element is focused immediatley and the new content is read, but for some reason the title is not included this time:

Hyphen ... Button

If you tap it again it will say the title.

Is there any way to control what is said by the screen reader when you tap an element? If not, is there any specific rule that prevents the title from being read in the second case?

Answer 1

Suggestions from http://alxgbsn.co.uk/2011/06/06/making-web-content-more-accessible-with-ios-voiceover/ made this possible.

<div class="hide" id="tap-show">tap to expand</div>
<div class="hide" id="tap-hide">tap to hide</div>
<!-- repeat -->
<div class="expand" role="button" aria-labelledby="tap-show"></div>

You can use JavaScript to change aria-labelledby, which works.

It is important to note that the role=button is necessary and the <div> must be empty. It can contain at most whitespace. You can use a background image, or:

.expand:after { content: "+"; }

Answer 2

In general you should be very careful about controlling this text exactly. People using screen readers use many apps / sites, and get used to how things are read out. In the case of button text, VoiceOver will generally announce:

[Content of button]... Button... [title of button]

If this is specific to iOS then I think your initial example is good, as VoiceOver considers the title to be 'help text', which is why it's read last. Assuming you have quite a few of these, then brevity is good.

Hyphen doesn't mean much, but you could use − to get it to announce "minus", and update the title to "Tap to hide".

Something you might consider including as hidden text is what it is that will be shown. Perhaps in your interface it is obvious visually and from a screen reader point of view, but in general it would be useful to know what is going to be shown.

You could hide some text, for example:

<div ...>+<span class="hidden"> description of the content</div>

Then move the .hidden off-screen with CSS.