From ec05890d325743d7605dbb6c746bdb7579ac9812 Mon Sep 17 00:00:00 2001
From: Nick Schonning Option 1: Listbox containing links Option 2: Toolbar containing toggle buttons Each element referenced by the flowto must have have a unique id. The combination of the unique id and the name allow the assistive technology to adequately assist the user in retracing their steps backward through a flow to reference or moving forward to it. Since the author sets only the target the user agent is responsible for mapping the backward reference relationship. Therefore, neither the user agent nor the user can get lost. The host user agent does not provide an alternative navigation order; this is an assistive technology function. Each element referenced by the flowto must have a unique id. The combination of the unique id and the name allow the assistive technology to adequately assist the user in retracing their steps backward through a flow to reference or moving forward to it. Since the author sets only the target the user agent is responsible for mapping the backward reference relationship. Therefore, neither the user agent nor the user can get lost. The host user agent does not provide an alternative navigation order; this is an assistive technology function. Use tabindex to enable objects to receive focus. Actually setting focus to them may be performed by an assistive technology, such as an alternative input device. This example places each drawing object in document order with respect to the tab sequence. WAI-ARIA Roles, States, and Properties
tab order. If you create a text field without using a standard HTML text
field form control then ensure that it is in the tab order.
- true
.
true
.
-
WAI-ARIA Roles, States, and Properties
Keyboard Interaction
-
true
. If aria-multi-selectable is false
, the default action should be to display the content specified by the link contained in that option, and if possible, move the focus to the beginning of the controlled region. If aria-multiselectable is true
and aria-haspopup is true
for the currently focused option, then Enter should open a pop-up menu that provides items for navigating to the target specified by the currently focused option and for performing supported non-navigation operations on the currently selected options.true
. If aria-multi-selectable is false
, the default action should be to display the content specified by the link contained in that option, and if possible, move the focus to the beginning of the controlled region. If aria-multiselectable is true
and aria-haspopup is true
for the currently focused option, then Enter should open a pop-up menu that provides items for navigating to the target specified by the currently focused option and for performing supported non-navigation operations on the currently selected options.Managing Focus in Dialogs
If the keypress is a Shift + Tab key and the target == the first tab navigable object, then set focus to the last tab-navigable object and stop the key press event. If there is only a single tab focusable item, then focus does not have to be set, but the key press event must be stopped.
Managing Focus in Dialogs
var node = evt.target; // get the target node of the keypress event
if (evt.charOrCode === keys.TAB){
// find the first and last tab focusable items in the hierarchy of the dialog container node
-// do this every time if the items may be added / removed from the the dialog may change visibility or state
+// do this every time if the items may be added / removed from the dialog may change visibility or state
var focusItemsArray = helper.getFocusItems(dialogContainerNode);
dialog.firstFocusItem = focusItemsArray[0];
dialog.lastFocusItem = focusItemsArray[focusItemsArray.length-1];
@@ -2284,7 +2284,7 @@ Changing the Reading Flow
<img src="foo.jpg" id="333" title="Finance Manager Approval">
<img src="foo.jpg" id="334" title="Sales Manager Approval">
…
- Provision of the Accessibility State Information: "What meaningful properti
analysis of the accessibility properties defined in MSAA and ATK.
The following example extends the previous approach by adding the aria-haspopup accessibility property.
Example: Use of WAI-ARIA to incorporate accessible state information information into XHTML 1.x
+Example: Use of WAI-ARIA to incorporate accessible state information into XHTML 1.x
<?xml version="1.1" encoding="us-ascii"?> <!DOCTYPE html PUBLIC "Accessible Adaptive Applications//EN" @@ -3305,7 +3305,7 @@Use of XHTML Role Landmarks to Improve Document Navigation
extensions for Mozilla/Firefox from the University of Illinois at Urbana-Champaign to render the document landmarks. This picture shows the Firefox browser rendering the University of Illinois - Career Career Center home page. In this example. The "List of Navigation Bars" viewer is shown, launched from the extension on the + Career Center home page. In this example. The "List of Navigation Bars" viewer is shown, launched from the extension on the toolbar. The viewer shows that the secondary "Career Center Services" is selected resulting in that section of the document being highlighted in yellow. The Navigation Bar Lists Viewer lists the following list of titles corresponding to the navigation sections: diff --git a/aria-practices.html b/aria-practices.html index 3bf53c0a04..7690b939ad 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -1986,9 +1986,9 @@WAI-ARIA Roles, States, and Properties
- +WAI-ARIA Roles, States, and Properties
@@ -4200,7 +4200,7 @@
Using
For example, specifying an invalid value foraria-rowcount
andaria-rowindex
aria-rowindex
or setting it on some but not all rows in a table, could cause screen reader table reading functions to skip rows or simply stop functioning.- The following code demonstrates the use of
aria-rowcount
andaria-rowindex
properties on a table containing a a hypothetical class list. + The following code demonstrates the use ofaria-rowcount
andaria-rowindex
properties on a table containing a hypothetical class list.@@ -4294,7 +4294,7 @@
Using
aria-colcount
andaria-colindex
Using
aria-colindex
When Column Indicies Are ContiguousWhen all the cells in a row have column index numbers that are consecutive integers, -
aria-colindex
can be set on the row element with a value equal to the the index number of the first column in the set. +aria-colindex
can be set on the row element with a value equal to the index number of the first column in the set. Browsers will then compute a column number for each cell in the row.@@ -4532,7 +4532,7 @@
Indicating sort order with
aria-sort
The following example grid uses
aria-sort
to indicate the rows are sorted from the highest "Quiz 2" score to the lowest "Quiz 2" score.- <table role="grid" aria-rowcount="463" aria-colcount="13" + <table role="grid" aria-rowcount="463" aria-colcount="13" aria-label="Student grades for history 101"> <thead> <tr aria-colindex="10" aria-rowindex="1"> @@ -4781,7 +4781,7 @@
Changes in July 2018 Publication of Note Release 2
Menu button example bug fixes Navigation menubar example bug fixes Radio group example styling -Tabs pattern, including labeling guidance +Tabs pattern, including labeling guidance Tree view pattern, including multi-select guidance Tree view example bug fixes diff --git a/examples/dialog-modal/dialog.html b/examples/dialog-modal/dialog.html index f92ff59c2c..0fc889e401 100644 --- a/examples/dialog-modal/dialog.html +++ b/examples/dialog-modal/dialog.html @@ -65,7 +65,7 @@Accessibility Features
When the dialog closes as a result of the Cancelaction, the user's point of regard is maintained by returning focus to theAdd Delivery Addressbutton.When the dialog closes as a result of the diff --git a/examples/listbox/listbox-collapsible.html b/examples/listbox/listbox-collapsible.html index 7fa46addd1..4129df45b4 100644 --- a/examples/listbox/listbox-collapsible.html +++ b/examples/listbox/listbox-collapsible.html @@ -35,7 +35,7 @@Addaction and theAddress Addeddialog replaces theAdd Delivery Addressdialog, - theAdd Delivery Addressdialog passes a reference to theAdd Delivery Addressbutton to the theAddress Addeddialog + theAdd Delivery Addressdialog passes a reference to theAdd Delivery Addressbutton to theAddress Addeddialog so that it can maintain the user's point of regard when it closes.Collapsible Dropdown Listbox Example
The following example implementation of the design pattern for listbox - demonstrates a collapsible single-select listbox widget that is functionally similar to an HTML
select
input with the the attributesize="1"
. + demonstrates a collapsible single-select listbox widget that is functionally similar to an HTMLselect
input with the attributesize="1"
. The widget consists of a button that triggers the display of a listbox. In its default state, the widget is collapsed (the listbox is not visible) and the button label shows the currently selected option from the listbox. When the button is activated, the listbox is displayed and the current option is focused and selected. @@ -216,7 +216,7 @@Role, Property, State, and Tabindex Attributes
@@ -254,7 +254,7 @@
- Set by the JavaScript when the listbox is displayed.
-- Otherwise, is not present.
+- Otherwise, is not present.
Role, Property, State, and Tabindex Attributes
When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value. Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the ul
element.- For more information about this focus management technique, see + For more information about this focus management technique, see Using aria-activedescendant to Manage Focus.