Text To Speech
This topic describes how you can optimize your application for the Samsung TV 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 TV features.
Related Info
Samsung TVs 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.
To support the voice guide feature in your app:
- You must set automatic focus to an HTML element when the app is launched.
- To achieve this, set HTML’s autofocus attribute on one of the app’s elements.
Example:
<button type="button" autofocus>Click Me!</button>
Referral link: https://www.w3schools.com/tags/att_autofocus.asp
To test the voice guide feature:
- On the TV, select "TV 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
- In the following example, the voice guide says: "TTS Test".
The voice guide ignores elements hidden using the display: none
property.
Implementing Roles and Descriptions
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:
-
Name
The element name and description are calculated using the rules defined in Accessible Name and Description Computation, although older Web engines do not follow the specification completely. -
Role
To inform the TTS engine that an HTML element has description information, define a role for the element using the ARIA role attributes. If an HTML element does not have a defined role attribute, the Web engine maps a role to it based on the W3C standard HTML Element Role Mappings. -
Description
Additional information to be read by the voice guide can be implemented using ARIA states and properties.
Inferring Names for HTML Elements
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 calculate a name from content
The following examples show how an HTML element can be assigned a name from its content:
-
In the following code, the outer
div
element does not have a role defined. The voice guide says: "Section".<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>
-
In the following code, the "button" role is defined for the outer
div
element. Since the "button" role supports name from content, the voice guide says: "Featured button".<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>
-
For compatibility with older TV Web engines that do not fully support the W3C specification, since Tizen 3.0, you can define an empty
role
attribute (role=""
). The voice guide calculates the element name from the content, and does not say a role name. In the following code, the voice guide says: "Featured".<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>
Making Elements Focusable
Some HTML elements cannot be focused. To make the element focusable, implement the tabindex
attribute:
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>
document.getElementById("test").focus(); // javascrip
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
Monitoring Voice Guide Status
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 TV 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:
// 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);
}
ARIA Role Attribute Support
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.
Since landmark navigation is not supported on Samsung TVs, the following roles are not supported:
-
alert
Example scenario: Alert ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Click "Trigger Alert".
An alert message appears. NVDA reads the alert message text.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Limited support. Do not use.
Tizen 2.4:- Not supported. The alert message is not read.
Table 1. "alert" attribute behavior
- Click "Trigger Alert".
-
alertdialog
Example scenario: Using WAI-ARIA role="alertdialog" to Identify ErrorsImplementation Behavior Reference NVDA in Google Chrome™:
Click "Trigger Alertdialog".- A dialog box appears, with focus on the "Save and Continue" button. NVDA reads the dialog box text.
Tizen Tizen 4.0: - Same behavior as the reference implementation, but the voice guide does not read the dialog box text. It only says: "Save and Continue button".
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Same behavior as on Tizen 4.0.
Table 2. "alertdialog" attribute behavior
-
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to the input field.
NVDA says: "Guess a number between 1 and 10, editable, blank".
Tizen Tizen 4.0: - Not supported. The voice guide says: "Guess a number between 1 and 10, entry, editable". Because there is no browsing mode, all standard input events go through to the Web application.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Not supported. The voice guide says: "Guess a number between 1 and 10, entry, press OK button to edit". Because there is no browsing mode, all standard input events go through to the Web application.
Table 3. "application" attribute behavior
- Move focus to the input field.
-
article
Example scenario: Recommended RestaurantsImplementation Behavior Reference NVDA in Google Chrome™: - To move focus to the next article, press the "Page Down" key.
- To move focus to the previous article, press the "Page Up" key.
- To move focus to the last focusable element in the feed, press "Ctrl+End".
- To move focus to the first focusable element in the feed, press "Ctrl+Home".
Tizen Tizen 4.0: - Not supported. The voice guide does not intercept key events or change the browsing mode.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Same behavior as on Tizen 4.0.
Table 4. "article" attribute behavior
-
button
Example scenario: Button ExamplesImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to "Print Page".
- NVDA says: "Print Page button".
- Move focus to "Mute".
- NVDA says: "Mute button, not pressed".
- Toggle the button state by pressing "Spacebar" or "Enter".
- NVDA reads the button state ("pressed" or "not pressed").
Tizen Tizen 4.0: - When "Print Page" has focus, the voice guide says: "Print Page button".
- When "Mute" has focus, the voice guide says: "Mute, off".
- When the button state is changed, the voice guide does not read the button state.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Same behavior as on Tizen 4.0.
Table 5. "button" attribute behavior
-
checkbox
Example scenario: Checkbox Example (Mixed-State)Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to the "Lettuce" checkbox.
- NVDA says: "Lettuce checkbox, not checked".
- Move focus to the "Tomato" checkbox.
- NVDA says: "Tomato checkbox, checked".
- Toggle the checkbox state by pressing "Spacebar" or "Enter".
- NVDA reads the checkbox state ("checked" or "not checked").
Tizen Tizen 4.0: - When the "Lettuce" checkbox has focus, the voice guide says: "Lettuce, not selected".
- When the "Tomato" checkbox has focus, the voice guide says: "Tomato, selected".
- When the checkbox state is changed, the voice guide does not read the checkbox state.
Tizen 3.0:- Not supported.
Tizen 2.4:- Same behavior as on Tizen 4.0.
Table 6. "checkbox" attribute behavior
-
combobox
Example scenario: Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to the "State" combo box.
- NVDA says: "State combo box, autocomplete, editable, blank".
- Press the "Down" arrow key.
- The drop-down list appears, with the first descendant activated. NVDA reads the active descendant and the edit box value: "Alabama, 1 of 56. State combobox, autocomplete, editable, Alabama".
Tizen Tizen 4.0: - When the "State" combo box has focus, the voice guide says: "State drop-down list, showing 0 item".
- When the drop-down list appears, the first descendant is activated, and the voice guide reads: "Alabama". Since sequential navigation with the "Tab" key is not supported on TVs, navigate between list items with the "Up" and "Down" arrow keys.
- To select an item from the list, click the remote control "Done" key, and use the "Left" or "Right" arrow key to move focus away from the combo box.
Tizen 3.0:- When the combo box has focus, the IME appears with focus. The voice guide reads the IME input.
Tizen 2.4:- When the "State" combo box has focus, the voice guide says: "State drop-down list, press OK button to open the menu". Instead of showing the drop-down list, clicking the remote control "OK" key opens the IME.
- Clicking the "Down" arrow key navigates out of the combo box.
- When focus is on the combo box open button, clicking "OK" shows the drop-down list and focus moves to the combo box. However, clicking any arrow key moves focus away from the combo box.
Table 7. "combobox" attribute behavior
-
dialog
Example scenario: Modal Dialog ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Click "Add Delivery Address".
A dialog box appears, with focus on the "Street" field. NVDA reads the dialog box title and the entry field title.
Tizen Tizen 4.0: - Same behavior as the reference implementation, but the voice guide does not read the dialog box title.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Same behavior as on Tizen 4.0.
Table 8. "dialog" attribute behavior
- Click "Add Delivery Address".
-
grid and grid-cell
Example scenario: Layout Grid ExamplesImplementation Behavior Reference NVDA in Google Chrome™: - In "Example 1: Simple List of Links", move focus to the first grid item.
NVDA says: "Related Documents, table with 1 row and 6 columns".
Tizen Tizen 4.0: - When a grid item has focus, the voice guide only reads the grid item content.
- To navigate within the grid, use the arrow keys. However, JavaScript consumes the arrow key events, so you must consider how to implement navigating away from the grid.
- Within the Web browser, navigation between grid items can have unintended behavior, such as focus moving twice when the arrow key is clicked once.
- Because
grid
is a composite UI element, and there is no "Tab" key on a remote control, you must consider how to implement focus movement to descendants.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Not supported. When a grid item has focus, the voice guide only reads the grid item content.
Table 9. "grid" and "gridcell" attribute behavior
- In "Example 1: Simple List of Links", move focus to the first grid item.
-
img
Example scenario:<div class="sprite card_icons amex" tabindex="0" role="img" aria-label="American Express"></div>
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to the image.
NVDA says: "American Express, graphic".
Tizen Tizen 4.0: - The voice guide says: "American Express, image".
Tizen 3.0:- The voice guide says: "Image, American Express".
Tizen 2.4:- The voice guide says: "Image".
Table 10. "img" attribute behavior
- Move focus to the image.
-
link
Example scenario: ARIA Example: link roleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to each example link.
NVDA says: "W3C website, link".
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Same behavior as in the reference implementation.
Tizen 2.4:- Same behavior as in the reference implementation.
Table 11. "link" attribute behavior
- Move focus to each example link.
-
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>
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to the list element.
- NVDA reads all the descendent list items.
- Move focus to a list item.
- NVDA reads the list item.
Note: To make a list element focusable, you must assign atabindex
attribute to it.Tizen Tizen 4.0: - When focus is on the list element, the voice guide does not read the descendent list items.
- When a list item has focus, the voice guide reads the list item.
- To make a list element focusable, you must assign a
tabindex
attribute to it.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Focus can be moved to the list element. The voice guide treats the list and its items as static text.
Table 12. "list" and "listitem" attribute behavior
-
listbox
Example scenario: Listbox ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Within the list box, when navigating or selecting items,
aria-activedescendant
changes to the currently-focused item, but DOM focus stays on the list box element.
Tizen Tizen 4.0: - To navigate within the list box, use the arrow keys. However, JavaScript consumes the arrow key events, so you must consider how to implement navigating away from the list box.
- In "Example 2: Multi-Select Listbox", clicking "OK" does not change the checkbox state.
- Within the Web browser, navigation between list items can have unintended behavior, such as focus moving twice when the arrow key is clicked once.
- Because
listbox
is a composite UI element, and there is no "Tab" key on a remote control, you must consider how to implement focus movement to descendants.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Not supported. Focus moves only to the static text element.
Table 13. "listbox" attribute behavior
- Within the list box, when navigating or selecting items,
-
log
Example scenario: Live RegionsImplementation Behavior Reference NVDA in Google Chrome™: - Click "Start".
Whenever the live region text changes, NVDA reads the text.
Tizen Tizen 4.0: - Same behavior as the reference implementation, but only assertive mode is supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported. When the live region text changes, the voice guide reads the text, but says: "Block".
Table 14. "log" attribute behavior
- Click "Start".
-
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>
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to the math element.
NVDA reads the text defined in thearia-label
attribute. The role name is not read.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Same behavior as in the reference implementation.
Tizen 2.4:- Same behavior as in the reference implementation.
Table 15. "math" attribute behavior
- Move focus to the math element.
-
menu, menubar, and menuitem
Example scenario: Navigation Menubar ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to "About".
- NVDA says: "About menu, 1 of 1".
- To open the menu, press the "Down" arrow key.
- Move focus to "Facts".
- NVDA says: "Facts sub-menu, 1 of 1".
Note: Focus cannot be moved away from the menu using the arrow keys.Tizen Tizen 4.0: - When "About" has focus, the voice guide reads: "About".
- To unfold a menu, click "OK" or use the arrow keys.
- JavaScript consumes the arrow key events, so you must consider how to implement navigating away from the menu.
- Within the Web browser, navigation between menu items can have unintended behavior, such as focus moving twice when the arrow key is clicked once.
- Because menu and menubar are composite UI elements, and there is no "Tab" key on a remote control, you must consider how to implement focus movement to descendants.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- When "About" has focus, the menu unfolds, and the voice guide says: "About menu".
- When "Facts" has focus, the sub-menu unfolds, and the voice guide says: "Facts menu".
- When focus is moved away from the menu using the arrow keys, the menu does not fold.
Table 16. "menu", "menubar, and "menuitem" attribute behavior
-
menuitemcheckbox and menuitemradio
Example scenario: Editor Menubar ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to "Font".
- NVDA says: "Font sub-menu, 1 of 1".
- To open the menu, press the "Spacebar" or "Down" arrow key.
- Move focus to "Sans-serif".
- NVDA says: "Sans-serif radio menu item, checked, 1 of 4".
- Move focus to "Serif".
- NVDA says: "Serif radio menu item, 2 of 4".
- To change a menu item checked state, press "Spacebar" or "Enter".
- To fold a menu, press "Enter".
Note: Focus cannot be moved away from the menu using the arrow keys.Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- When "Font" has focus, the sub-menu opens. The voice guide says "font menu item".
- When "Sans-serif" has focus, the voice guide reads "sans-serif radio menu item".
- The menu item checked state is not read.
Table 17. "menuitemcheckbox" and "menuitemradio" attribute behavior
-
none and presentation
Example scenario:<div> <p role="none"> This is paragraph text. Role of "none" is set on this text. </p> </div>
Implementation Behavior Reference NVDA in Google Chrome™: - The semantics of the element are not mapped to the accessibility engine.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Same behavior as in the reference implementation.
Tizen 2.4:- Same behavior as in the reference implementation.
Table 18. "none" and "presentation" attribute behavior
-
note
Not supported. -
option
Example scenario: Listbox ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to a selected list box item.
NVDA says: "Checked,<item name>
". - Move focus to an unselected list box item.
- NVDA says: "
<item name>
, not selected".
Tizen Tizen 4.0: - Not supported. The voice guide does not read the item selection state.
Tizen 3.0:- Not supported. The voice guide does not read the item selection state.
Tizen 2.4:- Not supported. The voice guide does not read the item selection state, and focus is on the static text element.
Table 19. "option" attribute behavior
- Move focus to a selected list box item.
-
Implementation Behavior Reference NVDA in Google Chrome™: - Click "Start Example".
- The increasing progress bar value is represented by a tone at increasing pitch.
- Move focus to an unselected list box item.
- NVDA says: "
<item name>
, not selected".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 20. "progressbar" attribute behavior
-
radio and radiogroup
Example scenario: ARIA radiogroup and radio ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to the radio group.
- To navigate between the radio items, use the arrow keys.
- When a radio item has focus, it is selected. When "Regular crust" is selected, NVDA says: "Pizza Crust group, Regular crust radio button, checked, 1 of 3".
Note: Focus cannot be moved away from the radio group using the arrow keys.Tizen Tizen 4.0: - To navigate between the radio items, use the arrow keys.
- When a radio item has focus, it is selected. However, JavaScript consumes the arrow key events, so you must consider how to implement navigating away from the radio group.
- When "Regular crust" is selected, the voice guide says: "Regular crust selected".
- Within the Web browser, navigation between list items can have unintended behavior, such as focus moving twice when the arrow key is clicked once.
- Because
radiogroup
is a composite UI element, and there is no "Tab" key on a remote control, you must consider how to implement focus movement to descendants.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- When "Regular crust" has focus, the voice guide says: "Regular crust not selected, radio button".
- Moving focus to a radio item with the arrow keys does not select the item.
- Focus can be moved away from the radio group using the arrow keys.
Table 21. "radio" attribute behavior
-
row, rowgroup, columnheader, and rowheader
Example scenario: Layout Grid ExamplesImplementation Behavior Reference NVDA in Google Chrome™: - See grid behavior.
Tizen Tizen 4.0: - See grid behavior.
Tizen 3.0:- See grid behavior.
Tizen 2.4:- See grid behavior.
Table 22. "row", "rowgroup", "columnheader", and "rowheader" attribute behavior
-
scrollbar
Example scenario: Scrollable Listbox ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to "Neptunium".
- NVDA says: "Neptunium, not selected, 1 of 24".
- To navigate through the list box items, use the arrow keys.
- The scrollbar moves as list items become visible.
Note: Focus cannot be moved away from the list box using the arrow keys.Tizen Tizen 4.0: - To navigate through the list box items, use the arrow keys.
- The scrollbar moves as list items become visible.
- Since there is no "Tab" key on the remote control, and JavaScript consumes the arrow key events, you must consider how to implement navigating away from the menu.
- Within the Web browser, arrow key navigation can have unintended behavior, since JavaScript uses the key clicks to navigate the list, while the TV uses the key clicks to move focus.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- When "Neptunium" has focus, the focus is on the static text, and the voice guide says: "Neptunium".
- To navigate through the list box items, use the arrow keys.
- The scrollbar moves as list items become visible.
- Focus can be moved away from the list box using the arrow keys.
Table 23. "scrollbar" attribute behavior
-
searchbox
Not supported. -
slider
Example scenario: Slider Examples with aria-orientation and aria-valuetextImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to the slider.
- To move the slider, use the arrow keys.
- NVDA reads the slider value.
Tizen Tizen 4.0: - When the slider is moved, the voice guide does not read the slider value or the
aria-valuetext
value. - Since there is no "Tab" key on the remote control, and JavaScript consumes the arrow key events, you must consider how to implement navigating away from the slider.
- Within the Web browser, arrow key navigation can have unintended behavior, since JavaScript uses the key clicks to move the slider, while the TV uses the key clicks to move focus.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- The arrow keys do not move the slider.
- The voice guide does not read the slider
aria-valuetext
value.
Table 24. "slider" attribute behavior
-
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to the spin button.
- To change the spin button value, use the arrow keys.
- NVDA reads the spin button value.
Note: Focus cannot be moved away from the spin button using the arrow keys.Tizen Tizen 4.0: - Not supported.
- Since there is no "Tab" key on the remote control, and JavaScript consumes the arrow key events, you must consider how to implement navigating to and from the spin button.
- When the spin button value is changed, the voice guide does not read the value.
- Within the Web browser, arrow key navigation can have unintended behavior, since JavaScript uses the key clicks to change the spin button value, while the TV uses the key clicks to move focus.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Not supported. Instead of changing the spin button value, the arrow keys move focus away from the spin button.
Table 25. "spinbutton" attribute behavior
-
status
No information. -
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to the switch button.
- To toggle the switch, press "Spacebar" or "Enter".
- NVDA says the switch state.
Tizen Tizen 4.0: - Not supported. When the switch state is changed, the voice guide does not read it.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Not supported. Focus moves to the static "On" and "Off" text, and the switch cannot be toggled.
Table 26. "switch" attribute behavior
-
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to "Crust".
- NVDA says: "Crust tab, selected, 1 of 4".
- To move focus to the tab content, press the "Tab" key.
Tizen Tizen 4.0: - When "Crust" has focus, the voice guide does not read the role. The voice guide says: "Crust".
- Since there is no "Tab" key on the remote control, and JavaScript consumes the arrow key events, you must consider how to implement navigating away from the tab header.
- Within the Web browser, arrow key navigation can have unintended behavior, such as focus moving twice when the arrow key is clicked once.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Arrow key navigation can have unintended behavior, such as focus moving twice when the arrow key is clicked once.
Table 27. "tab", "tablist", and "tabpanel" attribute behavior
-
table and cell
Example scenario: NVDA Practice: TablesImplementation Behavior Reference NVDA in Google Chrome™: - The table is static and interactable, but focus cannot be moved to it with the "Tab" key. To move to the next table, press "T".
- To move between cells, use "Ctrl+Alt+arrow".
Tizen Tizen 4.0: - The table is static and interactable, but focus cannot be moved to it.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- To move to static table text, use the arrow keys. The voice guide only reads the focused static text.
Table 28. "table" and "cell" attribute behavior
-
textbox
Example scenario: ARIA TextboxImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to the "Aria Example" text box.
- NVDA says: "Aria Example editable, multiline".
Tizen Tizen 4.0: - When the text box has focus, the voice guide says: "Aria Example entry, editable". The multiline state is not read.
Tizen 3.0:- When the text box has focus, the IME appears and the voice guide reads the IME input.
Tizen 2.4:- When the text box has focus, the voice guide says: "Aria Example entry, press OK button to edit". The multiline state is not read.
Table 29. "textbox" attribute behavior
-
term
Not supported. -
timer
No information. -
toolbar
Example scenario: Toolbar ExampleImplementation Behavior Reference NVDA in Google Chrome™: - Move focus to "Tool 1".
- NVDA says: "Toolbar, Tool 1 button".
- NVDA can have issues navigating through toolbar descendants.
Tizen Tizen 4.0: - The voice guide does not read the toolbar information. When "Tool 1" has focus, the voice guide says: "Tool 1 button".
- Within the Web browser, navigation between toolbar items can have unintended behavior, such as focus moving twice when the arrow key is clicked once.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- The voice guide does not read the toolbar information. When "Tool 1" has focus, the voice guide says: "Tool 1 button".
Table 30. "toolbar" attribute behavior
-
Implementation Behavior Reference NVDA in Google Chrome™: - Move focus to an input element.
- NVDA reads the tooltip text.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- When an input element has focus, the IME appears and the voice guide reads the IME input.
Tizen 2.4:- Same behavior as in the reference implementation.
Table 31. "tooltip" attribute behavior
-
Implementation Behavior Reference NVDA in Google Chrome™: - To navigate between visible tree items, use the "Up" and "Down" arrow keys.
- NVDA says the item name, its state (expanded or collapsed, if applicable), and its position in the tree (for example, "1 of 6").
- To navigate between tree levels:
- To expand the currently-selected parent node, press the "Right" arrow key.
- Focus moves to the first child item.
- To collapse the currently-selected parent node, press the "Left" arrow key.
- Focus moves to the previous parent node, if possible.
- To expand or collapse the currently-selected parent node, press "Enter".
- NVDA says the node state (expanded or collapsed).
- To select the root parent node in the tree, press "Home".
- To select the last visible node in the tree, press "End".
- To navigate away from the tree, press the "Tab" key.
Tizen Tizen 4.0: - The voice guide reads the node state, but when the node state changes, the voice guide does not read the updated state.
- The voice guide does not read the item position.
- Since there is no "Tab" key on the remote control, and JavaScript consumes the arrow key events, you must consider how to implement navigating away from the menu.
- Within the Web browser, arrow key navigation can have unintended behavior, since JavaScript uses the key clicks to navigate the list, while the TV uses the key clicks to move focus.
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Not supported. Because the arrow keys move focus to the static text, tree nodes cannot be expanded or collapsed.
- The voice guide does not read the node state or item position.
Table 32. "tree", "treegrid", and "treeitem" attribute behavior
ARIA State and Property Attribute Support
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-activedescendantImplementation Behavior Reference JAWS in Google Chrome™: - To move focus to the radio group, press the "Tab" key.
- If no item is selected and the focus moves to the group, the first item receives focus. If an item is already selected and the focus moves to the group, the selected item receives focus, and pressing the "Tab" key again moves focus to the first item in the group.
- When the "Deep dish" item has focus, JAWS says: "Pizza Crust, Deep dish radio button checked" (or "not checked").
Tizen Tizen 4.0: - Same behavior as the reference implementation, but since there is no "Tab" key on a remote control, you must consider how to implement focus movement.
- When the "Deep dish" item has focus, the voice guide says: "Deep dish selected" (or "not selected").
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Same behavior as on Tizen 4.0.
Table 33. "aria-activedescendant" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - In the "Live Region 2: Text Log" section, set "Atomic Property Value" to "true".
- Click "Start Log".
- When a line is added to the text box, JAWS reads all text box content, starting with the first line.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 34. "aria-atomic" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - To open the list box, press "Enter". To change the selected list item, use the "Up" and "Down" arrow keys.When the selected list item changes, JAWS reads the selected item.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 35. "aria-autocomplete" attribute behavior
-
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>
Implementation Behavior Reference JAWS in Google Chrome™: - When the example page is loaded,
aria-busy
istrue
by default. Click "Update test target content". When the content changes, JAWS does not read the updated content. - Switch
aria-busy
tofalse
by clicking "Update aria-busy tag, current is true". - Click "Update test target content". When the content changes, JAWS reads the updated content.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 36. "aria-busy" attribute behavior
- When the example page is loaded,
-
Implementation Behavior Reference JAWS in Google Chrome™: - Click a checkbox.
- JAWS says: "xxx, selected" or "xxx, not selected"
Tizen Tizen 4.0: - The voice guide reads only the current checkbox state. It does not read when the checkbox state is changed.
Tizen 3.0:- Not supported. The voice guide always says "xxx, not selected".
Tizen 2.4:- Not supported.
Table 37. "aria-checked" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - JAWS says: "Press the JAWS key plus Alt and M to move to the controlled element".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 38. "aria-controls" attribute behavior
-
aria-current
Example scenario: Breadcrumb ExampleImplementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "Breadcrumb Example" link.
- JAWS says: "Breadcrumb Example current page, link".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 39. "aria-current" attribute behavior
-
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>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the link element.
- JAWS reads: "National Folk Festival, link, Check out the video report for last year's National Folk Festival".
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Not supported. The attribute is in conflict with
aria-label
andaria-labelledby
.
Tizen 2.4:- Not supported.
Table 40. "aria-describedby" attribute behavior
-
aria-disabled
Example scenario: Attribute: aria-disabledImplementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "one" link.
- JAWS says: "One, unavailable link".
- Move focus to the "three" button.
- JAWS says: "Three button, unavailable".
- Focus cannot be moved to the "five" button.
Tizen Tizen 4.0: - When the "one" link has focus, the voice guide says: "One, link, turn off".
Tizen 3.0:- Same behavior as on Tizen 4.0.
Tizen 2.4:- Not supported. When the "one" link has focus, the voice guide says: "One, link".
Table 41. "aria-disabled" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to an empty cell.
- JAWS says: "xxx cell is empty, droppable".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 42. "aria-dropeffect" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to "Show Message 1".
- JAWS says: "Show Message 1 button, collapsed".
- Click "Show Message 1".
- JAWS says "Expand".
- Move focus away from the expanded button.
- Move focus back to the expanded button.
- JAWS says: "Hide Message 1 button, press the JAWS key plus Alt and M to move to the controlled element, expanded".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 43. "aria-expanded" attribute behavior
-
aria-flowto
Example scenario: Using aria-flowto to give users a choice of reading orderImplementation Behavior Reference JAWS in Google Chrome™: - Move focus to "The Daily Planet".
- JAWS says: "Heading level 1, The Daily Planet, has flow-to".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 44. "aria-flowto" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - See aria-dropeffect behavior.
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 45. "aria-grabbed" attribute behavior
-
aria-haspopup
Example scenario: Simple dropdownsImplementation Behavior Reference JAWS in Google Chrome™: - Move focus to "About".
- JAWS says: "About, has popup, link".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 46. "aria-haspopup" attribute behavior
-
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>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "test"
div
element. - JAWS does not read "on".
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Same behavior as in the reference implementation.
Tizen 2.4:- Not supported.
Table 47. "aria-hidden" attribute behavior
- Move focus to the "test"
-
aria-invalid
Example scenario: Forms: Using aria-invalid to identify failed fieldsImplementation Behavior Reference JAWS in Google Chrome™: - Enter invalid information in a form field.
- JAWS says: "xxx, invalid entry".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 48. "aria-invalid" attribute behavior
-
aria-label
Example scenario:<html> <button aria-label="Close">X</button> </html>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "X" button.
- JAWS says: "Close button".
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- The voice guide says: "Button, Close".
Tizen 2.4:- Same behavior as in the reference implementation.
Table 49. "aria-label" attribute behavior
-
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>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "Name" field.
- JAWS says: "Billing Address, Name, editable, blank".
- Move focus to the "Address" field.
- JAWS says: "Billing Address, Address, editable, blank".
Tizen Tizen 4.0: - When the "Name" field has focus, the voice guide says: "Billing Address, Name".
- When the "Address" field has focus, the voice guide says: "Billing Address, Address".
Tizen 3.0:- When the "Name" field has focus, the voice guide says: "Entry editing, Billing Address, Name".
- When the "Address" field has focus, the voice guide says: "Entry editing, Billing Address, Address".
Tizen 2.4:- When the "Name" field has focus, the voice guide says: "Billing Address, Name, entry, press OK to edit".
- When the "Address" field has focus, the voice guide says: "Billing Address, Address, entry, press OK to edit".
Table 50. "aria-labelledby" attribute behavior
-
aria-level
Example scenario:<button role="heading" aria-level="1">text</button>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "text" button.
- JAWS says: "Text, heading level 1, clickable".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 51. "aria-level" attribute behavior
-
aria-live
Example scenario: Alert ExampleImplementation Behavior Reference JAWS in Google Chrome™: - Click "Trigger Alert".
- The alert message appears. JAWS reads the message text.
Tizen Tizen 4.0: - Same behavior as in the reference implementation.
Tizen 3.0:- Limited support. Do not use.
Tizen 2.4:- Not supported.
Table 52. "aria-live" attribute behavior
-
aria-multiline
Not supported. -
aria-multiselectable
Example scenario: ARIA Multiselectable Listbox ExampleImplementation Behavior Reference JAWS in Google Chrome™: - Not supported.
Tizen Tizen 4.0: - Not supported. Specifying that the list is multiselectable within the name or description is recommended.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 53. "aria-multiselectable" attribute behavior
-
aria-orientation
Example scenario: Slider Examples with aria-orientation and aria-valuetextImplementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "Temperature" slider.
- JAWS says: "Temperature, up-down slider, 68 degrees. To increase or decrease, use the yellow key".
- Move focus to the "Fan" slider.
- JAWS says: "Fan, left-right slider, Off. To increase or decrease, use the yellow key".
Tizen Tizen 4.0: - Not supported. Specifying the slider orientation within the name or description is recommended.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 54. "aria-orientation" attribute behavior
-
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>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "Fruit" element.
- JAWS reads: "Fruit: Apples, Bananas".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 55. "aria-owns" attribute behavior
-
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>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to each list item.
- JAWS says: "Apples, 5 of 16", "Bananas, 6 of 16", "Cantaloupes, 7 of 16", and "Dates, 19 of 16".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 56. "aria-posinset" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - To press a button, click it.
- JAWS reads: "xxx button, pressed".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 57. "aria-pressed" attribute behavior
-
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>
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "First Name" field.
- JAWS reads: "First Name, read-only edit, unknown".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 58. "aria-readonly" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - In the "Live Region 2: Text Log" section, set "Relevant Property Value" to "Removals".
- Click "Start Log".
- When a line is added to the text box, JAWS does not read the added line.
Tizen Tizen 4.0: - Limited support. Only the "additions" value is supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 59. "aria-relevant" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "Email" field.
- JAWS says: "Email, required".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 60. "aria-required" attribute behavior
-
Implementation Behavior Reference JAWS in Google Chrome™: - Move focus to the selected tab.
- JAWS says: "xxx, selected".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 61. "aria-selected" attribute behavior
-
aria-setsize
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>
Implementation Behavior Reference JAWS in Google Chrome™: - See aria-posinset behavior.
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 62. "aria-setsize" attribute behavior
-
aria-sort
Example scenario: Data Grid ExamplesImplementation Behavior Reference JAWS in Google Chrome™: - In "Example 2: Sortable Data Grid With Editable Cells", move focus to "Date".
- JAWS says: "Date button, sorted ascending".
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 63. "aria-sort" attribute behavior
-
aria-valuemax and aria-valuemin
Not supported. -
aria-valuenow and aria-valuetext
Example scenario: Slider Examples with aria-orientation and aria-valuetextImplementation Behavior Reference JAWS in Google Chrome™: - Move focus to the "Fan" slider.
- JAWS says: "Fan, left-right slider, Off. To increase or decrease, use the yellow key".
aria-valuenow
describes the slider value as a number, butaria-valuetext
describes the slider value as text. If defined, the screen reader reads thearia-valuetext
value.
Tizen Tizen 4.0: - Not supported.
Tizen 3.0:- Not supported.
Tizen 2.4:- Not supported.
Table 64. "aria-valuenow" and "aria-valuetext" attribute behavior