This topic describes how you can optimize your application for the Samsung device text-to-speech (TTS) voice guide feature. The TTS feature is helpful for users with visual limitations, since they can have difficulty using textual on-screen device features.
Accessible Rich Internet Applications (WAI-ARIA)
Samsung devices support the accessibility toolkit (ATK) as part of the Web engine. If the user has activated the voice guide feature, the text-to-speech (TTS) engine can read HTML elements on the application screen.
Note Not all Samsung device models support the voice guide feature.
Not all Samsung device models support the voice guide feature.
To test the voice guide feature:
On the device, select "Menu > System > Accessibility > Voice Guide > On".
Use the remote control to move focus to an application screen element. The voice guide reads the content inside the focused HTML element, including its child elements. For example:
In the following example, the voice guide says: "TTS Test".
<div id="test" tabindex="-1" >TTS Test</div>
document.getElementById("test").focus(); // javascript // OR $("#test").focus(); // jQuery
In the following example, the voice guide says: "TTS Test, Second Element".
<div id="test" tabindex="-1" > TTS Test <div> Second Element.</div> </div>
document.getElementById("test").focus(); // javascript
The voice guide ignores elements hidden using the display: none property.
display: none
You can support more complex voice guide functionality by implementing roles and descriptions based on the WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) standard for Web content accessibility.
By default, the voice guide reads content in the focused HTML element in the following order:
If an HTML element does not have a defined name or label, the Web engine can calculate a name from the element content, if the defined role supports it. Only some roles support calculating a name from content.
The following examples show how an HTML element can be assigned a name from its content:
div
<div id="thumb:0" class="homeThumb" tabindex="2000" style="cursor: pointer;"> <div class="thumbImage"><img id="thumb:img:0" src="http://network.wwe.com/assets/images/1/7/8/263558178/cuts/215x121/cut.jpg" class="thumbImage"></div> <div class="thumbRule"></div> <div class="thumbTitle">FEATURED</div> <!--%--> </div>
<div id="thumb:0" class="homeThumb" tabindex="2000" style="cursor: pointer;" role="button"> <div class="thumbImage"><img id="thumb:img:0" src="http://network.wwe.com/assets/images/1/7/8/263558178/cuts/215x121/cut.jpg" class="thumbImage"></div> <div class="thumbRule"></div> <div class="thumbTitle">FEATURED</div> <!--%--> </div>
role
role=""
<div id="thumb:0" class="homeThumb" tabindex="2000" style="cursor: pointer;" role=""> <div class="thumbImage"><img id="thumb:img:0" src="http://network.wwe.com/assets/images/1/7/8/263558178/cuts/215x121/cut.jpg" class="thumbImage"></div> <div class="thumbRule"></div> <div class="thumbTitle">FEATURED</div> <!--%--> </div>
Some HTML elements cannot be focused. To make the element focusable, implement the tabindex attribute:
tabindex
In the following example, the voice guide says: "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>
Note If you assign the value "-1" to the tabindex attribute, the element can only be focused using JavaScript, and not with the "Tab" key. If you want to implement sequential navigation with the "Tab" key, the tabindex attribute must have a positive value. Since there is no "Tab" key on a remote control, you must consider how to implement focus movement.
If you assign the value "-1" to the tabindex attribute, the element can only be focused using JavaScript, and not with the "Tab" key. If you want to implement sequential navigation with the "Tab" key, the tabindex attribute must have a positive value. Since there is no "Tab" key on a remote control, you must consider how to implement focus movement.
The following popup window uses the tabindex attribute to make the button focusable with JavaScript. When the button in the popup has focus, the voice guide says: "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="popupText" class="text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </div> <div id="popupButton" role="button" tabindex="-1" class="button"> <div aria-labelledby="popupTitle popupText"></div> <div class="">Button Text</div> <div aria-label=", select to close."></div> </div> </div>
document.getElementById("popupButton").focus(); // javascript
Figure 1. Popup window
In general, you do not need to implement additional code to handle enabling and disabling the voice guide in your application, since it is handled with the device menu setting. However, you can check whether the voice guide is enabled.
To check whether the voice guide is enabled, use the getMenuValue() method with the TvInfoMenuKey.VOICE_GUIDE_KEY property:
getMenuValue()
TvInfoMenuKey.VOICE_GUIDE_KEY
// Returns "true" if voice guide is enabled webapis.tvinfo.getMenuValue(webapis.tvinfo.TvInfoMenuKey.VOICE_GUIDE_KEY);
To be notified when the voice guide is switched on or off:
var listenerId = ''; var onChange = function() { // Gets true or false status 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); }
This section describes the support for various ARIA role attributes and their behavior, as implemented in NVDA for Windows® computers and on Tizen. The behavior descriptions are based on the example scenarios provided.
For the complete list of roles, see Definition of Roles.
Note Since landmark navigation is not supported on Samsung devices, the following roles are not supported: banner complementary contentinfo form main navigation region search
Since landmark navigation is not supported on Samsung devices, the following roles are not supported:
alert Example scenario: Alert Example
alertdialog Example scenario: Using WAI-ARIA role="alertdialog" to Identify Errors
application Example scenario: Example 1 - Alert role example using an ARIA alert box
article Example scenario: Recommended Restaurants
button Example scenario: Button Examples
checkbox Example scenario: Checkbox Example (Mixed-State)
combobox Example scenario: Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete Example
dialog Example scenario: Modal Dialog Example
grid
img Example scenario:
<div class="sprite card_icons amex" tabindex="0" role="img" aria-label="American Express"></div>
link Example scenario: ARIA Example: link role
list and listitem Example scenario:
<div class="list" role="list"> <div tabindex="0" role="listitem">first item</div> <div tabindex="0" role="listitem">second item</div> <div tabindex="0" role="listitem">third item</div> </div>
listbox Example scenario: Listbox Example
aria-activedescendant
listbox
log Example scenario: Live Regions
marquee No information.
math Example scenario:
<div tabindex="0" role="math" aria-label="6 divided by 4 equals 1.5"> \frac{6}{4}=1.5 </div>
aria-label
menu, menubar, and menuitem Example scenario: Navigation Menubar Example
menu
menubar
menuitemcheckbox and menuitemradio Example scenario: Editor Menubar Example
none and presentation Example scenario:
<div> <p role="none"> This is paragraph text. Role of "none" is set on this text. </p> </div>
note Not supported.
option Example scenario: Listbox Example
progressbar Example scenario: Example - Progressbar
radio and radiogroup Example scenario: ARIA radiogroup and radio Example
radiogroup
row, rowgroup, columnheader, and rowheader Example scenario: Layout Grid Examples
scrollbar Example scenario: Scrollable Listbox Example
searchbox Not supported.
slider Example scenario: Slider Examples with aria-orientation and aria-valuetext
aria-valuetext
spinbutton Example scenario: Example 33 - Spinbutton using IMG elements for buttons
status No information.
switch Example scenario: ARIA Switch Demo
tab, tablist, and tabpanel Example scenario: Example 34 - Tab Panel
table and cell Example scenario: NVDA Practice: Tables
textbox Example scenario: ARIA Textbox
term Not supported.
timer No information.
toolbar Example scenario: Toolbar Example
tooltip Example scenario: Example - Tooltip
tree, treegrid, and treeitem Example scenario: Example - Treeview
This section describes the support for various ARIA state and property attributes and their behavior, as implemented in JAWS for Windows® computers and on Tizen. The behavior descriptions are based on the example scenarios provided.
aria-activedescendant Example scenario: Radio Group Example Using aria-activedescendant
aria-atomic Example scenario: Example 23 - Live Region
aria-autocomplete Example scenario: Example - Combobox with aria-autocomplete="inline"
aria-busy Example scenario:
<script> var isBusy = 1; function update1() { if (isBusy == 1) { isBusy = 0; document.getElementById("test").setAttribute("aria-busy","false"); document.getElementById("updateBusyButton").innerHTML="Update aria-busy tag, current is false"; } else { isBusy = 1; document.getElementById("test").setAttribute("aria-busy","true"); document.getElementById("updateBusyButton").innerHTML="Update aria-busy tag, current is true"; } } var numFlag = 1; function update2() { numFlag = numFlag + 1; document.getElementById("num").innerHTML=numFlag; } </script> <div id="test" tabindex="0" aria-busy="true" role="" aria-live="polite"> Test aria-busy, if aria-busy is true, content changes are not read <div id="num"> 1 </div> </div> <button id="updateBusyButton" onclick="update1();">Update aria-busy tag, current is true</button> <button id="updateContentButton" onclick="update2();">Update test target content</button>
aria-busy
true
false
aria-checked Example scenario: Example 5 - Checkboxes using IMG elements for visual state
aria-controls Example scenario: Example 21 - Hide/Show: Region does not follow button
aria-current Example scenario: Breadcrumb Example
aria-describedby Example scenario:
<li id="li1"> Check out the video report for last year's <a href="festival.htm" aria-describedby="li1">National Folk Festival</a>. </li>
aria-labelledby
aria-disabled Example scenario: Attribute: aria-disabled
aria-expanded Example scenario: Example 22 - Hide/Show: Region is exclusive
aria-flowto Example scenario: Using aria-flowto to give users a choice of reading order
aria-grabbed Example scenario: Example 16 - Drag and Drop
aria-haspopup Example scenario: Simple dropdowns
aria-hidden Example scenario:
<html> <body onload="focusdiv()"> <div id="test" tabindex="0" role=""> <div aria-hidden="true"> on </div> <div> off <div>child</div> </div> </div> <script> function focusdiv() { document.getElementById("test").focus() } </script> </body> </html>
aria-invalid Example scenario: Forms: Using aria-invalid to identify failed fields
aria-label Example scenario:
<html> <button aria-label="Close">X</button> </html>
aria-labelledby Example scenario:
<html> <div id="billing">Billing Address</div> <div> <div id="name">Name</div> <input type="text" aria-labelledby="billing name"/> </div> <div> <div id="address">Address</div> <input type="text" aria-labelledby="billing address"/> </div> </html>
aria-level Example scenario:
<button role="heading" aria-level="1">text</button>
aria-live Example scenario: Alert Example
aria-multiline Not supported.
aria-multiselectable Example scenario: ARIA Multiselectable Listbox Example
aria-orientation Example scenario: Slider Examples with aria-orientation and aria-valuetext
aria-owns Example scenario:
<div class="example"> <div role="list"> <div role="listitem" tabindex="0" aria-owns="fruit">Fruit</div> <div role="listitem" tabindex="0">Vegetables</div> </div> <div role="list" id="fruit" tabindex="0"> <div role="listitem" tabindex="0">Apples</div> <div role="listitem" tabindex="0">Bananas</div> </div> </div>
aria-posinset Example scenario:
<h2 id="label_fruit"> Available Fruit </h2> <ul role="listbox" aria-labelledby="label_fruit"> <li role="option" aria-setsize="16" aria-posinset="5" tabindex="0">apples</li> <li role="option" aria-setsize="16" aria-posinset="6" tabindex="0">bananas</li> <li role="option" aria-setsize="16" aria-posinset="7" tabindex="0">cantaloupes</li> <li role="option" aria-setsize="16" aria-posinset="19" tabindex="0">dates</li> </ul>
aria-pressed Example scenario: Example 3 - Button role example using text-only buttons
aria-readonly Example scenario:
<h2>Input text field and textarea with the aria-readonly="true" attribute.</h2> <div> <label for="textField3">First Name</label><br> <input type="text" id="textField3" value="Unknown" aria-readonly="true"></input> </div>
aria-relevant Example scenario: Example 23 - Live Region
aria-required Example scenario: Example 40 - Tooltip: ARIA CSS selectors
aria-selected Example scenario: Example 34 - Tab Panel
aria-setsize Example scenario:
aria-sort Example scenario: Data Grid Examples
aria-valuemax and aria-valuemin Not supported.
aria-valuenow and aria-valuetext Example scenario: Slider Examples with aria-orientation and aria-valuetext
aria-valuenow