Turning off read aloud text for Accesibility

1

Hi everyone,

This is a follow-up to my question about doing a multimedia project to be
hosted on an ipad. Because it’s with the government, it has to follow
accessibility guidelines.

In this case, for the visually impaired, the ipad (after turning the
‘Accessibility feature on) will read

out components on the screen to the viewer.

The ipad, when Accessibility is turned on, will read all the text shown on
my Tumult Hype screen. See screen capture.

However, in this case I only want ‘Back’ and ‘Next’ to be read aloud, plus a
line of invisible text (upper right corner) which simply describes the image (the mountain and
river) on the right to the visually impaired.

The problem is that the ipad will ALSO automatically read the 3 paragraphs
of text on the left. I especially don’t want that is I have an attached mp3 narration.
Ditto for ‘The National Park Service, Mount Rainier National Park’ sentence next to the logo which is annoyingly read out page after page.

If you notice in ‘Identity’ to the right, I have not selected the paragraphs
of text to be made into alternate text, or the ‘The National Park Service, Mount
Rainier National Park’ sentence. My only alt text is the invisible sentence describing the mountain and river.

So is there a way in Tumult Hype to prevent selected text blocks to NOT be
read aloud, even when Accessibility is turned on when using the ipad?

Hope this makes sense, and there’s a solution.

RH

Screen Shot 2017-01-04 at 1.54.18 PM.png1645×958 638 KB

2

The way to avoid VoiceOver from seeing an element is to add the aria-hidden="true" attribute to the element.

There’s two ways you could do this:

Run JavaScript based on a class name

  1. Add a class name to your elements that you do not want visited, like “axhidden” in the Identity Inspector
  2. On scene load, run javascript code that will set the aria-hidden attribute on these elements:
	var elementsToHide = document.getElementsByClassName("axhidden");
	for(var i = 0; i < elementsToHide.length; i++) {
		elementsToHide[i].setAttribute("aria-hidden", "true");
	}

Create a div in the inner html

  1. Select your element and choose ‘Edit > Edit Element’s Inner HTML’
  2. Surround the text in a div that has the aria-hidden="true" attribute, by placing this at the start:
<div aria-hidden="true">

And the close tag at the bottom:

</div>

Either method will work.

1 Like
3

Thanks! I used the 2nd method and it worked fine!

If I were to use the other way (Run Javascript…), how do I run the javascript code on scene load? I’ve no idea how to get into scene load.

RH

4

Glad that worked!

For future reference, running Javascript on Scene Load would entail:

  1. Go to the Scene Inspector, and click the “+” next to “On Scene load”
  2. When the action appears, choose “Run JavaScript…”
  3. Choose “New Function…” and then it will go to a source code editor; you could paste the code there.

There’s more info in the Actions section of the docs.

5

Cool! Thank you again! :slight_smile: