Accessibility for Roku

You can make a Roku app accessible, so that when the Audio Guide is enabled, the screen contents are read aloud.

This topic provides information specific to Roku. Start with Accessibility to learn how accessibility works in You.i React Native.

See Roku’s developer documentation on Text to Speech to learn more.

Supported functionality

Roku apps built with You.i Roku Cloud support starting and stopping the screen reader based on the element that currently has navigation focus.

It’s important to understand that accessibility works differently on Roku. Because Roku does not support Accessibility focus, You.i React Native accessibility for Roku relies exclusively on our Navigation focus system. Once the Audio Guide is active, users simply focus on screen elements by navigating using remote control input, and the accessibility information for the currently focused element is automatically read aloud, regardless of whether the element is marked as accessible. The only automatic way to trigger an announcement for an element is by navigating to it. For example, a button’s label is announced when a user navigates to it, but if the label changes after the button has been pressed, the new label is not announced. This also means that dynamic updates do not trigger announcements. To manually trigger an announcement, use the announceText method from the Cloud Module API.

The mapping of accessibility functions to remote control input depends on the remote control model; consult Roku’s documentation for details.

We support:

• pausing and resuming the screen reader
• switching the screen reader voice
• changing the speech rate
• changing the speech volume
• screen reader announcements for the activity indicator (see Customizing the Wait Screen and Activity Indicator)

The following functionality is not supported:

• reading the entire screen. For example, it’s not possible to have the Audio Guide read out the description section of a PDP page once it has loaded.
• screen reading within the Roku native video player. Roku does not support accessibility for its video player.
• the AccessibilityInfo module methods setAccessibilityFocus and announceForAccessibility, due to the lack of support for Accessibility focus. See also AccessibilityInfo in the Facebook RN docs.

Accessibility for list headers

Lists in Roku do not have the concept of list headers built into them, so the approach to indicate context for a given list to a user who’s dependent on accessibility is different on Roku than for other platforms. We suggest setting the desired context string as accessibility attributes on the list view itself. Typically, you’d set this context string to the list header string or some similar value. The suggested attribute to set is the list’s AccessibilityLabel or AccessibilityHint. This scenario would be most common in a list of lists where child list views have headers. In this case, the child list views would be the views where you’d set these accessibility attributes.

RN Example:

<ListRef
  name="List-Horizontal"
  data={this.props.assets}
  renderItem={this.renderItem}
  keyExtractor={(item, index) => this.props.assets[index]}
  horizontal={true}
  accessible={Cloud.isCloudServer ? true : {}}
  accessibilityHint={Cloud.isCloudServer ? "Popular Movies" : {}}
  ref = {(ref) => {
    Cloud.isCloudServer ? this.list = ref : {}}
  }
  onCompositionDidLoad={() => {
    if (Cloud.isCloudServer)
    {
      FocusManager.enableFocus(this.list);
      FocusManager.setNextFocus(this.list, this.list, "right");
    }
  }}
/>

C++ Example:

//pListView is my list which has a list header that I want to announce. It's a child list in my list of lists.
CYIString myListHeaderString = "Popular Movies";
std::unique_ptr<CYIAccessibilityAttributes> pAttributes = std::make_unique<CYIAccessibilityAttributes>();
pAttributes->SetHint(myListHeaderString);
pListView->SetAccessibilityAttributes(std::move(pAttributes));

Supported accessibility settings

When the Audio Guide is active, You.i React Native apps for Roku automatically respect the TV’s current accessibility settings.

Limitations

We’re aware of the following limitations for accessible Roku apps built with You.i React Native:

• After the Roku device returns from sleep mode, the Roku Audio Guide may announce text for elements that are not configured as accessible.

• The Audio Guide may temporarily stop making announcements and then make multiple announcements at the same time, due to a caching issue.

• Announcements are not made for text in password fields.

• If there’s a space between an accessibility attribute value and the surrounding quotation marks, the Audio Guide announces the text incorrectly.

For example, for the following accessibility attributes:

   Label: "Big Buck Bunny"
   State: "Expanded"
   Role: "Button"
   Hint: "Press to play video"

The Audio Guide announces: “Big Buck Bunny Expanded {pause} Button {pause} Press to play video” rather than “Big Buck Bunny {pause} Expanded {pause} Button {pause} Press to play video”. Make sure to format your accessibility labels without trailing spaces.