JQuery UI Support Matrix

From Level Access Web Labs
Jump to: navigation, search
ARIA Keyboard in IE 10 NVDA 2013.2/IE 10 NVDA 2013.2/IE 11 NVDA 2013.2/FF 24 JAWS 14/IE 10 JAWS 14/FF Mac OS 10.8.1 VoiceOver iOS 7/ VoiceOver Android 4.3 Talkback w/built-in Browser Color Disabled IE 10 Expected Keyboard Behaviors Expected ARIA Attributes Additional Notes Link to JQuery UI Example
page tabs
Default No issues. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are announced as tab and the number of the tab "tab 1 of 3" When the tab is a selected tab, it is announced as "selected. When navigating to the tab panel, this is is announced as the controlled by tab name and announcing "Tab panel." For example, when navigating to the Anenan lacinia tab panel, VoiceOver will announce Aenean lacina, with 2 items, tab panel. Aria-expanded is not announced but coded; However, not sure if this is relavant for tab panels as there is no content to expand. When navigating users are aware of which tab is the active tab and which tab panel is opened. NOTE- there are two issues worth nothing: 1. In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. 2. If user has to use the arrow keys to navigate, then focus does not shift to the tabpanel. This may cause users to only have the ability to view the tabpanel of the last tab. "The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing ""tab"" and ""1 of 3"" as well as ""Selected"" for the current tab.
Not sure what the need for aria-exapnded is when dealing with these specific page tabs, as the functionality to expand or collapse is not enabled" The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. No Issues "These guidelines reflect the paradigm for a client side Tab control, and not links that navigate to different pages.
An ARIA-enabled tabbed interface has three components: the tablist, which contains a collection of tabs, each of which is a control for loading its associated content tabpanel.
The interaction design pattern promoted for ARIA-enabled tabs suggests that just the currently active tab control be found in the Tab order, and that the tab controls be navigable using the arrow keys. Setting focus to a tab control loads the associated content tabpanel which is otherwise hidden. This effectively mimics the way tabbed interfaces work in desktop applications. In a web page, for most screen readers (or, at least those that work with a virtual buffer) this means switching to Application Mode, where the Virtual Cursor is off. That is, keyboard commands entered by the user must be passed through to the browser instead of being intercepted by the screen reader. This is also known as Forms or Focus Mode, depending on screen reader and context.
In a screen reader’s normal reading or Browse Mode, when the Virtual Cursor is on, the press of an arrow key will be intercepted by a screen reader as a command to read the adjacent letter or line of text. This prevents using the arrow keys to select a different tab control. In Application Mode, however, the arrow keypress is passed through to the browser and, because of the JavaScript at work, causes focus to move to the adjacent tab control, thereby loading the associated tabpanel.
JAWS 11 and later, and NVDA 2010.1 and later both automatically enter Application Mode when focus is set to a tab control. In Application Mode, we can navigate through the various tabs using the arrow keys. Yet, because the screen reader is now passing keyboard commands through to the browser, we can no longer use the normal reading commands to access the tabpanel’s content. This is not necessarily an issue where the tabpanel content is an application, that is, where it contains only form controls or otherwise focussable elements. This is because, even while in Application Mode, we can still easily use the Tab key to move to the first form control or focussable element in the tabpanel and interact with it.
However, if a tabpanel contains nothing but regular text content, there is nothing to set focus to using the Tab key. If the regular text content includes one or more links, then pressing the Tab key will set focus to the first link, skipping over any text content that might come before it. So, unless the screen reader is somehow placed back in Browse Mode with the Virtual Cursor on, it remains in Application Mode, and cannot be made to read any regular text content using the normal reading commands. The user can, of course, manually turn the Virtual Cursor back on, but it is worth noting that setting focus to a non-form or non-application element can accomplish the same thing in some instances." "Required:
• role=""tablist"" must be included within the container element (where all Tab links are contained). (The insertion point container must not be contained within the container with role=tablist)
• role=""tab"" must be included within all Tab links, and must match the elements that receive keyboard focus when the arrow keys are used to set focus between each Tab link.
• aria-selected must be included within every element that contains role=tab, and must be set to ""true"" whenever focus is set to a Tab, and ""false"" on all others.
• aria-expanded must be included within every element that contains role=tab, and must be set to ""true"" whenever a Tab is expanded, and set to ""false"" when collapsed.
Supplemental:
• aria-label on the element with role=tab: Can be used to set an explicit label for the Tab control. If a Title attribute is present, then both the Title and aria-label attribute values must match.
• aria-posinset and aria-setsize on the element with role=tab can be used to convey ""X of Y"" positioning for screen reader users.
" Though another method for making ARIA Tabs is available using aria-activedescendant, the method of setting focus to individual Tab nodes ensures accessibility going as far back as JAWS 11 in IE8. http://jqueryui.com/resources/demos/tabs/default.html
Collapse content: Pressing Enter will work, though the Spacebar will not toggle the open/closed state of the selected Tab. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. Pressing Enter causes JAWS to exit Forms Mode when attempting to toggle a selected Tab, and the Spacebar does not work for this purpose. Also, the current open/closed state of each Tab is not conveyed using the aria-expanded attribute on the element with role=tab. Pressing Enter causes JAWS to exit Forms Mode when attempting to toggle a selected Tab, and the Spacebar does not work for this purpose. Also, the current open/closed state of each Tab is not conveyed using the aria-expanded attribute on the element with role=tab. The role of tab is present and aria-selected is set to true. VoiceOver is announcing "tab" and "1 of 3" as well as "Selected" for the current tab. Aria-expanded is set; however, the expanded state is not read to the user. There is also a state of aria-hidden. The active panel is set to false and the inactive tab panels are set to true. NOTE- there are two issues worth nothing: 1. In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. 2. If user has to use the arrow keys to navigate, then focus does not shift to the tabpanel. This may cause users to only have the ability to view the tabpanel of the last tab. The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing "tab" and "1 of 3" as well as "Selected" for the current tab. However, without the aria-expanded attribute, the end user will be unaware of the current state of expanded or collapsed. The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. No Issues http://jqueryui.com/resources/demos/tabs/collapsible.html
Content via Ajax No issues. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are announced as tab and the number of the tab "tab 1 of 3" When the tab is a selected tab, it is announced as "selected. When navigating to the tab panel, this is is announced as the controlled by tab name and announcing "Tab panel." For example, when navigating to the Anenan lacinia tab panel, VoiceOver will announce Aenean lacina, with 2 items, tab panel. Aria-expanded is not announced but coded; However, not sure if this is relavant for tab panels as there is no content to expand. When navigating users are aware of which tab is the active tab and which tab panel is opened. NOTE: In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing "tab" and "1 of 3" as well as "Selected" for the current tab. However, without the aria-expanded attribute, the end user will be unaware of the current state of expanded or collapsed. The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. No Issues http://jqueryui.com/resources/demos/tabs/ajax.html
Open on mouseover No issues. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. Since many users of VoiceOver will likely be using the keyboard, mouse interaction should have supplement keyboard interactions. The tabs are announced as tab and the number of the tab "tab 1 of 3" When the tab is a selected tab, it is announced as "selected. When navigating to the tab panel, this is is announced as the controlled by tab name and announcing "Tab panel." For example, when navigating to the Anenan lacinia tab panel, VoiceOver will announce Aenean lacina, with 2 items, tab panel. Aria-expanded is not announced but coded; However, not sure if this is relavant for tab panels as there is no content to expand. When navigating users are aware of which tab is the active tab and which tab panel is opened. NOTE- there are two issues worth nothing: 1. In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. 2. If user has to use the arrow keys to navigate, then focus does not shift to the tabpanel. This may cause users to only have the ability to view the tabpanel of the last tab. "The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing ""tab"" and ""1 of 3"" as well as ""Selected"" for the current tab. And while the tab is not expanding or collapsing on focus from VoiceOver, the selecting function is still carried out via a double tap.
Not sure what the need for aria-exapnded is when dealing with these specific page tabs, as the functionality to expand or collapse is not enabled" The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. No Issues http://jqueryui.com/resources/demos/tabs/mouseover.html
Simple manipulation Though the Close icon is clickable using the mouse, it is impossible to set focus to it and activate it using the keyboard. The attribute aria-expanded is missing to convey which Tab is currently expanded.The clickable Span tag that acts as the close icon is included within the element that contains role=tab, presenting an event propagation issue for screen reader and keyboard only users. E.G Though the Span is clickable using the mouse, it is impossible to set focus to it and activate it using the keyboard. The attribute aria-expanded is missing to convey which Tab is currently expanded. The clickable Span tag that acts as the close icon is included within the element that contains role=tab, presenting an event propagation issue for screen reader and keyboard only users. E.G Though the Span is clickable using the mouse, it is impossible to set focus to it and activate it using the keyboard. The attribute aria-expanded is missing to convey which Tab is currently expanded. The clickable Span tag that acts as the close icon is included within the element that contains role=tab, presenting an event propagation issue for screen reader and keyboard only users. E.G Though the Span is clickable using the mouse, it is impossible to set focus to it and activate it using the keyboard. The attribute aria-expanded is missing to convey which Tab is currently expanded. The clickable Span tag that acts as the close icon is included within the element that contains role=tab, presenting an event propagation issue for screen reader and keyboard only users. E.G Though the Span is clickable using the mouse, it is impossible to set focus to it and activate it using the keyboard. The attribute aria-expanded is missing to convey which Tab is currently expanded. The clickable Span tag that acts as the close icon is included within the element that contains role=tab, presenting an event propagation issue for screen reader and keyboard only users. E.G Though the Span is clickable using the mouse, it is impossible to set focus to it and activate it using the keyboard. When activating the "Add tab" users are directed to the top of the jquery ui page. Focus is not shifted to the tab form. The interactive behaviors works much like the default tab. The aria controls are appropriate. However, users are not able to activate the delete button within the tab. The role is incorrect. The role is set to presentation and VoiceOver does not identify this as an actionable element. NOTE- there are two issues worth nothing: 1. In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. 2. If user has to use the arrow keys to navigate, then focus does not shift to the tabpanel. This may cause users to only have the ability to view the tabpanel of the last tab. "The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing ""tab"" and ""1 of 3"" as well as ""Selected"" for the current tab. And while the tab is not expanding or collapsing on focus from VoiceOver, the selecting function is still carried out via a double tap.
Not sure what the need for aria-exapnded is when dealing with these specific page tabs, as the functionality to expand or collapse is not enabled
The close button that is used to remove the tabs from the widget is not focusable by VoiceOver. The Remove Tab cannot by default receive keyboard focus, and therefore VoiceOver focus as well." The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. In the "Simple Manipulation example, the "x" that serves to close the tab or the "Tab Data" dialog box does not appear when colors are disabled. http://jqueryui.com/resources/demos/tabs/manipulation.html
Sortable It is not possible to re-sort the Tabs using the keyboard. The attribute aria-expanded is missing to convey which Tab is currently expanded. It is not possible to re-sort the Tabs using the keyboard. "The attribute aria-expanded is missing to convey which Tab is currently expanded.
It is not possible to re-sort the Tabs using the keyboard." "The attribute aria-expanded is missing to convey which Tab is currently expanded.
It is not possible to re-sort the Tabs using the keyboard." The attribute aria-expanded is missing to convey which Tab is currently expanded. It is not possible to re-sort the Tabs using the keyboard. The attribute aria-expanded is missing to convey which Tab is currently expanded. It is not possible to re-sort the Tabs using the keyboard. Voiceover does not indicate to the user that this is sortable. Teh interactions behave the same as the default tabs and include the same aria attributes.. Users are not able to sort the tabs. NOTE- there are two issues worth nothing: 1. In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. 2. If user has to use the arrow keys to navigate, then focus does not shift to the tabpanel. This may cause users to only have the ability to view the tabpanel of the last tab. "The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing ""tab"" and ""1 of 3"" as well as ""Selected"" for the current tab. And while the tab is not expanding or collapsing on focus from VoiceOver, the selecting function is still carried out via a double tap.
The user is also unable to grab the tab and resort them with VoiceOver running. For an aria solution, aria-grabbed="""" attribute could be an alternative for the sortable tabs.
Not sure what the need for aria-exapnded is when dealing with these specific page tabs, as the functionality to expand or collapse is not enabled
" The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. No Issues http://jqueryui.com/resources/demos/tabs/sortable.html
Tabs at bottom Since the Tab content appears above the Tab group in the DOM reading order, keyboard only users must shift+tab through all newly loaded Tab content in order to access the active elements contained within the section, which is non-intuitive. The attribute aria-expanded is missing to convey which Tab is currently expanded. Since the Tab content appears above the Tab group in the DOM reading order, screen reader users expecting to press the tab key and set focus into the newly loaded content, or reactivate Browse Mode and arrow down into the newly loaded content, will be confused and not be able to easily navigate into this content. The attribute aria-expanded is missing to convey which Tab is currently expanded. Since the Tab content appears above the Tab group in the DOM reading order, screen reader users expecting to press the tab key and set focus into the newly loaded content, or reactivate Browse Mode and arrow down into the newly loaded content, will be confused and not be able to easily navigate into this content. The attribute aria-expanded is missing to convey which Tab is currently expanded. Since the Tab content appears above the Tab group in the DOM reading order, screen reader users expecting to press the tab key and set focus into the newly loaded content, or reactivate Browse Mode and arrow down into the newly loaded content, will be confused and not be able to easily navigate into this content. The attribute aria-expanded is missing to convey which Tab is currently expanded. Since the Tab content appears above the Tab group in the DOM reading order, screen reader users expecting to press the tab key and set focus into the newly loaded content, or reactivate the Virtual Cursor and arrow down into the newly loaded content, will be confused and not be able to easily navigate into this content. The attribute aria-expanded is missing to convey which Tab is currently expanded. Since the Tab content appears above the Tab group in the DOM reading order, screen reader users expecting to press the tab key and set focus into the newly loaded content, or reactivate the Virtual Cursor and arrow down into the newly loaded content, will be confused and not be able to easily navigate into this content. Focus is first set to the tab content. Aria roles are in place. However, the html order within the DOM follows the visual layout. Users will likely get to tabpanel before the tabs. Although the aria roles and attributes are correctly set, there are a couple of items not being announced properly; 1. the tabpanel information is lost when navigating to the previous content using the VO + right arrow to navigate to the previous content. 2. The aria-selected is set to true on the active tab. However, this is never announced in VoiceOver. NOTE- there are two issues worth nothing: 1. In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. 2. If user has to use the arrow keys to navigate, then focus does not shift to the tabpanel. This may cause users to only have the ability to view the tabpanel of the last tab. "The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing ""tab"" and ""1 of 3"" as well as ""Selected"" for the current tab. And while the tab is not expanding or collapsing on focus from VoiceOver, the selecting function is still carried out via a double tap.
Not sure what the need for aria-exapnded is when dealing with these specific page tabs, as the functionality to expand or collapse is not enabled
The tab content does appear before the tabs themselves, so once the user selects a tab, they must navigate back up though the widget in order to access the content.
" The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. No Issues http://jqueryui.com/resources/demos/tabs/bottom.html
Vertical Tabs functionality No issues. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are announced as tab and the number of the tab "tab 1 of 3" When the tab is a selected tab, it is announced as "selected. When navigating to the tab panel, this is is announced as the controlled by tab name and announcing "Tab panel." For example, when navigating to the Anenan lacinia tab panel, VoiceOver will announce Aenean lacina, with 2 items, tab panel. Aria-expanded is not announced but coded; However, not sure if this is relavant for tab panels as there is no content to expand. When navigating users are aware of which tab is the active tab and which tab panel is opened. NOTE- there are two issues worth nothing: 1. In Safari, users can navigate through content using the VO plus arrow keys. The challenge is when users are using the VoiceOver keystrokes, they activate actionable elements using the VO and spacebar keys. When doing so, this tab is not activated. 2. If user has to use the arrow keys to navigate, then focus does not shift to the tabpanel. This may cause users to only have the ability to view the tabpanel of the last tab. "The attribute aria-expanded is missing to convey which Tab is currently expanded. The role of tab is present and aria-selected is set to true. VoiceOver is announcing ""tab"" and ""1 of 3"" as well as ""Selected"" for the current tab.
Not sure what the need for aria-exapnded is when dealing with these specific page tabs, as the functionality to expand or collapse is not enabled" The attribute aria-expanded is missing to convey which Tab is currently expanded. The tabs are not accessible using the TalkBack screen reader when the page is viewed in the built-in Chrome browser. They are skipped over as if they did not exist. The content associated with each of the tabs is also not accessible. No Issues http://jqueryui.com/resources/demos/tabs/vertical.html
trees N/A
N/A - Not Available in Jquery UI Examples N/A N/A N/A N/A N/A N/A N/A N/A "These guidelines reflect the paradigm of a Tree control that is programmed as a client side widget only, that is used to dynamically update the DOM without a page refresh.
The Tree control should have only one tab stop in the tab order.
The only elements that should receive keyboard focus are the active elements that comprise each Tree node within the tree, including both branch and leaf nodes.
This behavior should precisely match the keyboard functionality of a standard Windows Explorer TreeView control. Press Windows+E to see an example of this in Windows.
The Left and Right arrow keys should expand or collapse branch nodes, and move focus forward or backward within the structure when a branch node is open or closed accordingly. (Once a leaf node has focus, the Right arrow key should do nothing when pressed, and the same should be true for the top level root node when the Left arrow is pressed.)
Pressing Up should move focus to the previous Tree node at the same logical level, or into the previous branch node if no others are present at this level.
Pressing Down should move focus to the next Tree node at the same logical level, or into the next branch or node that follows this one if no others are present at this level.
Pressing Home should move focus to the first top level Tree node.
Pressing End should move focus to the last Tree node in the farthest expanded branch.
Pressing a letter or number should move focus to the next Tree node at the same logical level that begins with the same letter or number.
Pressing Enter or Space on a Tree node should perform the same action as a click.
The only active elements that should be present within the Tree structure are Tree nodes, and there should be no others." "Required:
• role=tree must be present on the top level container that surrounds all focusable Tree nodes, and this container must not be focusable. There should be only one instance of role=tree, and it should not appear anywhere else within the Tree structure for the control that has one tab stop.
• aria-label or aria-labelledby must be set on the top level container that includes role=tree, which specifies an explicit label for the Tree control.
• role=group must be set on the top level container for all sub-tree structures within the parent structure, and this container must not be focusable.
• role=treeitem must be present on all focusable Tree nodes within the structure, including both branch and leaf nodes. (Only elements that include role=treeitem should be focusable)
• aria-level should be set on all elements that include role=treeitem, to specify the level of all related Tree nodes at the same logical level. (The top level node should be set to 0 or 1, and every subsequent branch via role=group should be incremented accordingly to maintain the proper order of nested branches)
• aria-expanded must be set on all branch nodes that include role=treeitem, and should be toggled between ""true"" and ""false"" to reflect the expanded or collapsed state of the branch. (This attribute must not be included within leaf nodes)
• aria-selected must be set to ""true"" on the currently selected node that includes role=treeitem, and must match the element that is focusable in the tab order. (This must be dynamically set to ""false"" on all other nodes that do not have focus, and only one Tree node at a time can receive keyboard focus.)
• aria-posinset and aria-setsize should be set on all elements that include role=treeitem, so that the correct ""X of Y"" positioning is conveyed to screen reader users." "Though another method for making ARIA Trees is available using aria-activedescendant, the method of setting focus to individual Tree nodes ensures accessibility going as far back as JAWS 11 in IE8.
The use of role=document, according to the ARIA specification is supposed to make it possible to embed other active elements within Tree containers that include role=tree. However, doing so causes JAWS to incorrectly read such elements so that their meaning and content cannot be determined when browsing, which can be seen going as far back as JAWS 11 in IE." N/A
sliders "
"
Default The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider.." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues "A slider takes up one tab stop in the tab order. A slider is user input where the user selects a value from within a given range. Sliders typically have a button such that when moved will change the current value within the current range of the slider. The button must be keyboard accessible. It is typically possible to add or subtract to the current value by using directional keys such as arrow keys.
Keyboard Interaction:
Right Arrow and Up Arrow increase the value of the slider.
Left Arrow and Down Arrow decrease the value of the slider.
Home and End move to the minimum and maximum values of the slider.
Tab moves into and out of the slider. It can be used to move between sliders if there are multiple sliders present.
Page Up and Page Down optionally increment or decrement the slider by a given amount." "Required:
• role=""slider"" must be included within the slide control, which matches the element that receives keyboard focus.
• aria-label or aria-labelledby on the same element that includes role=slider, sets an explicit textual label for the slider.
• aria-valuemin on the same element that includes role=slider, sets the minimum value for the slider, which is typically 0.
• aria-valuemax on the same element that includes role=slider, sets the maximum value for the slider, which must be greater than 0.
• aria-valuenow on the same element that includes role=slider, specifies the current value of the slider between min and max, and must dynamically reflect the current slider position as it is moved.
• aria-valuetext on the same element that includes role=slider, specifies the textual representation of aria-valuenow that is announced to screen reader users, and must dynamically reflect the current slider position as it is moved.
• aria-orientation on the same element that includes role=slider, specifies whether the slider is horizontal or vertical. (Horizontal is set by default if not specified)
" "In JAWS 14 in IE, the use of the Up and Down arrow keys to change the value of a vertical slider will repeatedly announce the same value, even though the ARIA markup is updated correctly. This is a known bug that is already reported to FS. For this reason, the Left and Right arrow keys should always be programmed to move the slider in addition to Up and Down, in case this issue occurs elsewhere.
E.G
Left and Up should move the slider back.
Right and Down should move the slider forward." http://jqueryui.com/resources/demos/slider/default.html
Colorpicker The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider. "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. "When colors are disabled, icons do not appear.
There are no textual labels as to which colors the sliders represent.
The color swatch does not have any textual alternative. Seeing as how the color is manipulated dynamically, it may be best to include the hexidecimal value of the resulting color." http://jqueryui.com/resources/demos/slider/colorpicker.html
Multiple Sliders The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider. "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. When colors are disabled, icons do not appear. http://jqueryui.com/resources/demos/slider/multiple-vertical.html
Range Slider The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider.." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/range.html
Range with fixed maximum The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab a slide the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/rangemax.html
Range with fixed minimum The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider.." "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab a slide the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/rangemin.html
Slider bound to select The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider. "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab a slide the control, or announce it as a slider.
The combo-box makes for an alternative to moving the slider, as it reflects the number chosen in the combo box. However, with no aria-valuenow attribute or other aria attributes, the current value of the slider is left out." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/hotelrooms.html
Slider scrollbar The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider. "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab a slide the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/side-scroll.html
Snap to increments The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider. "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/steps.html
Vertical range slider The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider. "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab the control, or announce it as a slider.
Also of note, is the that the bottom slider control appears before the top slider control in the tab order." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/range-vertical.html
Vertical slider The slider is keyboard accessible. "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." "The slider is not accessible to screen reader users.
The slider consists of a standard A tag with an href=""#"" attribute.
However, there is no ARIA markup to ensure accessibility for screen reader users.
As a result, the link is not conveyed as a slider control, there is no textual label to convey the purpose of the slider control, the current value of the slider is not conveyed, and nothing is announced when attempting to move the slider using the keyboard." Note: Within Safari, unable to move slider with the mouse using the commands VO+Spacebar. Within Firefox, able to move the slider with the VO+Spacebar. However, in either browser, VoiceOver does not announce this as a slider. "The role=slider is missing from the parent element. This slider control also lacks the appropriate aria-label or aria-labelledby attribute. None of the other attributes such as aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext or aria-orientation are included in the slider element. The slider element is simply an anchor, and announced as such.
VoiceOver is unable to grab the control, or announce it as a slider." The slider is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. The role=slider is missing from the parent element. This slider control also lacks the appropriate ARIA markup to ensure accessibility for screen reader users. The slider element is simply an anchor. TalkBack completely skips over the slider as if it did not exist on the page. No Issues http://jqueryui.com/resources/demos/slider/slider-vertical.html
accordion
Default "Only one accordion triggering element can receive keyboard focus in the tab order, making it necessary to use the arrow keys to navigate between each accordion link, which is non-intuitive.
This makes it necessary to Shift+Tab backwards through all active elements within an accordion section simply to set focus back on the accordion triggering element, so that the arrow keys can be used to navigate to a new accordion node to expand, then the process must be done all over again.
For an accordion to be keyboard accessible, all accordion triggering elements must be in the tab order, because all accordion content is inserted inline with the triggering element." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." Using role="tab" which is appropriate for this. Role="button" is not necessary and in fact may change the behavior in VoiceOver. This is using aria-expanded to identify the collapsable state; however, it seems to be at the tab panel level instead of the tab level and users are not aware when they are navigate through the tabs. Aria-pressed is not necessarily relevant, but aria-selected works well and VoiceOver announces when the tab is pressed. Opening and Clsoing the tab controls do work well in VoiceOver and the keyboard. "Role=""tab"" is being used instead of role=""button."" While this does not change the functionaility of the control, it is annouced as a tab, and may be confusing to the user. Aria-pressed is also not used, as is aria-expanded. The user is unaware of which control has been expanded to expose the content below.
It is important to note that the functionality of the opening and closing accordian panel is working with VoiceOver running." The accordion is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the accordion controls as if they did not exist on the page. "The icons that are in the headings of each accordion section are not visible when colors are disabled.
Note: The CSS used for the active, focused, tab sets the outline style to ""none"", hiding the visible focus when navigating with the keyboard." "An accordion component is a collection of expandable panels associated with a common outer container. Panels consist of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. The general look is similar to a tree where each root tree node is an expandable accordion header. The user navigates and makes the contents of each panel visible (or not) by interacting with the Accordion Header. Terms for understanding accordions include: accordion component - collection of panels within a common outer pane, accordion header - label area of an accordion panel (this is where you find the control to expand or collapse the panels), and accordion panel - contents area associated with an accordion header.
Keyboard Interaction:
Tab - When focus is on an accordion header, pressing the Tab key moves focus in the following manner: (1) If interactive glyphs or menus are present in the accordion header, focus moves to each in order. (2) When the corresponding panel is expanded (its aria-expanded state is 'true'), then focus moves to the first focusable element in the panel. (3) If the panel is collapsed (its aria-expanded state is 'false' or missing), OR, when the last interactive element of a panel is reached, the next Tab key press moves focus as follows: If a subsequent accordion panel is already expanded, focus moves to the first focusable element in this subsequent panel. If no subsequent accordion panel is expanded, focus moves to the first focusable element outside the accordion component.
Left arrow - When focus is on the accordion header, a press of up/left arrow keys moves focus to the previous logical accordion header. When focus reaches the first header, further up/left arrow key presses optionally wrap to the last header.
Right arrow - When focus is on the accordion header, a press of down/right moves focus to the next logical accordion header. When focus reaches the last header, further down/right arrow key presses optionally wrap to the first header.
Up arrow - Behaves the same as left arrow.
Down arrow - Behaves the same as right arrow." "When implemented using ARIA:
The accordion component must have a role of tablist and have aria-multiselectable=""true"". This will enable an assistive technology, such as a screen reader, to convey that the tablist is an accordion or a multiselectable tablist. This will also tell the user that the keyboard navigation matches an accordion and not a tablist. Contained within the tablist is a set of tab/tabpanel pairs. Each header tab in the tablist has a role of tab. The accordion panel uses the role tabpanel and should have an aria-labelledby relationship referencing the correponding header having a role of tab. The tabpanel is considered a grouping for all content consisting of that tabpanel. An accordion should manage the expanded/collapsed state of each tab by maintaining its aria-expanded state. An accordion should manage the selected state of each tab by maintaining its aria-selected state. An accordion should convey the visibility of each tabpanel by maintaining its aria-hidden state." http://jqueryui.com/resources/demos/accordion/default.html
Collapse content "Only one accordion triggering element can receive keyboard focus in the tab order, making it necessary to use the arrow keys to navigate between each accordion link, which is non-intuitive.
This makes it necessary to Shift+Tab backwards through all active elements within an accordion section simply to set focus back on the accordion triggering element, so that the arrow keys can be used to navigate to a new accordion node to expand, then the process must be done all over again.
For an accordion to be keyboard accessible, all accordion triggering elements must be in the tab order, because all accordion content is inserted inline with the triggering element." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." using role="tab" which is appropriate for this. Role="button" is not necessary and in fact may change the behavior in VoiceOver. This is using aria-expanded to identify the collapsable state; however, it seems to be at the tab panel level instead of the tab level and users are not aware when they are navigate through the tabs. Aria-pressed is not necessarily relevant, but aria-selected works well and VoiceOver announces when the tab is pressed. Opening and Clsoing the tab controls do work well in VoiceOver and the keyboard. "Role=""tab"" is being used instead of role=""button."" While this does not change the functionaility of the control, it is annouced as a tab, and may be confusing to the user. Aria-pressed is also not used, as is aria-expanded. The user is unaware of which control has been expanded to expose the content below.
It is important to note that the functionality of the opening and closing accordian panel is working with VoiceOver running." The accordion is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the accordion controls as if they did not exist on the page. The icons that are in the headings of each accordion section are not visible when colors are disabled. http://jqueryui.com/resources/demos/accordion/collapsible.html
Customize icons "Only one accordion triggering element can receive keyboard focus in the tab order, making it necessary to use the arrow keys to navigate between each accordion link, which is non-intuitive.
This makes it necessary to Shift+Tab backwards through all active elements within an accordion section simply to set focus back on the accordion triggering element, so that the arrow keys can be used to navigate to a new accordion node to expand, then the process must be done all over again.
For an accordion to be keyboard accessible, all accordion triggering elements must be in the tab order, because all accordion content is inserted inline with the triggering element." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." The toggle icons may be confusing to users with VoiceOver as it only appears to be adding a css class to show the icons. using role="tab" which is appropriate for this. Role="button" is not necessary and in fact may change the behavior in VoiceOver. This is using aria-expanded to identify the collapsable state; however, it seems to be at the tab panel level instead of the tab level and users are not aware when they are navigate through the tabs. Aria-pressed is not necessarily relevant, but aria-selected works well and VoiceOver announces when the tab is pressed. The controls do work well in VoiceOver and the keyboard. "Role=""tab"" is being used instead of role=""button."" While this does not change the functionaility of the control, it is annouced as a tab, and may be confusing to the user. Aria-pressed is also not used, as is aria-expanded. The user is unaware of which control has been expanded to expose the content below.
The cusomized icons in this widget have no bearing on the funcionality of the panels, as they are not rendered by VoiceOver.
It is important to note that the functionality of the opening and closing accordian panel is working with VoiceOver running." The accordion is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the accordion controls as if they did not exist on the page. The icons that are in the headings of each accordion section are not visible when colors are disabled. http://jqueryui.com/resources/demos/accordion/custom-icons.html
Fill space "Only one accordion triggering element can receive keyboard focus in the tab order, making it necessary to use the arrow keys to navigate between each accordion link, which is non-intuitive.
This makes it necessary to Shift+Tab backwards through all active elements within an accordion section simply to set focus back on the accordion triggering element, so that the arrow keys can be used to navigate to a new accordion node to expand, then the process must be done all over again.
For an accordion to be keyboard accessible, all accordion triggering elements must be in the tab order, because all accordion content is inserted inline with the triggering element." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." The resizable feature is not announced in VoiceOver, there is no indication of the resizable content and users are not able to navigate to this using a keyboard. Using role="tab" which is appropriate for this. Role="button" is not necessary and in fact may change the behavior in VoiceOver. This is using aria-expanded to identify the collapsable state; however, it seems to be at the tab panel level instead of the tab level and users are not aware when they are navigate through the tabs. Aria-pressed is not necessarily relevant, but aria-selected works well and VoiceOver announces when the tab is pressed. Opening and Clsoing the tab controls do work well in VoiceOver and the keyboard. "Role=""tab"" is being used instead of role=""button."" While this does not change the functionaility of the control, it is annouced as a tab, and may be confusing to the user. Aria-pressed is also not used, as is aria-expanded. The user is unaware of which control has been expanded to expose the content below.
The element that allows the user to re-size the accordion panel area () cannot receive keyboard focus, as it is a ., which by default cannot receive keyboard focus. VoiceOver cannot engage this element and execute the resizing function.
It is important to note that the functionality of the opening and closing accordian panel is working with VoiceOver running." The accordion is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the accordion controls as if they did not exist on the page. The icons that are in the headings of each accordion section are not visible when colors are disabled. http://jqueryui.com/resources/demos/accordion/fillspace.html
No auto height "Only one accordion triggering element can receive keyboard focus in the tab order, making it necessary to use the arrow keys to navigate between each accordion link, which is non-intuitive.
This makes it necessary to Shift+Tab backwards through all active elements within an accordion section simply to set focus back on the accordion triggering element, so that the arrow keys can be used to navigate to a new accordion node to expand, then the process must be done all over again.
For an accordion to be keyboard accessible, all accordion triggering elements must be in the tab order, because all accordion content is inserted inline with the triggering element." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." Using role="tab" which is appropriate for this. Role="button" is not necessary and in fact may change the behavior in VoiceOver. This is using aria-expanded to identify the collapsable state; however, it seems to be at the tab panel level instead of the tab level and users are not aware when they are navigate through the tabs. Aria-pressed is not necessarily relevant, but aria-selected works well and VoiceOver announces when the tab is pressed. Opening and Clsoing the tab controls do work well in VoiceOver and the keyboard. "Role=""tab"" is being used instead of role=""button."" While this does not change the functionaility of the control, it is annouced as a tab, and may be confusing to the user. Aria-pressed is also not used, as is aria-expanded. The user is unaware of which control has been expanded to expose the content below.
It is important to note that the functionality of the opening and closing accordian panel is working with VoiceOver running." The accordion is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the accordion controls as if they did not exist on the page. The icons that are in the headings of each accordion section are not visible when colors are disabled. http://jqueryui.com/resources/demos/accordion/no-auto-height.html
Open on hoverintent "Only one accordion triggering element can receive keyboard focus in the tab order, making it necessary to use the arrow keys to navigate between each accordion link, which is non-intuitive.
This makes it necessary to Shift+Tab backwards through all active elements within an accordion section simply to set focus back on the accordion triggering element, so that the arrow keys can be used to navigate to a new accordion node to expand, then the process must be done all over again.
For an accordion to be keyboard accessible, all accordion triggering elements must be in the tab order, because all accordion content is inserted inline with the triggering element." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page." While the focus of this feature as a mouse interaction, this also works using a keyboard. Using role="tab" which is appropriate for this. Role="button" is not necessary and in fact may change the behavior in VoiceOver. This is using aria-expanded to identify the collapsable state; however, it seems to be at the tab panel level instead of the tab level and users are not aware when they are navigate through the tabs. Aria-pressed is not necessarily relevant, but aria-selected works well and VoiceOver announces when the tab is pressed. Opening and Clsoing the tab controls do work well in VoiceOver and the keyboard. "Role=""tab"" is being used instead of role=""button."" While this does not change the functionaility of the control, it is annouced as a tab, and may be confusing to the user. Aria-pressed is also not used, as is aria-expanded. The user is unaware of which control has been expanded to expose the content below.
The accordion panels do not open or close on focus, but the function to open or close is still there if the user activates with a double tap with VoiceOver running." The accordion is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the accordion controls as if they did not exist on the page. The icons that are in the headings of each accordion section are not visible when colors are disabled. http://jqueryui.com/resources/demos/accordion/hoverintent.html
Sortable "Only one accordion triggering element can receive keyboard focus in the tab order, making it necessary to use the arrow keys to navigate between each accordion link, which is non-intuitive.
This makes it necessary to Shift+Tab backwards through all active elements within an accordion section simply to set focus back on the accordion triggering element, so that the arrow keys can be used to navigate to a new accordion node to expand, then the process must be done all over again.
For an accordion to be keyboard accessible, all accordion triggering elements must be in the tab order, because all accordion content is inserted inline with the triggering element.
The ability to re-sort accordion panels is not accessible from the keyboard." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page.
The re-sort functionality is inaccessible from the keyboard." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page.
The re-sort functionality is inaccessible from the keyboard." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page.
The re-sort functionality is inaccessible from the keyboard." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page.
The re-sort functionality is inaccessible from the keyboard." "The accordion triggering elements are incorrectly represented as ARIA Tabs, making it impossible to know the difference between an accordion control where content is inserted inline and an actual Tab group where content is inserted after the group of Tab links.
Also, the use of role=tablist on the accordion container causes nesting conflicts when other ARIA widgets are included within expanded accordion panels.
The expanded and collapsed state of each accordion triggering element is not conveyed.
All of the triggering elements within the accordion have only one tab stop, which is non-intuitive for contiguous navigation when navigating down the page.
The re-sort functionality is inaccessible from the keyboard." The draggable option is not available for users of VoiceOver unless they are using a mouse. Using role="tab" which is appropriate for this. Role="button" is not necessary and in fact may change the behavior in VoiceOver. This is using aria-expanded to identify the collapsable state; however, it seems to be at the tab panel level instead of the tab level and users are not aware when they are navigate through the tabs. Aria-pressed is not necessarily relevant, but aria-selected works well and VoiceOver announces when the tab is pressed. Opening and Clsoing the tab controls do work well in VoiceOver and the keyboard. "Role=""tab"" is being used instead of role=""button."" While this does not change the functionaility of the control, it is annouced as a tab, and may be confusing to the user. Aria-pressed is also not used, as is aria-expanded. The user is unaware of which control has been expanded to expose the content below.
The user is also unable to grab the panel and resort them with VoiceOver running. For an aria solution, aria-grabbed="""" attribute could be an alternative for the sortable panels.
It is important to note that the functionality of the opening and closing accordian panel is working with VoiceOver running." The accordion is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the accordion controls as if they did not exist on the page. The icons that are in the headings of each accordion section are not visible when colors are disabled. http://jqueryui.com/resources/demos/accordion/sortable.html
grid N/A
Button
Default functionality Pressing Enter works fine on button, submit, and anchor elements. However, pressing space scrolls down the page on an anchor element. Button and submit elements work fine. Reads that it is a button properly on button, submit, and anchor elements. Reads that it is a button properly on button, submit, and anchor elements. Reads that it is a button properly on button, submit, and anchor elements. Reads that it is a button properly on button, submit, and anchor elements. Pressing Enter works fine on button, submit, and anchor elements. However, pressing space scrolls down the page on an anchor element. Button and submit elements work fine. The button elements are not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the button examples as if they did not exist on the page. Each element (button, submit, and anchor) still visually appears as a button when colors are disabled in IE. The text is displayed with a border around it. role="button" and aria-disabled="false" are applied to the button, submit, and anchor elements properly. http://jqueryui.com/resources/demos/button/default.html
Checkboxes "In ie9
When in browse mode it is not possible to tab to the checkboxes. This could be because of the frame. In Focus mode it is possible to tab to the check boxes.
When tabbing the the checkboxes in Focus or Browse mode the Name Role and State of the checkbox is announced as expected.
When the Space bar is pressed on a Checkbox the new state of the checkbox is announced as expected.
When navigating with the ARROW keys in Browse mode the Name of the Checkbox is not announced. The name of the checkbox is assigned to a button that is just after the checkbox in the reading order but that does not appear in the tab order.
The quick navagation key x moves to each checkbox as expected." "When tabbing to the checkboxes the Name Role and STATE of the checkboxes are announced as expected.
When the spaceBar is pressed on one of the checkboxes in Focus or Browse mode the new state of the checkbox is announced as expected.
When navigating with the ARROW keys in Browse mode the Name of the Checkbox is not announced. The name of the checkbox is assigned to a button that is just after the checkbox in the reading order but that does not appear in the tab order.
The quick Navigation key X moves to each checkbox as expected." "When in browse mode it is not possible to tab to the checkboxes. This could be because of the frame. In Focus mode it is possible to tab to the check boxes.
When tabbing the the checkboxes in Focus or Browse mode the Name Role and State of the checkbox is announced as expected.
When the Space bar is pressed on a Checkbox the new state of the checkbox is announced as expected. " When tabbing to the checkboxes, the Name, Role, and STATE of the checkboxes are announced as expected. When the spaceBar is pressed on one of the checkboxes, the new state of the checkbox is announced as expected regardless of whether or not the Virtual Cursor is active. The quick Navigation key X moves to each checkbox as expected. When tabbing to the checkboxes, the Name, Role, and STATE of the checkboxes are announced as expected. When the spaceBar is pressed on one of the checkboxes, the new state of the checkbox is announced as expected regardless of whether or not the Virtual Cursor is active. The quick Navigation key X moves to each checkbox as expected. The button elements are not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the button examples as if they did not exist on the page. http://jqueryui.com/resources/demos/button/checkbox.html
Icons "In ie9
Reads that it is a button properly on button, submit, and anchor elements.
The quick navigation key b moves to each button as expected." "Reads that it is a button properly on button, submit, and anchor elements.
The quick navigation key b moves to each button as expected." Reads that it is a button properly on button, submit, and anchor elements. "Reads that it is a button properly on button, submit, and anchor elements.
The quick navigation key b moves to each button as expected." "Reads that it is a button properly on button, submit, and anchor elements.
The quick navigation key b moves to each button as expected." The button elements are not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the button examples as if they did not exist on the page. http://jqueryui.com/resources/demos/button/icons.html
Radios "In ie9
When navigating with the arrow keys in focus or brows mode the Name Role and State of the radio buttons are announced as expected.
When tabbing to the radio buttons in Focus mode the Name Role and Value are announced as expected.
In browse mode it is not possible to SHIFT+TAB away from the radio button group." "When navigating with the arrow keys in focus or brows mode the Name Role and State of the radio buttons are announced as expected.
When tabbing to the radio buttons in Focus mode the Name Role and Value are announced as expected.
" "When navigating with the arrow keys in focus or brows mode the Name Role and State of the radio buttons are announced as expected.
When tabbing to the radio buttons in Focus mode the Name Role and Value are announced as expected.
In browse mode it is not possible to SHIFT+TAB away from the radio button group." When navigating with the arrow keys, the Name, Role, and State of the radio buttons are announced as expected. The quick navigation key "R" moves to the radio buttons as expected. When navigating with the virtual cursor turned off, the name, role and state of the radio buttons are announced as expected. When navigating with the arrow keys, the Name, Role, and State of the radio buttons are announced as expected. The quick navigation key "R" moves to the radio buttons as expected. When navigating with the virtual cursor turned off, the name, role and state of the radio buttons are announced as expected. The button elements are not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the button examples as if they did not exist on the page. http://jqueryui.com/resources/demos/button/radio.html
Split button "In ie9
There is no indication that the split button is a split button. It is rendered as 2 buttons. The buttons work as expected but there is no indication that they really are the same control." There is no indication that the split button is a split button. It is rendered as 2 buttons. The buttons work as expected but there is no indication that they really are the same control. There is no indication that the split button is a split button. It is rendered as 2 buttons. The buttons work as expected but there is no indication that they really are the same control. There is no indication that the split button is a split button. It is rendered as 2 buttons. The buttons work as expected but there is no indication that they really are the same control. There is no indication that the split button is a split button. It is rendered as 2 buttons. The buttons work as expected but there is no indication that they really are the same control. The button elements are not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the button examples as if they did not exist on the page. http://jqueryui.com/resources/demos/button/splitbutton.html
Toolbar "In ie9
All controls in the toolbar announce the Name Role, State as expected. There is no indication of the toolbar. " All controls in the toolbar announce the Name Role, State as expected. There is no indication of the toolbar. All controls in the toolbar announce the Name Role, State as expected. There is no indication of the toolbar. All controls in the toolbar announce the Name, Role, and State as expected. There is no indication that these controls are located on a toolbar. All controls in the toolbar announce the Name, Role, and State as expected. There is no indication that these controls are located on a toolbar. The button elements are not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the button examples as if they did not exist on the page. http://jqueryui.com/resources/demos/button/toolbar.html
Progressbar
Default functionality In Firefox, the progress bar is not included in the tabbing order. In IE, focus first is placed on the progress bar and then onto hidden content with no MSAA name, value, or role available. "in ie9
When navigating with the arrow keys NVDA announces Progressbar 37." When navigating with the arrow keys NVDA announces Progressbar 37. When navigating with the arrow keys NVDA announces Default determinate progress bar. When navigating with the arrow keys, JAWS announces 37 Progress Bar. When navigating with the arrow keys, JAWS announces "Default determinate progress bar". The progress bar is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the progress bar examples as if they did not exist on the page. The border is still present with colors disabled in IE and a line is used to indicate the progress. Both sides of the line are white so there is no visual indication of a difference on either side of the line. "A Progressbar is an element that displays the progress status for tasks that take a long time. It indicates that the user's request has been received and the application is making progress toward completing the requested action. The author SHOULD supply values for aria-valuenow, aria-valuemin, and aria-valuemax, unless the value is indeterminate, in which case the author SHOULD omit the aria-valuenow attribute. Authors SHOULD update these values when the visual progress indicator is updated. If the progressbar is describing the loading progress of a particular region of a page, the author SHOULD use aria-describedby to point to the status, and set the aria-busy attribute to true on the region until it is finished loading. It is not possible for the user to alter the value of a progressbar because it is always readonly.
Note: Assistive technologies generally will render the value of aria-valuenow as a percent of the range between the value of aria-valuemin and aria-valuemax, unless aria-valuetext is specified. It is best to set the values for aria-valuemin, aria-valuemax, and aria-valuenow in a manner that is appropriate for this calculation.
Note: Elements with the role progressbar have an implicit aria-readonly value of true
The Progressbar widget does not require any keyboard shortcuts." The example progress bar is 37% completed. The following ARIA attributes are applied; role="progressbar", aria-valuemin="0", aria-valuemax="100", aria-valuenow="37". http://jqueryui.com/resources/demos/progressbar/default.html
Custom Label "In ie9
When navigating with the arrow keys NVDA announces Progressbar 100." When navigating with the arrow keys NVDA announces Progressbar 100. When navigating with the arrow keys NVDA announces Progressbar complete.. When navigating with the arrow keys, JAWS announces "43 progress bar", or whatever the current value is followed by the words "progress bar". When navigating with the arrow keys, JAWS announces "43 progress bar", or whatever the current value is followed by the words "progress bar". The progress bar is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the progress bar examples as if they did not exist on the page. http://jqueryui.com/resources/demos/progressbar/label.html
Indeterminate Value "In ie9
The progressbar is not anounced when navigating with the arrow keys." The progressbar is not anounced when navigating with the arrow keys. The progressbar is not anounced when navigating with the arrow keys. The progress bar is announced as "75 progress bar" once the random value button on this page is activated. The progress bar is not announced if the other options on this page, such as "random color" and "indeterminate" are used. The progress bar is announced as "75 progress bar" once the random value button on this page is activated. The progress bar is not announced if the other options on this page, such as "random color" and "indeterminate" are used. The progress bar is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the progress bar examples as if they did not exist on the page. http://jqueryui.com/resources/demos/progressbar/indeterminate.html
Spinner
Default functionality "In ie9
When Navigating to the Spinner with the tab or arrow keys in browse mode the Name, Role and Value are announced as expected.
In Browse Mode when the UP and DOWN ARROW Keys are used the currently selected value of the spinner is not announced.
In focus mode when the UP and DOWN arrow keys are used to change the value, the new value is announced twice.
When PGUP and PGDN are used the value is increased or decreased by 10 and is announced twice.
When the Spinner is disabled the Name and role are announced but not the value the STATE is also announced. The current value should be announced when the Spinner is disabled." "When Navigating to the Spinner with the tab or arrow keys in browse mode the Name, Role and Value are announced as expected.
In Browse Mode when the UP and DOWN ARROW Keys are used the currently selected value of the spinner is not announced.
In focus mode when the UP and DOWN arrow keys are used to change the value, the new value is announced twice.
When PGUP and PGDN are used the value is increased or decreased by 10 and is announced twice.
When the Spinner is disabled the Name and role are announced but not the value the STATE is also announced. The current value should be announced when the Spinner is disabled." "When Navigating to the Spinner with the tab or arrow keys in browse mode the Name, Role and Value is announced as expected.
In focus mode when the UP and DOWN arrow keys are used the new value is not announced.
When PGUP and PGDN are used the value is increased or decreased by 10 and is not announced . It is possible to read the new value with INSERT+TAB.
When the Spinner is disabled the Name, role, value and STATE are anounced as expected." When Navigating to the Spinner with the tab key, the Name, Role and Value are announced as expected. If navigating to it using the arrow keys with the virtual cursor active, the name and role are not announced, but the currently selected value is announced. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 10 but is not automatically announced. It is possible to read the new value with Insert+Up Arrow. When the Spinner is disabled, it does not receive focus when navigating the page using the tab key, but the name, value and current state can be determined when reading the page with the virtual cursor. When Navigating to the Spinner with either the tab key or the arrow keys, the Name, Role and Value are announced as expected. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 10, and the new value is automatically announced. When the Spinner is disabled, it does not receive focus when navigating the page using the tab key, but the name, role, value and current state can be determined when reading the page with the virtual cursor. The spinner is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the spinner examples as if they did not exist on the page. "A Spinner is a widget that allows users to select from a range of values. A spinbutton typically provides the use of an up and down button on the keyboard. Visibly, the value is incremented or decremented until a maximum or minimum value is reached. A spinbutton usually includes a text field to display the current value and allow users to edit the value directly.
Keyboard Interaction:
The associated text field generally supports standard text entry operations such as selection of characters, deletions, insertions, and caret movement using the Right Arrow and Left Arrow keys. The exception is when the spinbutton's value space is restricted and the associated script limits the characters. For example, an hour-and-minute spinner would allow only the digits 1-59, the colon ':', and the characters 'AM' and 'PM'. If the user typed any other character, it would not change the contents of the text field nor the value of the spinbutton.
Up Arrow increases the value.
Down Arrow decreases the value.
Home and End key move to the maximum or minimum values.
Optional: Page Up and Page Down increase or decrease the value in larger steps.
Tab key moves into and out of the widget.
Focus should remain on the edit field." spinbutton is a child of both composite and range. It requires current, minimum, and maximum values be set with the WAI-ARIA properties aria-valuenow, aria-valuemin, and aria-valuemax. http://jqueryui.com/resources/demos/spinner/default.html
Currency The up/down arrows used to change the value in the input field are not included in the tabbing order. These elements cannot receive focus using the keyboard. When focus is placed in the spinner input field, however, the up/down arrows on the keyboard can be used to change the value. There is no indication of this so this functionality is not intuitive. "In ie9
When navigating to the Currency Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Currency Spinner in Browse mode using the Arrow keys the currently selected value is not announced. The currently selected value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the currency Spinner the new value is announced ones as a dollar amount followed by a decimal number. for example $5.00 5. " "When navigating to the Currency Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Currency Spinner in Browse mode using the Arrow keys the currently selected value is not announced. The currently selected value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the currency Spinner the new value is announced ones as a dollar amount followed by a decimal number. for example $5.00 5. " "When navigating to the Currency Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Currency Spinner in Browse mode using the Arrow keys the currently selected value is announced.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the currency Spinner in Focus mode the new value is not announced. " When Navigating to the Currency Spinner with the tab key, the Name, Role and Value are announced as expected. If navigating to it using the arrow keys with the virtual cursor active, the name and role are not announced, but the currently selected value is announced. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 250 but is not automatically announced. It is possible to read the new value with Insert+Up Arrow. When Navigating to the Currency Spinner with either the tab key or the arrow keys, the Name, Role and Value are announced as expected. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 250, and the new value is automatically announced. The spinner is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the spinner examples as if they did not exist on the page. When colors are disabled, the up/down arrows used to change the value are not displayed. There is no visual indication that elements are present to change the value in the input field. The ARIA attribute of role="spinbutton" is applied to the spinner element. There is also aria-valuemin="1", aria-valuemax="50", and aria-valuenow="1" which define the minimum, maximum, and current values. http://jqueryui.com/resources/demos/spinner/currency.html
Decimal "In ie9
When navigating to the decimal Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the decimal Spinner in Browse mode using the Arrow keys the currently selected value is not announced. The currently selected value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the Decimal Spinner the new value is announced twice" "When navigating to the decimal Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the decimal Spinner in Browse mode using the Arrow keys the currently selected value is not announced. The currently selected value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the Decimal Spinner the new value is announced twice" "When navigating to the decimal Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the decimal Spinner in Browse mode using the Arrow keys the currently selected value is announced.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the Decimal Spinner in focus mode the new value is not announced." When Navigating to the Decimal Spinner with the tab key, the Name, Role and Value are announced as expected. If navigating to it using the arrow keys with the virtual cursor active, the name and role are not announced, but the currently selected value is announced. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 0.1 but is not automatically announced. It is possible to read the new value with Insert+Up Arrow. When Navigating to the Decimal Spinner with either the tab key or the arrow keys, the Name, Role and Value are announced as expected. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 0.1, and the new value is automatically announced. The spinner is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the spinner examples as if they did not exist on the page. http://jqueryui.com/resources/demos/spinner/decimal.html
Map "In ie9
When navigating to the MapSpinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Map Spinner in Browse mode using the Arrow keys the currently selected value is not announced. The currently selected value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the Map Spinner the new value is announced twice" "When navigating to the MapSpinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Map Spinner in Browse mode using the Arrow keys the currently selected value is not announced. The currently selected value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in the Map Spinner the new value is announced twice" "When navigating to the MapSpinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Map Spinner in Browse mode using the Arrow keys the currently selected value is announced as expected.
When the PgUP PGDN or UP and DOWN ARROW keys are used in Focus mode in the map Spinner the new value is not announced." When Navigating to the Map Spinner with the tab key, the Name, Role and Value are announced as expected. If navigating to it using the arrow keys with the virtual cursor active, the name and role are not announced, but the currently selected value is announced. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 0.01 but is not automatically announced. It is possible to read the new value with Insert+Up Arrow. When Navigating to the Map Spinner with either the tab key or the arrow keys, the Name, Role and Value are announced as expected. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 0.01, and the new value is automatically announced. The spinner is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the spinner examples as if they did not exist on the page. http://jqueryui.com/resources/demos/spinner/latlong.html
Overflow "In ie9
When navigating to the Overflow Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Overflow Spinner in Browse mode using the Arrow keys the value of the Overflow Spinner is not announced. The Name Role and value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in focus mode in the Overflow Spinner the new value is announced twice" "When navigating to the Overflow Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Overflow Spinner in Browse mode using the Arrow keys the value of the Overflow Spinner is not announced. The Name Role and value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in focus mode in the Overflow Spinner the new value is announced twice" "When navigating to the Overflow Spinner using the Tab Key the Name Role and value are announced as expected. When Navigating to the Overflow Spinner in Browse mode using the Arrow keys the value of the Overflow Spinner is not announced. The Name Role and value should be announced in Browse mode.
When the PgUP PGDN or UP and DOWN ARROW keys are used in focus mode in the Overflow Spinner the new value is not announced. " When Navigating to the Overflow Spinner with the tab key, the Name, Role and Value are announced as expected. If navigating to it using the arrow keys with the virtual cursor active, the name and role are not announced, but the currently selected value is announced. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 10 but is not automatically announced. It is possible to read the new value with Insert+Up Arrow. When Navigating to the Overflow Spinner with either the tab key or the arrow keys, the Name, Role and Value are announced as expected. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by 10, and the new value is automatically announced. The spinner is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the spinner examples as if they did not exist on the page. http://jqueryui.com/resources/demos/spinner/overflow.html
Time "In ie9
When Navigating to the Time spinner using the TAB key NVDA announces the Name Role and value of the spinner as expected.
It is not possible to determine the current value of the time spinner when navigating with the arrow keys in Browse Mode. When Reading the page in Browse mode there are 2 unlabeled buttons that are not in the tab order.
When using the Up and DOWN ARROW keys in focus mode to change the value extra text is announced. " "When Navigating to the Time spinner using the TAB key NVDA announces the Name Role and value of the spinner as expected.
It is not possible to determine the current value of the time spinner when navigating with the arrow keys in Browse Mode. When Reading the page in Browse mode there are 2 unlabeled buttons that are not in the tab order.
When using the Up and DOWN ARROW keys in focus mode to change the value extra text is announced. " "When Navigating to the Time spinner using the TAB key NVDA announces the Name Role and value of the spinner as expected.
It is not possible to determine the current value of the time spinner when navigating with the arrow keys in Browse Mode. When Reading the page in Browse mode there are 2 unlabeled buttons that are not in the tab order.
When using the Up and DOWN ARROW keys in focus mode to change the value the new value is not announced." When Navigating to the Time Spinner with the tab key, the Name, Role and Value are announced as expected. If navigating to it using the arrow keys with the virtual cursor active, the name and role are not announced, but the currently selected value is announced. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by an hour but is not automatically announced. It is possible to read the new value with Insert+Up Arrow. When Navigating to the Time Spinner with either the tab key or the arrow keys, the Name, Role and Value are announced as expected. When forms mode is active and the Spinner is focused, using the UP and DOWN arrow keys change the value, and the newly-selected value gets announced. When PGUP and PGDN are used the value is increased or decreased by an hour, and the new value is automatically announced. The spinner is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the spinner examples as if they did not exist on the page. http://jqueryui.com/resources/demos/spinner/time.html
Menu
Default functionality Focus is placed on the menu as a whole and not the first list item. Using the arrow keys, I can navigate through the menu items but this is not intuitive. I could not tab to each item individually. Also, inactive items were able to receive focus. "In ie9
When navigating with the arrow key, NVDA is announcing each menu item and what number it is out of the list. If an item has a sub-menu, NVDA is identifying it, and the user can use the arrow keys to navigate through the various levels, with NVDA announcing each item. When using the tab key, focus cannot move past the menu widget itself. Activating the tab key does nothing to move the user past the menu, with nothing being announced. Once stuck, the user can use the arrow keys to move into the menu, but there is no instruction to do so." When navigating to the the default menu using the arrow keys, NVDA is announcing each top level item as a menu item. For items that contain a sub-menu, NVDA is announcing "sub-menu." However, the user is unable to access the sub-menu items with the arrow keys. Using the tab key, the user is able to tab into the first item in the menu (or the menu as a whole), but not to individual menu items. There does not appear to be a way to access the sub menus with NVDA announcing the items. Activating the space bar on one of the top level menu items cuts off NVDA but does allow for arrow key navigation through the menu. When navigating with the arrow key, NVDA is announcing each menu item and what number it is out of the list. If an item has a sub-menu, NVDA is identifying it, and the user can use the arrow keys to navigate through the various levels, with NVDA announcing each item. When using the tab key, focus cannot move past the menu widget itself. Activating the tab key does nothing to move the user past the menu, with nothing being announced. Once stuck, the user can use the arrow keys to move into the menu, but there is no instruction to do so. When navigating with the arrow keys, JAWS announces each menu item. If an item has a sub-menu, JAWS indicates this after the menu name, and the user can use the arrow keys to navigate through the various levels, with JAWS announcing each item. Inactive menu items gain focus, but JAWS does not indicate that they are unavailable. The enter key can be used to activate the currently selected item. To close the menu, it is necessary to press the tab key twice, as pressing it once or using the escape key does not work. When navigating with the arrow keys, JAWS announces each menu item. If an item has a sub-menu, JAWS indicates this after the menu name, and the user can use the arrow keys to navigate through the various levels, with JAWS announcing each item. If a menu item is inactive, JAWS indicates this by announcing "unavailable" after the menu item's name. The enter key can be used to activate the currently selected item. To close the menu, it is necessary to press the tab key, as pressing the escape key does not work. The menu is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the menu examples as if they did not exist on the page. When colors are disabled, the arrows that indicate there sub-options are not displayed. There is no indication of sub-lists with colors disabled. "A menu is a type of widget that offers the user a list of choices. It is often a list of links to important sections of a document or a site. The menu role is appropriate when the list of links is presented in a manner similar to a menu on a desktop application. A menubar is also considered a form of menu. A menu should manage the focus of its descendants. Sometimes a menu item will launch a dialog box. This is indicated using ""…"" (ellipsis) at the end of the menu item label. An example is ""Save as …"".
Keyboard Interaction:
The menubar takes up one stop in the tab order, can can be navigated with the following keyboard shortcuts:
Left Arrow: Collapse currently focused expanded submenu, or move focus to the to left adjacent submenu in the menubar
Right Arrow: Expand currently focused collapsed menu item, or move focus to the right adjacent submenu in the menubar
Up Arrow: move focus up in the currently expanded submenu, or wrap focus to its last item
Down Arrow: move focus down in the currently expanded submenu, or wrap focus to its first item
Escape: Collapse the currently focused submenu without activating a menu item
Enter: Activate the currently focused menu item, or expand it if it has a submenu
Any letter key: Perform a first letter search in the currently expanded submenu" The ARIA role="menu" attribute is applied and there is also an attribute of aria-activedescendant="ui-id-3". http://jqueryui.com/resources/demos/menu/default.html
Icons "in ie9
When navigating with the arrow key, NVDA is announcing each menu item and what number it is out of the list. If an item has a sub-menu, NVDA is identifying it, and the user can use the arrow keys to navigate through the various levels, with NVDA announcing each item. When using the tab key, focus cannot move past the menu widget itself. Activating the tab key does nothing to move the user past the menu, with nothing being announced. Once stuck, the user can use the arrow keys to move into the menu, but there is no instruction to do so." When navigating to the the default menu using the arrow keys, NVDA is announcing each top level item as a menu item. For items that contain a sub-menu, NVDA is announcing "sub-menu." However, the user is unable to access the sub-menu items with the arrow keys. Using the tab key, the user is able to tab into the first item in the menu (or the menu as a whole), but not to individual menu items. There does not appear to be a way to access the sub menus with NVDA announcing the items. Activating the space bar on one of the top level menu items cuts off NVDA but does allow for arrow key navigation through the menu. When navigating with the arrow key, NVDA is announcing each menu item and what number it is out of the list. If an item has a sub-menu, NVDA is identifying it, and the user can use the arrow keys to navigate through the various levels, with NVDA announcing each item. When using the tab key, focus cannot move past the menu widget itself. Activating the tab key does nothing to move the user past the menu, with nothing being announced. Once stuck, the user can use the arrow keys to move into the menu, but there is no instruction to do so. When navigating with the arrow keys, JAWS announces each menu item. If an item has a sub-menu, JAWS indicates this after the menu name, and the user can use the arrow keys to navigate through the various levels, with JAWS announcing each item. Inactive menu items gain focus, but JAWS does not indicate that they are unavailable. The enter key can be used to activate the currently selected item. To close the menu, it is necessary to press the tab key twice, as pressing it once or using the escape key does not work. When navigating with the arrow keys, JAWS announces each menu item. If an item has a sub-menu, JAWS indicates this after the menu name, and the user can use the arrow keys to navigate through the various levels, with JAWS announcing each item. If a menu item is inactive, JAWS indicates this by announcing "unavailable" after the menu item's name. The enter key can be used to activate the currently selected item. To close the menu, it is necessary to press the tab key, as pressing the escape key does not work. The menu is not accessible to users of the TalkBack screen reader when used with the Chrome Browser. TalkBack completely skips over the menu examples as if they did not exist on the page. http://jqueryui.com/resources/demos/menu/icons.html
N/A - Not Available in Jquery UI Examples N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A "An editable Grid control should have only one tab stop in the tab order.
The cell that receives focus should be reflected visually using CSS.
Once focus is set within an editable Grid, the Up and Down arrow keys should move focus to the previous or next row in the grid.
The Left and Right arrow keys should move focus to the previous or next cell in the Grid.
The Home key should set focus to the first cell in the current row, and the End key should set focus to the last cell in the current row.
If pagination is enabled, the PageUp and PageDown keys should load the previous or next page in the Grid and set focus appropriately so that arrow navigation can continue in a logical manner.
The Control+Home and Control+End key commands should load the first or last pages in the pagination control when activated and set focus appropriately.
The Enter or Space keys should activate the currently selected cell and perform the same action as a click for a mouse user.
Pressing the Tab key should move focus out of the Grid and set focus to the next active element in the tab order." "Required:
• role=grid must be set on the top level container for the grid rows and cells, in the same manner that a Table element must surround the TR tags of a table.
• aria-readonly=true must be set on the same element that includes role=grid if the Grid control is meant to be a static table that does not appear in the tab order.
• role=row must be set to specify row associations within the grid.
• role=columnheader must be used to specify column header cells within the grid, and these cells must include textual information to convey column header label text. (These cells must be children of the container with role=row)
• role=rowheader must be used to specify row header cells within the grid if applicable, and these cells must include textual information to convey row header label text. (These cells must be children of the container with role=row)
• role=gridcell must be used to specify internal cells within the grid, and these elements must be children of the container with role=row.
• aria-describedby must be set on all elements that include role=gridcell, and this must point to the ID of the associated column header cell that includes role=columnheader, as well as the ID of the cell that includes role=rowheader if applicable.
• aria-selected must be toggled between ""true"" and ""false"" on the element that includes role=gridcell to indicate when a cell is selected. If an entire row is selected, all cells with role=gridcell must have the same attribute applied to each cell within that row.
The elements that receive keyboard focus within an editable Grid, must always be the same elements that include the attribute role=gridcell. " N/A