top

Text To Speech

Many Tizen users have different abilities that require them to interact with TV in different ways. These include users who have visual, physical or age-related limitations that prevent them from fully seeing or using a TV, and users with hearing loss who may not be able to perceive audible information and alerts. Samsung Smart TV for Tizen supports Accessibility Toolkit (ATK). With ATK, you can use TTS (Text to speech ) to support accessibility of your application.

Samsung Smart TV for Tizen will support ATK (Accessibility ToolKit) in Web Engine. You can use TTS (Text to speech) feature by focusing on contents you want to read.

Basic Usage

If user turns on “Accessibility” option for TTS in menu, TTS will read contents of HTML elements automatically.
TTS feature can be access using following sequence on remote controller:
“TV Menu” > “System” > “Accessibility” > “Voice Guide” > “On”

Note

Please note that if your TV doesn’t support Voice Guide function, you might not be able to find “Voice Guide” menu in your TV

You can use TTS feature by focusing on the element you want to read, this will only read the content inside the focused element (including child elements)

// Voice result : TTS Test
<div id="test"  tabindex="-1" > TTS  Test</div>
document.getElementById("test").focus();// javascript
// OR
$("#test").focus(); // jQuery
// Voice result : TTS Test, Second Element
<div id="test"  tabindex="-1" > 
  TTS  Test
  <div> Second Element. </div>
</div>
document.getElementById("test").focus();// javascript

The screen reader will ignore any element that is hidden (display: none). For more complex operations you need to use WAI-ARIA standard.

TTS Using WAI-ARIA

The WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) is a standard to support easy access to web content in web applications. The TV screen reader reads HTML elements in the following order:

  1. The actual element content is read first
  2. Other attributes than role and aria-label
  3. role attribute
  4. aria-label attribute
Aria Tag Works on TV
aria-label Yes
aria-labelledby Yes
aria-hidden Yes
aria-describedby To Be Updated
aria-live To Be Updated
aria-atomic To Be Updated
aria-relevant No
aria-setsize No
aria-posinset No
aria-flowto No
Note

Support for aria tag will be expanded on Samsung Smart TV.

aria-label

Defines a string value that labels the current element. The purpose of aria-label is the same as that of aria-labelledby. It provides the user with a recognizable name of the object

[Structure]
aria-label = “This can have any text.”

// Voice result : Aria Test, menuitem, this is the aria label
<div id="test" role="menuitem"  tabindex="-1" aria-label="This is the aria label." >
  Aria Test
</div>

document.getElementById("test").focus(); // javascript

aria-labelledby

Identifies the element (or elements) that labels the current element.
The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable name of the object.

[Structure]
aria-labelledby = “ID_OF_THE_LABEL_ELEMENT”

// Voice result : Aria Test, menuitem , This is the Label

<div id="test" tabindex="1" role="menuitem" aria-labelledby="menuText" > Aria Test </div>

<div id="menuText" > This is the Label </div>
document.getElementById("test").focus(); // javascript

Multiple labels separated by a white space can be used at the same time.

// Voice result : Aria Test , menuitem , This is the, Label,Second label

<div id="test" tabindex="1" role="menuitem" aria-labelledby="menuText anotherText" > 
   Aria Test
</div>

<div id="menuText"  > This is the Label </div>
<div id="anotherText" > Second label </div>
document.getElementById("test").focus(); // javascript

aria-hidden

Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author. If this attribute is set to “true”, the content and the aria attributes of the element are ignored.

  • Aria enabled
// Voice result : Play, button, This is the button description.

<div id="play" role="button"  tabindex="-1">
  <div>Play </div>
  <div aria-hidden="true" aria-label="This is the Button description."> </div>
</div>
document.getElementById("test").focus(); // javascript
  • Aria disabled
// Voice result : Play, button

<div id="play" role="button"   tabindex="-1">
  <div>Play </div>
  <div aria-hidden="true" aria-label="This is the Button description."> </div>
</div>
document.getElementById("test").focus(); // javascript
Note

You can use the following code to disable all items using aria-hidden attribute

      $("[aria-hidden='false']").attr("aria-hidden", "true"); // jQuery

Role Attribute

The role attribute notifies the screen reader that the element has additional information to be presented to the user (arial-label, arial-labelledby, etc…); “Button” and “menuitem” are some examples of these roles, for a full list of available roles check the following information
https://www.w3.org/TR/wai-aria/roles#role_definitions_header

If the element doesn’t have the “role" attribute, only the text of the inner child’s is used. (Not the aria-label, only the parent aria-label is used).

// Voice result : Play, Section

<div id="play" tabindex="-1">
  <div aria-label="This is the Button description."> Play </div>        
</div>

If the element has the “role" attribute, only the text of the aria-label is used. (If there is no aria label, the element text is used).

// Voice result : This is the button description, Play, button

<div id="play" role="button"  tabindex="-1">
  <div aria-label="This is the Button description."> Some text. </div>
<div> Play </div>  

If the element doesn’t have the “role” attribute and there is no text inside any child element, the aria-label of the inner child is used. (Otherwise, only the text is used).

  • No Child elements
// Voice result : This is the button description, Second Text, Section

<div id="play" tabindex="-1">
  <div aria-label="This is the Button description."> </div>     
  <div aria-label="Second Text."> </div>
  • Child elements
// Voice result : Some Text, Section

<div id="play" tabindex="-1">
  <div aria-label="This is the Button description."> </div>     
  <div aria-label="Second Text."> </div>   

Voice Guide status

Basically, when using ARIA, you don’t need to care about ‘Voice guide’ menu status as Web Engine will read automatically depending on the menu status. But, if you need to check ‘Voice guide’ menu status for certain purpose, there is API for that.

// TTS eabled true/false)
// true : Voice Guide ON
// false : Voice Guide OFF

    webapis.tvinfo.getMenuValue(webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY);   

A Voice Guide status listener is also available on Tizen Platform.

var listenerId = '';
var onChange = function() {
    
    //Get Status true/false
    webapis.tvinfo.getMenuValue(webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY);
};

try {

listenerId = webapis.tvinfo.addCaptionChangeListener(webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY, onChange);
console.log("listener id = " + listenerId);

} catch (error) {

console.log(" error code = " , error);

}

Known Issues

Non-Focusable Items

Some HTML elements like tag can’t be focused. Sometimes you may need to read contents in these kinds of HTML element. In this case, you need to use tabindex attribute to make the element focusable.

// Voice result : Aria Test , menuitem , this is the aria label
<div id="test" tabindex="-1" role="menuitem" aria-label ="this is the aria label">
  Aria Test
</div>
document.getElementById("test").focus(); // javascript
Note

Any element with the value “-1” on the tabindex attribute can’t be focused using the TAB key. TV remote controller doesn’t have “Tab” key, so in TV application, tabindex is not for tab-navigation. It is just used to make HTML element focusable.

Element Type

Tizen reader flows in the following order
Element Content -> role attribute content -> aria-label or aria-labelledby Content

If role is not specified, the element type is going to be used instead.

// Voice result : Aria Test, section, this is the aria label
<div id="test"  tabindex="1" aria-label ="this is the aria label" > Aria Test</div>
document.getElementById("test").focus(); // javascript
// Voice result : Aria Test, link, this is the aria label
<a id="test"  href="#"   tabindex="1"  aria-label ="this is the aria label" > Aria Test</a>

document.getElementById("test").focus(); // javascript
Element Result
div “Aria Test , section , This is the Label"
a “Aria Test , Link , This is the Label"
ul “Aria Test , List , This is the Label"
li “Aria Test , This is the Label" (ignored)
h3 “Aria Test , This is the Label" (ignored)
article “Aria Test , Article , This is the Label"
section “Aria Test , Panel , This is the Label"

Examples

Simple Popup

// Voice result : Error message Title, Lorem ipsum dolor sit amet, 
//                        consectetur adipisicing elit, button text, Select to close

<div id="popup" class="popup">
  <div id="popupTitle" class="title">
    Error Message title
  </div>
  <div id="pupupText" class="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
  <div id="pupupButton" role="button" tabindex="-1" class="button">
    <div aria-labelledby="popupTitle pupupText"></div>
    <div class="">Button Text</div>
    <div aria-label=", select to close."></div>
  </div>
</div>
document.getElementById("test").focus(); // javascript

Sample Code

For using TTS using WAI-ARIA sample code

References

Text to speech (TTS)