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 accessible rich internet applications wai-aria 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 notenot 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 notethis api must be used, otherwise, voice guide will behave unexpectedly when launching the web app 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 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 noteif 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 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 notesince 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 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 table 1 "alert" attribute behavior alertdialog example scenario using wai-aria role="alertdialog" to identify errors 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 table 2 "alertdialog" attribute behavior application 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 article example scenario recommended restaurants 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 table 4 "article" attribute behavior button example scenario button examples 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 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 example 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 table 7 "combobox" attribute behavior dialog example scenario modal dialog example 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 table 8 "dialog" attribute behavior grid and grid-cell example scenario layout grid examples 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 table 9 "grid" and "gridcell" attribute behavior 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 link example scenario aria example link role 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 table 11 "link" attribute behavior 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 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 table 12 "list" and "listitem" attribute behavior listbox example scenario listbox example 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 table 13 "listbox" attribute behavior log example scenario live regions 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" table 14 "log" attribute behavior 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 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 table 15 "math" attribute behavior menu, menubar, and menuitem example scenario navigation menubar example 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 table 16 "menu", "menubar, and "menuitem" attribute behavior menuitemcheckbox and menuitemradio example scenario editor menubar example 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 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 example 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 table 19 "option" attribute behavior progressbar 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 example 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 table 21 "radio" attribute behavior row, rowgroup, columnheader, and rowheader example scenario layout grid examples 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 table 22 "row", "rowgroup", "columnheader", and "rowheader" attribute behavior scrollbar example scenario scrollable listbox example 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 table 23 "scrollbar" attribute behavior searchbox not supported slider example scenario slider examples with aria-orientation and aria-valuetext 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 table 24 "slider" attribute behavior spinbutton 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 switch 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 tab, tablist, and tabpanel 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 tables 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 table 28 "table" and "cell" attribute behavior textbox example scenario aria textbox 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 table 29 "textbox" attribute behavior term not supported timer no information toolbar example scenario toolbar example 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" table 30 "toolbar" attribute behavior tooltip 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 tree, treegrid, and treeitem 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-activedescendant 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 table 33 "aria-activedescendant" attribute behavior aria-atomic 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 aria-autocomplete 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 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 table 36 "aria-busy" attribute behavior aria-checked 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 aria-controls 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 example 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 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 and aria-labelledby tizen 2 4 not supported table 40 "aria-describedby" attribute behavior aria-disabled example scenario attribute aria-disabled 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" table 41 "aria-disabled" attribute behavior aria-dropeffect 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 aria-expanded 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 order 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 table 44 "aria-flowto" attribute behavior aria-grabbed 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 dropdowns 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 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 aria-invalid example scenario forms using aria-invalid to identify failed fields 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 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 example 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 table 52 "aria-live" attribute behavior aria-multiline not supported aria-multiselectable example scenario aria multiselectable listbox example 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 table 53 "aria-multiselectable" attribute behavior aria-orientation example scenario slider examples with aria-orientation and aria-valuetext 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 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 aria-pressed 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 aria-relevant 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 aria-required 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 aria-selected 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 examples 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 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-valuetext 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 table 64 "aria-valuenow" and "aria-valuetext" attribute behavior