Placeholder - actual abstract text for WCAG20-TECHS is included in the XSLT, techs-merge.xslt. This file contains the XML for general techniques and can be used in conjunction with techs-sample-output.xsl to check that techniques will output correctly.
To improve accessibility, WAI-ARIA provides Web developers with the option to add the following semantic information to Web pages and rich Internet widgets which are then exposed to the browser:
Roles to describe the type of widget presented, such as "menu", "treeitem", "slider" and "progressbar."
Roles to describe the structure of the Web page, such as headings, regions, search areas and navigation areas.
Properties to describe the state widgets are in, such as "checked" for a check box, "haspopup" for a menu that renders a sub-menu or other popup and "expanded/collapsed" for a tree node.
Properties to define
Properties for drag-and-drop that describe drag sources and drop targets
A method to provide keyboard navigation for rich internet widgets.
The combination of these features and the structural
information conveyed by the DOM structure allow authors to
produce an interoperable solution to assistive technologies.
(Source:
User Agent support for WAI-ARIA varies, but overall support for WAI-ARIA is improving. Browsers which support WAI-ARIA map WAI-ARIA roles and properties to platform accessibility APIs.
Firefox 1.5 and Firefox 2.0 partially supports WAI-ARIA, however it requires the use of namespaces, and doesn't support the use of Liveregions.
Firefox 3+ contains better support for WAI-ARIA, including Liveregions.
IE8 partially supports WAI-ARIA.
JAWS 8 and Window-Eyes 5.5+ partially support WAI-ARIA.
Jaws 10+ supports WAI-ARIA.
FireVox, a self-voicing extension to Firefox, also supports WAI-ARIA via direct DOM access.
NVDA partially supports WAI-ARIA.
Using technologies in an Accessibility Supported way is required for conformance claims. Read more about
Technologies that support
See
IE 8 only supports
The purpose of this technique is to demonstrate how to use the WAI-ARIA
Refer to
At this time, WAI-ARIA is a Working Draft. This technique is provided as an advisory technique for organizations that wish to experiment with achieving WCAG conformance using WAI-ARIA. When WAI-ARIA becomes a formal specification and is supported in user agents, it is anticipated that this technique will become a sufficient technique.
This example is coded in XHTML with a MIME type of application:xhtml+xml. This MIME type is not supported in all user agents. The aria-describedby property is added directly into the XHTML markup, and no additional scripting is needed.
Demonstration of aria-describedby property
The buttons on this page use the Accessible Rich Internet Applications aria-describedby property
to provide more detailed information about the button action
Select the font faces and sizes to be used on this page
Select the colors to be used on this page
Customize the layout and styles used on this page
]]>
This example uses scripting to add an aria-describedby property to buttons on a page. The example creates a buttonIds array variable to hold the ids of the elements that contain description text. The setDescribedBy() function is called from the onload event of the window object.
The setDescribedBy() function loops through all of the button elements and calls setAttribute() on each button element to set the aria-describedby property. Each button's aria-describedby property is set to the id of the element containing its descriptive text.
Using a user agent and/or assistive technology which supports WAI-ARIA, the description will be provided when the user interface controls receive focus.
Demonstration of aria-describedby property
The buttons on this page use the Accessible Rich Internet Applications
aria-describedby property to provide more detailed information
about the button action.
Select the font faces and sizes to be used on this page
Select the colors to be used on this page
Customize the layout and styles used on this page
]]>
Check that there is an input control having an aria-describedby attribute that references one or more elements via unique id.
Check that the referenced element or elements provide additional information about the input control.
#1 and #2 are true.
Technologies that support
See
The objective of this technique is to indicate in a programmatically determinable way that the completion of a user input field is mandatory. The WAI-ARIA
The fact that the element is required is often visually presented (such as a sign or symbol after the control). Using the
At this time, WAI-ARIA is a Working Draft. This technique is provided as an advisory technique for organizations that wish to experiment with achieving WCAG conformance using WAI-ARIA. When WAI-ARIA becomes a formal specification and is supported in user agents, it is anticipated that this technique will become a sufficient technique.
The following example shows an XHTML document using the
Required Input
Required Input
The following form input field must be completed by the user
before the form can be submitted.
]]>
This example uses scripting to add the
The array variable, requiredIds, is created with the ids of the elements which need to be marked as required. The
The
When this page is accessed using Firefox 3.0 or later and a screen reader that supports WAI-ARIA, the screen reader will speak "required" when reading the label for the input fields.
Please enter the following data. Required fields have been programmatically identified
as required and marked with an asterisk (*) following the field label.
]]>
Access a page with mandatory form fields in a user agent that supports the Accessible Rich Internet Applications specification.
Leaving mandatory form fields empty, attempt to submit the form.
Check that that the user agent notifies of the missing information.
Provide values for the mandatory fields.
Check that the user agent allows form submission to proceed.
#3 and #5 are true
Technologies that support
See
The objective of this technique is to provide information about the allowable range of an entry field in a programmatically determinable way. The WAI-ARIA
Refer to
At this time, WAI-ARIA is a Working Draft. This technique is provided as an advisory technique for organizations that wish to experiment with achieving WCAG conformance using WAI-ARIA. When WAI-ARIA becomes a formal specification and is supported in user agents, it is anticipated that this technique will become a sufficient technique.
The following spin button allows users to enter a number between 1 and 100 (inclusive).
Spin Button
Spin Button
Spin button allows users to enter a number between 1 and 100. It is
implemented as a text input, to which user agents that do not support
ARIA roles fall back.
]]>
Access a page with form fields that require data in a certain range, using a user agent that supports the Accessible Rich Internet Applications specification.
Provide information that is outside the allowable range, and attempt to submit the form.
Check that the user agent notifies the user of the invalid data.
Provide information that is inside the allowable range, and attempt to submit the form.
Check that the user agent accepts the data and allows the submit to proceed.
#3 and #5 are true