• Accessible Rich Internet Applications (WAI-ARIA)

Smart 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.

Note

Not all TV models support the voice guide feature.

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

Note

This API must be used, otherwise, voice guide will behave unexpectedly when launching the web app.

To test the voice guide feature:

1. On the TV, select "TV Menu > System > Accessibility > Voice Guide > On".

2. 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.

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:

1. 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.
2. 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.
3. 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 calculating 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(); // javascript

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.

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

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.

Note

Since landmark navigation is not supported on Samsung TVs, the following roles are not supported:

• banner
• complementary
• contentinfo
• form
• main
• navigation
• region
• search

• alert
  Example scenario: Alert Example

  Table 1. "alert" attribute behavior

  Implementation	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.

• alertdialog
  Example scenario: Using WAI-ARIA role="alertdialog" to Identify Errors

  Table 2. "alertdialog" attribute behavior

  Implementation	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.

• application
  Example scenario: Example 1 - Alert role example using an ARIA alert box

  Table 3. "application" 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.

• article
  Example scenario: Recommended Restaurants

  Table 4. "article" attribute behavior

  Implementation	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.

• button
  Example scenario: Button Examples

  Table 5. "button" attribute behavior

  Implementation	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.

• checkbox
  Example scenario: Checkbox Example (Mixed-State)

  Table 6. "checkbox" attribute behavior

  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.

• combobox
  Example scenario: Legacy ARIA 1.0 Combobox With Both List and Inline Autocomplete Example

  Table 7. "combobox" attribute behavior

  Implementation	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.

• dialog
  Example scenario: Modal Dialog Example

  Table 8. "dialog" attribute behavior

  Implementation	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.

• grid and grid-cell
  Example scenario: Layout Grid Examples

  Table 9. "grid" and "gridcell" attribute behavior

  Implementation	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.

• img
  Example scenario:

  <div class="sprite card_icons amex" tabindex="0" role="img" aria-label="American Express"></div>
  

  Table 10. "img" attribute behavior

  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".

• link
  Example scenario: ARIA Example: link role

  Table 11. "link" attribute behavior

  Implementation	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.

• 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>
  

  Table 12. "list" and "listitem" attribute behavior

  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 a tabindex 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.

• listbox
  Example scenario: Listbox Example

  Table 13. "listbox" attribute behavior

  Implementation	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.

• log
  Example scenario: Live Regions

  Table 14. "log" attribute behavior

  Implementation	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".

• 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>
  

  Table 15. "math" attribute behavior

  Implementation	Behavior
  Reference	NVDA in Google Chrome™: Move focus to the math element. NVDA reads the text defined in the aria-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.

• menu, menubar, and menuitem
  Example scenario: Navigation Menubar Example

  Table 16. "menu", "menubar, and "menuitem" attribute behavior

  Implementation	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.

• menuitemcheckbox and menuitemradio
  Example scenario: Editor Menubar Example

  Table 17. "menuitemcheckbox" and "menuitemradio" attribute behavior

  Implementation	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.

• none and presentation
  Example scenario:

  <div>
  <p role="none"> This is paragraph text. Role of "none" is set on this text. </p>
  </div>
  

  Table 18. "none" and "presentation" attribute behavior

  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.

• note
  Not supported.

• option
  Example scenario: Listbox Example

  Table 19. "option" attribute behavior

  Implementation	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.

• progressbar
  Example scenario: Example - Progressbar

  Table 20. "progressbar" attribute behavior

  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.

• radio and radiogroup
  Example scenario: ARIA radiogroup and radio Example

  Table 21. "radio" attribute behavior

  Implementation	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.

• row, rowgroup, columnheader, and rowheader
  Example scenario: Layout Grid Examples

  Table 22. "row", "rowgroup", "columnheader", and "rowheader" attribute behavior

  Implementation	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.

• scrollbar
  Example scenario: Scrollable Listbox Example

  Table 23. "scrollbar" attribute behavior

  Implementation	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.

• searchbox
  Not supported.

• slider
  Example scenario: Slider Examples with aria-orientation and aria-valuetext

  Table 24. "slider" attribute behavior

  Implementation	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.

• spinbutton
  Example scenario: Example 33 - Spinbutton using IMG elements for buttons

  Table 25. "spinbutton" 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.

• status
  No information.

• switch
  Example scenario: ARIA Switch Demo

  Table 26. "switch" attribute behavior

  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.

• tab, tablist, and tabpanel
  Example scenario: Example 34 - Tab Panel

  Table 27. "tab", "tablist", and "tabpanel" 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 and cell
  Example scenario: NVDA Practice: Tables

  Table 28. "table" and "cell" attribute behavior

  Implementation	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.

• textbox
  Example scenario: ARIA Textbox

  Table 29. "textbox" attribute behavior

  Implementation	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.

• term
  Not supported.

• timer
  No information.

• toolbar
  Example scenario: Toolbar Example

  Table 30. "toolbar" attribute behavior

  Implementation	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".

• tooltip
  Example scenario: Example - Tooltip

  Table 31. "tooltip" 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.

• tree, treegrid, and treeitem
  Example scenario: Example - Treeview

  Table 32. "tree", "treegrid", and "treeitem" 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.

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-activedescendant

  Table 33. "aria-activedescendant" attribute behavior

  Implementation	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.

• aria-atomic
  Example scenario: Example 23 - Live Region

  Table 34. "aria-atomic" 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.

• aria-autocomplete
  Example scenario: Example - Combobox with aria-autocomplete="inline"

  Table 35. "aria-autocomplete" 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.

• 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>
  

  Table 36. "aria-busy" attribute behavior

  Implementation	Behavior
  Reference	JAWS in Google Chrome™: When the example page is loaded, aria-busy is true by default. Click "Update test target content". When the content changes, JAWS does not read the updated content. Switch aria-busy to false 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.

• aria-checked
  Example scenario: Example 5 - Checkboxes using IMG elements for visual state

  Table 37. "aria-checked" attribute behavior

  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.

• aria-controls
  Example scenario: Example 21 - Hide/Show: Region does not follow button

  Table 38. "aria-controls" 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.

• aria-current
  Example scenario: Breadcrumb Example

  Table 39. "aria-current" attribute behavior

  Implementation	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.

• 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>
  

  Table 40. "aria-describedby" attribute behavior

  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 and aria-labelledby. Tizen 2.4: Not supported.

• aria-disabled
  Example scenario: Attribute: aria-disabled

  Table 41. "aria-disabled" attribute behavior

  Implementation	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".

• aria-dropeffect
  Example scenario: Example 16 - Drag and Drop

  Table 42. "aria-dropeffect" 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.

• aria-expanded
  Example scenario: Example 22 - Hide/Show: Region is exclusive

  Table 43. "aria-expanded" 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.

• aria-flowto
  Example scenario: Using aria-flowto to give users a choice of reading order

  Table 44. "aria-flowto" attribute behavior

  Implementation	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.

• aria-grabbed
  Example scenario: Example 16 - Drag and Drop

  Table 45. "aria-grabbed" 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.

• aria-haspopup
  Example scenario: Simple dropdowns

  Table 46. "aria-haspopup" attribute behavior

  Implementation	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.

• 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>
  

  Table 47. "aria-hidden" attribute behavior

  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.

• aria-invalid
  Example scenario: Forms: Using aria-invalid to identify failed fields

  Table 48. "aria-invalid" attribute behavior

  Implementation	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.

• aria-label
  Example scenario:

  <html>
    <button aria-label="Close">X</button>
  </html>
  

  Table 49. "aria-label" attribute behavior

  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.

• 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>
  

  Table 50. "aria-labelledby" attribute behavior

  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".

• aria-level
  Example scenario:

  <button role="heading" aria-level="1">text</button>
  

  Table 51. "aria-level" attribute behavior

  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.

• aria-live
  Example scenario: Alert Example

  Table 52. "aria-live" attribute behavior

  Implementation	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.

• aria-multiline
  Not supported.

• aria-multiselectable
  Example scenario: ARIA Multiselectable Listbox Example

  Table 53. "aria-multiselectable" attribute behavior

  Implementation	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.

• aria-orientation
  Example scenario: Slider Examples with aria-orientation and aria-valuetext

  Table 54. "aria-orientation" attribute behavior

  Implementation	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.

• 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>
  

  Table 55. "aria-owns" attribute behavior

  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.

• 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>
  

  Table 56. "aria-posinset" attribute behavior

  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.

• aria-pressed
  Example scenario: Example 3 - Button role example using text-only buttons

  Table 57. "aria-pressed" 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.

• 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>
  

  Table 58. "aria-readonly" attribute behavior

  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.

• aria-relevant
  Example scenario: Example 23 - Live Region

  Table 59. "aria-relevant" 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.

• aria-required
  Example scenario: Example 40 - Tooltip: ARIA CSS selectors

  Table 60. "aria-required" 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.

• aria-selected
  Example scenario: Example 34 - Tab Panel

  Table 61. "aria-selected" 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.

• 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>
  

  Table 62. "aria-setsize" attribute behavior

  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.

• aria-sort
  Example scenario: Data Grid Examples

  Table 63. "aria-sort" attribute behavior

  Implementation	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.

• aria-valuemax and aria-valuemin
  Not supported.

• aria-valuenow and aria-valuetext
  Example scenario: Slider Examples with aria-orientation and aria-valuetext

  Table 64. "aria-valuenow" and "aria-valuetext" attribute behavior

  Implementation	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, but aria-valuetext describes the slider value as text. If defined, the screen reader reads the aria-valuetext value.
  Tizen	Tizen 4.0: Not supported. Tizen 3.0: Not supported. Tizen 2.4: Not supported.