diff --git a/LICENSE.md b/LICENSE.md
index 0f7c218c64..982d931424 100644
--- a/LICENSE.md
+++ b/LICENSE.md
@@ -1,4 +1,3 @@
All documents in this Repository are licensed by contributors
under the
[W3C Software and Document License](https://www.w3.org/Consortium/Legal/copyright-software).
-
diff --git a/aria-practices-DeletedSectionsArchive.html b/aria-practices-DeletedSectionsArchive.html
index 8faf46a581..06dffeec63 100644
--- a/aria-practices-DeletedSectionsArchive.html
+++ b/aria-practices-DeletedSectionsArchive.html
@@ -1,162 +1,162 @@
- Content Deleted From WAI-ARIA Authoring Practices 1.1
-
-
-
-
-
-
+ Content Deleted From WAI-ARIA Authoring Practices 1.1
+
+
+
+
+
+
@@ -584,18 +584,18 @@
Keyboard Interaction
WAI-ARIA Roles, States, and Properties
-
- The current month has a label representing the month and year.
- It is advisable to use a role heading but is not essential.
- This "label" should have a unique ID.
-
-
If the author would like to ensure that a label is announced by a screen reader, as the label changes, include live region properties with the label element: aria-live="assertive" and aria-atomic="true".
-
The container for the day of week headers and numeric days of the week has a role of grid.
-
The grid has an aria-labelledby property with a value equivalent to the id of the label for the grid.
-
Each name for the day of the week has a role columnheader and is not navigable via the keyboard.
-
Each numeric day of the week has the role gridcell.
-
When a day is selected its aria-selected is set to true, otherwise it is set to false or removed.
-
Changes in aria states, identified here, as well as focus, are clearly styled to show the user where their point of regard is and what days are selected.
+
+ The current month has a label representing the month and year.
+ It is advisable to use a role heading but is not essential.
+ This "label" should have a unique ID.
+
+
If the author would like to ensure that a label is announced by a screen reader, as the label changes, include live region properties with the label element: aria-live="assertive" and aria-atomic="true".
+
The container for the day of week headers and numeric days of the week has a role of grid.
+
The grid has an aria-labelledby property with a value equivalent to the id of the label for the grid.
+
Each name for the day of the week has a role columnheader and is not navigable via the keyboard.
+
Each numeric day of the week has the role gridcell.
+
When a day is selected its aria-selected is set to true, otherwise it is set to false or removed.
+
Changes in aria states, identified here, as well as focus, are clearly styled to show the user where their point of regard is and what days are selected.
When the date picker is active a calendar day of the week always has focus.
@@ -1213,11 +1213,11 @@
General Steps for Building an Accessible Widget with WAI-ARIA
onfocus="showFocus();"
>
<img src="img/btn1.gif" title="Home" alt="Home" role="button" id="button1"
- onclick="updateText('Home was invoked');">
+ onclick="updateText('Home was invoked');">
<img src="img/btn2.gif" title="Refresh" alt="Refresh" role="button" id="button2"
- onclick="updateText('Refresh was invoked');">
+ onclick="updateText('Refresh was invoked');">
<img src="img/btn3.gif" title="Help" alt="Help" role="button" id="button3"
- onclick="updateText('Help was invoked');">
+ onclick="updateText('Help was invoked');">
</div>
By setting tabindex=0 on the toolbar, the toolbar will receive focus in the document order. It is necessary then to use script and the aria-activedescendant property to manage virtual focus among the buttons. The details are given in step five, below.
@@ -1250,7 +1250,7 @@
General Steps for Building an Accessible Widget with WAI-ARIA
Commented out link to conference paper, which a) was broken, and b) we should have more canonical references than conference papers for things like this.
For our toolbar, we have chosen to have the toolbar manage the focus for its children and through the use of the aria-activedescendant property. We have also chosen to have the toolbar receive focus based on the tab order by using tabindex. In order to use aria-activedescendant, each focusable descendant must have an assigned ID.
General Steps for Building an Accessible Widget with WAI-ARIA
// Partial sample code for processing arrow keys
if (event.type == "keydown") {
- if (event.altKey) {
- return true; // Browser should use this, the menu view doesn't need alt-modified keys
- }
- // XXX Implement circular keyboard navigation within the toolbar buttons
-
- if (event.keyCode == DOM_VK_ENTER) {
- ExecuteButtonAction(getCurrentButtonID()); // This is an author defined function
- }
- else if (event.keyCode == event.DOM_VK_RIGHT) {
- // Change the active toolbar button to the one to the right (circular) by
- var buttonid = getNextButtonID(); // This is an author defined function
- tb.setAttribute("aria-activedescendant", buttonid);
- }
- else if (event.keyCode == event.DOM_VK_LEFT) {
+ if (event.altKey) {
+ return true; // Browser should use this, the menu view doesn't need alt-modified keys
+ }
+ // XXX Implement circular keyboard navigation within the toolbar buttons
+
+ if (event.keyCode == DOM_VK_ENTER) {
+ ExecuteButtonAction(getCurrentButtonID()); // This is an author defined function
+ }
+ else if (event.keyCode == event.DOM_VK_RIGHT) {
+ // Change the active toolbar button to the one to the right (circular) by
+ var buttonid = getNextButtonID(); // This is an author defined function
+ tb.setAttribute("aria-activedescendant", buttonid);
+ }
+ else if (event.keyCode == event.DOM_VK_LEFT) {
// Change the active toolbar button to the one to the left (circular) by
var buttonid = getPrevButtonID(); // This is an author defined function
tb.setAttribute("aria-activedescendant", buttonid);
- }
- else {
+ }
+ else {
return true;
- }
- return false;
+ }
+ return false;
}
else if (event.type == "keypress") {
…
@@ -1314,9 +1314,9 @@
General Steps for Building an Accessible Widget with WAI-ARIA
Authors should be aware that CSS attribute selectors are not supported in some browsers, such as Internet Explorer 6. A consistent way to apply styling to reflect WAI-ARIA semantics would be to assign an element a class name based on the WAI-ARIA attribute being set using script as shown here:
function setSelectedOption(menuItem)
- {
+ {
if (menuItem.getAttribute("role") != "menuitem") {
- return;
+ return;
}
var menu = getMenu(menuItem);
var oldMenuItem = getSelectedOption(menu);
@@ -1372,11 +1372,11 @@
General Steps for Building an Accessible Widget with WAI-ARIA
Support basic accessibility, such as alternative text on images
When an image is used to represent information within a component, such as image buttons, you need to set the alternative text on those images. This is then mapped by the user agent to the accessible name in the platform accessibility API. Using our example:
Establish WAI-ARIA relationships between this widget and others
@@ -1503,11 +1503,11 @@
Steps for Defining a Logical Navigational Structure
WAI-ARIA landmark roles that are applied to elements having strong native semantics are not mapped consistently to the platform accessibility API. An example is the TABLE element. For this reason, it is recommended that authors apply landmarks to DIV and SPAN containers.
There are also mainstream benefits of providing navigation landmarks. Your browser may assign key sequences to move focus to these sections as they can be set on every site. Navigation to these landmarks is device independent. A personal digital assistant (PDA) could assign a device key to get to them in your document. The common landmarks in WAI-ARIA include:
-Represents a region of the page representing a unique software unit executing a set of tasks for its users. It is an area where assistive technologies should also return browse navigation keys back over to the web application in this region.
-
If the entire web page has a role of application then it should not be treated as a navigational landmark by an assistive technology.
+ Represents a region of the page representing a unique software unit executing a set of tasks for its users. It is an area where assistive technologies should also return browse navigation keys back over to the web application in this region.
+
If the entire web page has a role of application then it should not be treated as a navigational landmark by an assistive technology.
- If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:
+ If you have a regional landmark of type application and static descriptive text is available, then on the application landmark, include an aria-describedby reference to associate the application and the static text as shown here:
<div role="application" aria-labelledby="calendar" aria-describedby="info">
<h1 id="calendar">Calendar<h1>
<p id="info">
This calendar shows the game schedule for the Boston Red Sox.
@@ -1537,7 +1537,7 @@
Steps for Defining a Logical Navigational Structure
<div role="grid">
…
</div>
-
+
For landmarks unsuited to specialized region WAI-ARIA roles
You can create custom regional landmarks by using a generic region. While it is not essential to label these specialized regions with a header, you should provide a title to ensure that the region name is accessible to all users, just as you would the standard regional landmarks. See Header levels versus Nesting levels for directions on how to label the region.
Structural Roles that Facilitate Navigation with Assistive Technologies
Set the Application Role
After you have divided your Web page into regions through the use of role landmarks and custom regions, you must make a decision: Is your Web page an application or not? If the majority of the content is application-like the default interaction mode should be set to application, with document regions embedded within the application if applicable. Otherwise the default interaction mode is document-like and therefore should not be overridden by the use of a global role of application. In this case the application role can be placed on discrete regions within the document if applicable.
-
If it is, set the role of application on the body tag as follows:
+
If it is, set the role of application on the body tag as follows:
<body role="application">
When using application, all static text must be associated with widgets, groups or panes via using the aria-labelledby and aria-describedby properties, otherwise it will not be read by the screen reader when the user navigates to the related widget or group.
Special Considerations:
@@ -1596,13 +1596,13 @@
Header Levels Versus Nesting Levels
Using ARIA:
<div role="main" aria-labelledby="page_title">
<p id="page_title" role="heading" aria-level="1">Top News Stories</p>
- … main page contents here …
+ … main page contents here …
</div>
Using native markup:
<div role="main" aria-labelledby="page_title">
<h1 id="page_title">Top News Stories</h1>
- … main page contents here …
+ … main page contents here …
</div>
@@ -1629,27 +1629,27 @@
Directories, Groups, and Regions
Directories and Their Applicability
The WAI-ARIA role, directory, allows authors to mark static table of content sections of a document. Prior to WAI-ARIA, the user would need to guess if an area of a document actually pertained to the table of contents. Authors should mark these sections within a document with a role of directory.
Unlike table cells within a table, authors should ensure a grid's gridcells are focusable through the use of tabindex (in HTML), or aria-activedescendant on the grid.They may also be editable, as is shown in the above example.
Treegrid's may require expanding and collapsing rows which may not be performed using a <tr>. In these instances authors will use an HTML <div>. WAI-ARIA provides a role of row which may be assigned to the <div> to convey to the assistive technology that this is still a row. If you decide to not use the native HTML <table> elements and choose more flexible elements, such as <div> and <span>s, with applied WAI-ARIA roles in this section, you should structurally lay out your elements in line with what you would expect from HTML. All of your rowheaders should be in a row and your gridcells should be children of each subsequent row in the same format as HTML for <td>s and <th>s within <tr>s.
@@ -1722,7 +1722,7 @@
Marking Descriptive Sections
<img src="foo" alt="abbreviated name" aria-describedby="prose1">
<div id="prose1">
- The prose in this div describes the image foo in detail.
+ The prose in this div describes the image foo in detail.
</div>
This is the preferred vehicle for providing long descriptions for elements in your document.
When the author does not desire the entire descriptive text to be located on the main page, aria-describedby can also be used to point to a link to another page.
@@ -1752,24 +1752,24 @@
Miscellaneous XHTML Section Roles
</p>
The following is an example using a definition list:
<dl>
- <dt id="anathema">anthema</dt>
- <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority and accompanied by
-excommunication</dd>
- <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd>
-<dt id="homily">homily</dt>
-<dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
+ <dt id="anathema">anthema</dt>
+ <dd role="definition" aria-labelledby="anathema">a ban or curse solemnly pronounced by ecclesiastical authority and accompanied by
+ excommunication</dd>
+ <dd role="definition" aria-labelledby="anathema">a vigorous denunciation : cursor</dd>
+ <dt id="homily">homily</dt>
+ <dd role="definition" aria-labelledby="homily">a usually short sermon</dd>
-<dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd>
+ <dd role="definition" aria-labelledby="homily">a lecture or discourse on or of a moral theme</dd>
</dl>
The note role defines a parenthetic or ancillary remark to the main content of the resource. It also allows assistive technologies to skip over this section of the document unless more information is requested about the main content.
<div role="main" aria-labelledby="foo">
- <h1 id="foo">Wild fires spread across the San Diego Hills</h1>
- Strong winds expand fires ignited by high temperatures …
+ <h1 id="foo">Wild fires spread across the San Diego Hills</h1>
+ Strong winds expand fires ignited by high temperatures …
</div>
<div role="note">
- This article was last updated July 30, 2008 at 6:05PM.
+ This article was last updated July 30, 2008 at 6:05PM.
</div>
Marked up content or widgets will often need additional context to make clear what the meaning or purpose is. It is also reasonable that some content media types will need additional descriptions in another format to give clarity to those who are unable to consume the origin format. These additional meta-content sections are linked together by tagging them as labels or descriptions. WAI-ARIA provides the aria-labelledby and aria-describedby attributes to signal the browser to feed these relationships into the accessibility layer. This layer is then used by screen readers and other accessibility technology (AT) to gain awareness of how disparate regions are actually contextually connected to each other. With this awareness the AT can then present a meaningful navigation model for discovery and presentation of these additional content sections. The user agent itself can also choose to present these insights in a meaningful way. Generally you should always add these attributes to any widgets on your site as they are often merely a construct of HTML and JavaScript which provides no obvious insight as to what the widget's behavior or interactivity is.
Labeling
- When using one element to label another use the aria-labelledby by attribute. A label should provide the user with the essence of what the object does. For example, you could have a dialog box erected from HTML <div> and you need to associate a label for the dialog. With a WAI-ARIA role of dialog, you can indicate its widget type and define a label using an HTML header and then associate that label with the dialog using the aria-labelledby relationship.
-
+ When using one element to label another use the aria-labelledby by attribute. A label should provide the user with the essence of what the object does. For example, you could have a dialog box erected from HTML <div> and you need to associate a label for the dialog. With a WAI-ARIA role of dialog, you can indicate its widget type and define a label using an HTML header and then associate that label with the dialog using the aria-labelledby relationship.
+
The aria-describedby property is not designed to reference descriptions on an external resource—since it is an IDREF, it must reference an element in the same DOM document. This is different from the HTML longdesc attribute, which accepts any URI. In general, the preferred pattern for WAI-ARIA applications is to include all relevant resources in the same DOM, But if you wish to reference an external resource with aria-describedby, you can reference a link that in turn references the external resource. This requires the user to follow two steps, first following the aria-describedby arc, then following the link, but does address the use case. The following example demonstrates this:
<p>
- <img
- src="images/histogram.png"
- alt="Histogram of Blackberry tree heights"
- width="40%"
- aria-describedby="longdesc1"
- />
+ <img
+ src="images/histogram.png"
+ alt="Histogram of Blackberry tree heights"
+ width="40%"
+ aria-describedby="longdesc1"
+ />
</p>
<p>
@@ -2166,7 +2166,7 @@
The Owns Relationship
In addition to WAI-ARIA role and state information, for a document element,
an assistive technology needs to convey its context. In
the case of a treeitem, it is important to know the parent (container),
- which may provide a folder depth and the number of siblings in the folder. This containment hierarchy can often be determined by
+which may provide a folder depth and the number of siblings in the folder. This containment hierarchy can often be determined by
the DOM tree, as it provides parent, siblings, and children for a given
document element. That said, the DOM hierarchy is rigid and non cyclical in
that each node may only have one parent. In some situations, a child
@@ -2450,9 +2450,9 @@
live region - If you have some other live area use case, WAI-ARIA allows you to mark an area using the aria-live attribute. This, accompanied by the collection of attributes which support the live property, allows you to create your own custom live area on your Web page. For more details regarding live regions refer to the live region section of this guide.
List autocomplete with automatic selection: When the popup is triggered, it presents suggested values that complete or logically correspond to the characters typed in the textbox,
and the first suggestion is automatically highlighted as selected.
- The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
+ The automatically selected suggestion becomes the value of the textbox when the combobox loses focus unless the user chooses a different suggestion or changes the character string in the textbox.
List with inline autocomplete: This is the same as list with automatic selection with one additional feature.
@@ -783,14 +783,14 @@
Tree Popup Keyboard Interaction
When focus is on a open node, moves focus to the first child node and selects it if it is selectable.
When focus is on an end node, does nothing.
-
+
Left arrow:
When focus is on an open node, closes the node.
When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node and selects it if it is selectable.
When focus is on a root node that is also either an end node or a closed node, does nothing.
-
+
Down Arrow: Moves focus to the next node that is focusable without opening or closing a node and selects it if it is selectable.
Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node and selects it if it is selectable.
Home: Moves focus to the first node in the tree without opening or closing a node and selects it if it is selectable.
@@ -1096,8 +1096,8 @@
Feed
For example, a product page on a shopping site may have a related products section that displays five products at a time.
As the user scrolls, more products are requested and loaded into the DOM.
- While a static design might include a next button for loading five more products, a dynamic implementation that automatically loads more data as the user scrolls simplifies the user experience and reduces the inertia associated with viewing more than the first five product suggestions.
- But, unfortunately when web pages load content dynamically based on scroll events, it can cause usability and interoperability difficulties for users of assistive technologies.
+ While a static design might include a next button for loading five more products, a dynamic implementation that automatically loads more data as the user scrolls simplifies the user experience and reduces the inertia associated with viewing more than the first five product suggestions.
+ But, unfortunately when web pages load content dynamically based on scroll events, it can cause usability and interoperability difficulties for users of assistive technologies.
The feed pattern enables reliable assistive technology reading mode interaction by establishing the following interoperability agreement between the web page and assistive technologies:
@@ -1159,7 +1159,7 @@
Keyboard Interaction
Users move focus into the nested feed from the content of the containing article with Tab.
This may be slow if the article contains a significant number of links, buttons, or other widgets.
-
+
Provide a key for moving focus from the elements in the containing article to the first item in the nested feed, e.g., Alt + Page Down.
To continue reading the outer feed, Control + End moves focus to the next article in the outer feed.
@@ -1564,7 +1564,7 @@
Link
A link widget provides an interactive reference to a resource.
The target resource can be either external or local, i.e., either outside or within the current page or application.
-
+
Authors are strongly encouraged to use a native host language link element, such as an HTML
<A> element with an href attribute. As with other WAI-ARIA
@@ -1651,8 +1651,8 @@
Keyboard Interaction
Down Arrow: Moves focus to the next option. Optionally, in a single-select listbox, selection may also move with focus.
Up Arrow: Moves focus to the previous option. Optionally, in a single-select listbox, selection may also move with focus.
-
Home (Optional): Moves focus to first option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.
-
End (Optional): Moves focus to last option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.
+
Home (Optional): Moves focus to first option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.
+
End (Optional): Moves focus to last option. Optionally, in a single-select listbox, selection may also move with focus. Supporting this key is strongly recommended for lists with more than five options.
Type-ahead is recommended for all listboxes, especially those with more than seven options:
Type a character: focus moves to the next item with a name that starts with the typed character.
@@ -1986,9 +1986,9 @@
WAI-ARIA Roles, States, and Properties
Radio Group
- A radio group is a set of checkable buttons, known as radio buttons, where no more than one of
+ A radio group is a set of checkable buttons, known as radio buttons, where no more than one of
the buttons can be checked at a time.
- Some implementations may initialize the set with all buttons in the unchecked state in order to
+ Some implementations may initialize the set with all buttons in the unchecked state in order to
force the user to check one of the buttons before moving past a certain point in the workflow.
@@ -2012,7 +2012,7 @@
Keyboard Interaction
- Space: checks the focused radio button if it is not already checked.
+ Space: checks the focused radio button if it is not already checked.
Right Arrow and Down Arrow: move focus to the next radio button in
the group, uncheck the previously focused button, and check the newly focused button. If
@@ -2393,11 +2393,11 @@
Keyboard Interaction
End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab (See note below).
Shift + F10: If the tab has an associated pop-up menu, opens the menu.
- Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel,
+ Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel,
sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted,
e.g., the deleted tab was the right-most tab in a left-to-right horizontal tab list,
sets focus on and optionally activates the tab that preceded the deleted tab.
- If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list,
+ If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list,
the application moves focus to another element that provides a logical work flow.
As an alternative to Delete, or in addition to supporting Delete, the delete function is available in a context menu.
@@ -2631,14 +2631,14 @@
Keyboard Interaction
When focus is on a open node, moves focus to the first child node.
When focus is on an end node, does nothing.
-
+
Left arrow:
When focus is on an open node, closes the node.
When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
When focus is on a root node that is also either an end node or a closed node, does nothing.
-
+
Down Arrow: Moves focus to the next node that is focusable without opening or closing a node.
Up Arrow: Moves focus to the previous node that is focusable without opening or closing a node.
Home: Moves focus to the first node in the tree without opening or closing a node.
@@ -2831,38 +2831,38 @@
Keyboard Interaction
Page Up:
-
-
If focus is on a row, moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row, focus does not move.
-
If focus is on a cell, moves focus up an author-determined number of cells, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row, focus does not move.
-
+
+
If focus is on a row, moves focus up an author-determined number of rows, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row, focus does not move.
+
If focus is on a cell, moves focus up an author-determined number of cells, typically scrolling so the top row in the currently visible set of rows becomes one of the last visible rows. If focus is in the first row, focus does not move.
+
Home:
-
-
If focus is on a row, moves focus to the first row. If focus is in the first row, focus does not move.
-
If focus is on a cell, moves focus to the first cell in the row. If focus is in the first cell of the row, focus does not move.
-
+
+
If focus is on a row, moves focus to the first row. If focus is in the first row, focus does not move.
+
If focus is on a cell, moves focus to the first cell in the row. If focus is in the first cell of the row, focus does not move.
+
End:
-
-
If focus is on a row, moves focus to the last row. If focus is in the last row, focus does not move.
-
If focus is on a cell, moves focus to the last cell in the row. If focus is in the last cell of the row, focus does not move.
-
+
+
If focus is on a row, moves focus to the last row. If focus is in the last row, focus does not move.
+
If focus is on a cell, moves focus to the last cell in the row. If focus is in the last cell of the row, focus does not move.
+
Control + Home:
-
-
If focus is on a row, moves focus to the first row. If focus is in the first row, focus does not move.
-
If focus is on a cell, moves focus to the first cell in the column. If focus is in the first row, focus does not move.
-
+
+
If focus is on a row, moves focus to the first row. If focus is in the first row, focus does not move.
+
If focus is on a cell, moves focus to the first cell in the column. If focus is in the first row, focus does not move.
+
Control + End:
-
-
If focus is on a row, moves focus to the last row. If focus is in the last row, focus does not move.
-
If focus is on a cell, moves focus to the last cell in the column. If focus is in the last row, focus does not move.
-
+
+
If focus is on a row, moves focus to the last row. If focus is in the last row, focus does not move.
+
If focus is on a cell, moves focus to the last cell in the column. If focus is in the last row, focus does not move.
+
@@ -2924,7 +2924,7 @@
Keyboard Interaction
See for cut, copy, and paste key assignments.
-
+
WAI-ARIA Roles, States, and Properties
@@ -2981,7 +2981,7 @@
WAI-ARIA Roles, States, and Properties
-
+
Window Splitter
@@ -3974,7 +3974,7 @@
Choose Appropriate Shortcut Behavior
Activate an element without moving focus when the target context of the function is the context that contains the focus. This behavior is most common for command buttons and for functions associated with elements that are not visible, such as a "Save" option that is accessible via a menu. For example, if the focus is on an option in a listbox and a toolbar contains buttons for moving and removing options, it is most beneficial to keep focus in the listbox when the user presses a key shortcut for one of the buttons in the toolbar. This behavior can be particularly important for screen reader users because it provides confirmation of the action performed and makes performing multiple commands more efficient. For instance, when a screen reader user presses the shortcut for the "Up" button, the user will be able to hear the new position of the option in the list since it still has the focus. Similarly, when the user presses the shortcut for deleting an option, the user can
- hear the next option in the list and immediately decide whether to press the delete shortcut again.
+ hear the next option in the list and immediately decide whether to press the delete shortcut again.
Move focus and activate when the target of the shortcut has a single function and the context of that function is the same as the target.
@@ -4319,7 +4319,7 @@
Using aria-colindex When Column Indicies Are Contiguous
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/accordion/js/accordion.js b/examples/accordion/js/accordion.js
index bea53b9384..b24971470a 100644
--- a/examples/accordion/js/accordion.js
+++ b/examples/accordion/js/accordion.js
@@ -1,9 +1,9 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-* Simple accordion pattern example
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * Simple accordion pattern example
+ */
'use strict';
diff --git a/examples/alert/alert.html b/examples/alert/alert.html
index 48f904335a..edc9a654ed 100644
--- a/examples/alert/alert.html
+++ b/examples/alert/alert.html
@@ -23,7 +23,7 @@
diff --git a/examples/checkbox/checkbox-2/js/checkboxMixed.js b/examples/checkbox/checkbox-2/js/checkboxMixed.js
index 559945d237..8dc0938b22 100644
--- a/examples/checkbox/checkbox-2/js/checkboxMixed.js
+++ b/examples/checkbox/checkbox-2/js/checkboxMixed.js
@@ -1,18 +1,18 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-* File: CheckboxMixed.js
-*
-* Desc: CheckboxMixed widget that implements ARIA Authoring Practices
-* for a menu of links
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * File: CheckboxMixed.js
+ *
+ * Desc: CheckboxMixed widget that implements ARIA Authoring Practices
+ * for a menu of links
+ */
/*
-* @constructor CheckboxMixed
-*
-*
-*/
+ * @constructor CheckboxMixed
+ *
+ *
+ */
var CheckboxMixed = function (domNode) {
this.domNode = domNode;
@@ -156,4 +156,3 @@ CheckboxMixed.prototype.handleFocus = function (event) {
CheckboxMixed.prototype.handleBlur = function (event) {
this.domNode.classList.remove('focus');
};
-
diff --git a/examples/checkbox/checkbox-2/js/controlledCheckbox.js b/examples/checkbox/checkbox-2/js/controlledCheckbox.js
index 6a6055a784..f943f4db37 100644
--- a/examples/checkbox/checkbox-2/js/controlledCheckbox.js
+++ b/examples/checkbox/checkbox-2/js/controlledCheckbox.js
@@ -1,18 +1,18 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-* File: controlledCheckbox.js
-*
-* Desc: ControlledCheckbox widget that implements ARIA Authoring Practices
-* for a mixed checkbox
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * File: controlledCheckbox.js
+ *
+ * Desc: ControlledCheckbox widget that implements ARIA Authoring Practices
+ * for a mixed checkbox
+ */
/*
-* @constructor ControlledCheckbox
-*
-*
-*/
+ * @constructor ControlledCheckbox
+ *
+ *
+ */
var ControlledCheckbox = function (domNode, controllerObj) {
this.domNode = domNode;
@@ -103,4 +103,3 @@ ControlledCheckbox.prototype.handleKeyup = function (event) {
ControlledCheckbox.prototype.handleClick = function (event) {
this.lastState = this.isChecked();
};
-
diff --git a/examples/coding-template/Depricated-MultipleImplementationExample-Template.html b/examples/coding-template/Depricated-MultipleImplementationExample-Template.html
index 99f1b7a4b2..82f07b9f29 100644
--- a/examples/coding-template/Depricated-MultipleImplementationExample-Template.html
+++ b/examples/coding-template/Depricated-MultipleImplementationExample-Template.html
@@ -198,7 +198,7 @@
Keyboard Support
List the keys supported in this example.
Recommendation: Copy the list from the keyboard section of the design pattern in aria-practices.html
and then reduce/simplify it to describe only what this example supports and how it behaves.
- -->
+ -->
Use + to separate modifiers, e.g., Control + Right Arrow.
One key per row, e.g., do not combine Up Arrow and Down Arrow into a single row.
Do not use the word "key", e.g., do not write Enter Key or Enter key.
- -->
+ -->
- The example combobox on this page implements the following keyboard interface.
- Other variations and options for the keyboard interface are described in the
+ The example combobox on this page implements the following keyboard interface.
+ Other variations and options for the keyboard interface are described in the
Keyboard Interaction section of the combobox design pattern.
Textbox
@@ -126,7 +126,7 @@
Grid Popup
NOTE: When visual focus is in the grid, DOM focus remains on the textbox and the value of aria-activedescendant on the textbox is set to a value that refers to an element in the grid that is visually indicated as focused.
Where the following descriptions of keyboard commands mention focus, they are referring to the visual focus indicator.
- For more information about this focus management technique, see
+ For more information about this focus management technique, see
Using aria-activedescendant to Manage Focus.
@@ -217,12 +217,12 @@
Grid Popup
-
+
Role, Property, State, and Tabindex Attributes
- The example comboboxes on this page implement the following ARIA roles, states, and properties.
- Information about other ways of applying ARIA roles, states, and properties is available in the
+ The example comboboxes on this page implement the following ARIA roles, states, and properties.
+ Information about other ways of applying ARIA roles, states, and properties is available in the
Roles, States, and Properties section of the combobox design pattern.
Combobox Container
@@ -337,7 +337,7 @@
Textbox
Note:
In the ARIA 1.0 combobox pattern, the textbox has aria-owns instead of aria-controls.
-
In this ARIA 1.1 pattern, aria-owns is instead on the parent container so the popup element is a sibling of the textbox instead of a child of the textbox, making it perceivable by screen reader users as an element adjacent to the textbox when using a reading cursor or touch interface.
+
In this ARIA 1.1 pattern, aria-owns is instead on the parent container so the popup element is a sibling of the textbox instead of a child of the textbox, making it perceivable by screen reader users as an element adjacent to the textbox when using a reading cursor or touch interface.
@@ -355,7 +355,7 @@
Textbox
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 input 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.
@@ -422,7 +422,7 @@
Grid Popup
-
+
Javascript and CSS Source Code
diff --git a/examples/combobox/aria1.1pattern/js/grid-combo-example.js b/examples/combobox/aria1.1pattern/js/grid-combo-example.js
index 812bd951a9..39a4e754fa 100644
--- a/examples/combobox/aria1.1pattern/js/grid-combo-example.js
+++ b/examples/combobox/aria1.1pattern/js/grid-combo-example.js
@@ -1,9 +1,9 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-* ARIA Combobox Examples
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * ARIA Combobox Examples
+ */
var FRUITS_AND_VEGGIES = [
['Apple', 'Fruit'],
diff --git a/examples/combobox/aria1.1pattern/js/grid-combobox.js b/examples/combobox/aria1.1pattern/js/grid-combobox.js
index 2a501fe13c..7de79e5220 100644
--- a/examples/combobox/aria1.1pattern/js/grid-combobox.js
+++ b/examples/combobox/aria1.1pattern/js/grid-combobox.js
@@ -1,7 +1,7 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
/**
* @constructor
diff --git a/examples/combobox/aria1.1pattern/js/listbox-combo-example.js b/examples/combobox/aria1.1pattern/js/listbox-combo-example.js
index 5882d9901c..29c25a5570 100644
--- a/examples/combobox/aria1.1pattern/js/listbox-combo-example.js
+++ b/examples/combobox/aria1.1pattern/js/listbox-combo-example.js
@@ -1,9 +1,9 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-* ARIA Combobox Examples
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * ARIA Combobox Examples
+ */
var FRUITS_AND_VEGGIES = [
'Apple',
diff --git a/examples/combobox/aria1.1pattern/js/listbox-combobox.js b/examples/combobox/aria1.1pattern/js/listbox-combobox.js
index a263c9dcc7..de7eda15cf 100644
--- a/examples/combobox/aria1.1pattern/js/listbox-combobox.js
+++ b/examples/combobox/aria1.1pattern/js/listbox-combobox.js
@@ -1,7 +1,7 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
/**
* @constructor
*
diff --git a/examples/css/github.css b/examples/css/github.css
index d221b8f4fa..581360d08c 100644
--- a/examples/css/github.css
+++ b/examples/css/github.css
@@ -2,7 +2,7 @@
github.com style (c) Vasily Polovnyov
-*/
+ */
.hljs {
display: block;
diff --git a/examples/dialog-modal/js/dialog.js b/examples/dialog-modal/js/dialog.js
index ca9515540f..19ef3f2042 100644
--- a/examples/dialog-modal/js/dialog.js
+++ b/examples/dialog-modal/js/dialog.js
@@ -1,7 +1,7 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
var aria = aria || {};
diff --git a/examples/disclosure/css/disclosure-faq.css b/examples/disclosure/css/disclosure-faq.css
index 90b843f9ca..ebc64e6f73 100644
--- a/examples/disclosure/css/disclosure-faq.css
+++ b/examples/disclosure/css/disclosure-faq.css
@@ -50,4 +50,3 @@ dl.faq button[aria-expanded="true"]:before {
content: url('../images/down-arrow-brown.png');
padding-right: 0.35em;
}
-
diff --git a/examples/disclosure/js/disclosureButton.js b/examples/disclosure/js/disclosureButton.js
index befee34496..2db42ff7ff 100644
--- a/examples/disclosure/js/disclosureButton.js
+++ b/examples/disclosure/js/disclosureButton.js
@@ -1,18 +1,18 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-* File: ButtonExpand.js
-*
-* Desc: Checkbox widget that implements ARIA Authoring Practices
-* for a menu of links
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ *
+ * File: ButtonExpand.js
+ *
+ * Desc: Checkbox widget that implements ARIA Authoring Practices
+ * for a menu of links
+ */
/*
-* @constructor ButtonExpand
-*
-*
-*/
+ * @constructor ButtonExpand
+ *
+ *
+ */
var ButtonExpand = function (domNode) {
this.domNode = domNode;
diff --git a/examples/feed/feed.html b/examples/feed/feed.html
index 333197b429..f1e9e34067 100644
--- a/examples/feed/feed.html
+++ b/examples/feed/feed.html
@@ -24,7 +24,7 @@
Feed Example
NOTE: The feed role is a new WAI-ARIA feature, introduced by WAI-ARIA 1.1.
- This page provides a proposed implementation of a feed component.
+ This page provides a proposed implementation of a feed component.
This proposal does not yet have ARIA Practices Task Force consensus.
Feedback is welcome in
issue 565.
diff --git a/examples/feed/js/feed.js b/examples/feed/js/feed.js
index dd8acdb21f..937ec9ced5 100644
--- a/examples/feed/js/feed.js
+++ b/examples/feed/js/feed.js
@@ -1,7 +1,7 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
/**
* @namespace aria
diff --git a/examples/feed/js/feedDisplay.js b/examples/feed/js/feedDisplay.js
index c41c37262f..b21f2eace0 100644
--- a/examples/feed/js/feedDisplay.js
+++ b/examples/feed/js/feedDisplay.js
@@ -1,7 +1,7 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
/**
* @namespace aria
@@ -187,30 +187,30 @@ aria.FeedDisplay.prototype.renderItemData = function (itemData) {
if (itemData.image) {
itemContent += '
';
+ itemData.phone +
+ '';
}
locationBlock.innerHTML = locationContent;
diff --git a/examples/feed/js/main.js b/examples/feed/js/main.js
index 3cc165b7eb..e09ef80894 100644
--- a/examples/feed/js/main.js
+++ b/examples/feed/js/main.js
@@ -1,7 +1,7 @@
/*
-* This content is licensed according to the W3C Software License at
-* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*/
+ * This content is licensed according to the W3C Software License at
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+ */
/**
* ARIA Feed Example
diff --git a/examples/grid/LayoutGrids.html b/examples/grid/LayoutGrids.html
index eba364bf25..5e046bfe5d 100644
--- a/examples/grid/LayoutGrids.html
+++ b/examples/grid/LayoutGrids.html
@@ -141,7 +141,7 @@
Example 2: Pill List For a List of Message Recipients
The IDs provided in the following are just to demo the labeling; I assume most will be dynamically generated.
This should be styled so it is presented like a e-mail "To" field and wrap to new lines as it grows; tokens on a line will not necessarily align with tokens on a previous or following line.
I am assuming the remove icon buttons will be the typical X icon; I just put a letter X in the span as a placeholder.
- -->
+ -->
Send To:
@@ -450,7 +450,7 @@
Keyboard Support
NOTE: The following table describes keyboard commands that move focus among grid cells.
In the examples on this page, some cells contain a single focusable widget, and if a cell contains a widget, the cell is not focusable; the widget receives focus instead of the cell.
- So, when a description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.
+ So, when a description says a command moves focus to a cell, the command may either focus the cell or a widget inside the cell.
List the keys supported in this example.
Recommendation: Copy the list from the keyboard section of the design pattern in aria-practices.html
and then reduce/simplify it to describe only what this example supports and how it behaves.
- -->
+ -->
It is important to understand that many HTML5 sectioning (e.g. main, nav, aside ...) elements by default define ARIA landmarks.
+
It is important to understand that many HTML5 sectioning (e.g. main, nav, aside ...) elements by default define ARIA landmarks.
If HTML5 sectioning elements are used without understanding the associated landmark structure, assistive technology users will most likely be confused and less efficient in accessing content and interacting with web pages.
@@ -61,8 +61,8 @@
HTML5 Sectioning Elements
footer
-
contentinfo when in context of the body element.
- The footer element is not a contentinfo landmark when it is a descendant of the following HTML5 sectioning elements:
+
contentinfo when in context of the body element.
+ The footer element is not a contentinfo landmark when it is a descendant of the following HTML5 sectioning elements:
article
aside
@@ -79,7 +79,7 @@
HTML5 Sectioning Elements
header
banner when in context of the body element.
- The header element is not a banner landmark when it is a descendant of the following HTML5 sectioning elements:
+ The header element is not a banner landmark when it is a descendant of the following HTML5 sectioning elements:
article
aside
@@ -87,7 +87,7 @@
HTML5 Sectioning Elements
nav
section
-
+
main
@@ -145,12 +145,12 @@
Related W3C Documents
-
-
+
+
-
-
-
+
+
+
-
+
-
\ No newline at end of file
+