ARIA guides
Accessible Rich Internet Applications (ARIA) define ways to make the web more accessible to people with disabilities. This page lists the guides that you can use to help improve the accessibility of web page features such as tables, forms, and keyboard-navigation.
- ARIA live regions
Using JavaScript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search results on the fly, or to display a discreet alert or notification which does not require user interaction. While these changes are usually visually apparent to users who can see the page, they may not be obvious to users of assistive technologies. ARIA live regions fill this gap and provide a way to programmatically expose dynamic content changes in a way that can be announced by assistive technologies.
- ARIA Screen Reader Implementors Guide
This is just a guide. Live region markup is a complex area which is somewhat open to interpretation. The following is intended to provide implementation guidance that respects screen readers developers' need to try different things. The intention is to strike a balance between providing useful guidance on how to use the markup's intended meaning while supporting live regions as an area for screen readers to innovate and compete.
- Multipart labels: Using ARIA for labels with embedded fields inside them
You have a form where you ask your user a question, but the answer is mentioned in the question itself. A classic example we all know from our browser settings is the setting "Delete history after x days". "Delete history after" is to the left of the textbox, x is the number, for example 21, and the word "days" follows the textbox, forming a sentence that is easy to understand.
- Using ARIA: Roles, states, and properties
ARIA defines semantics that can be applied to elements, with these divided into roles (defining a type of user interface element) and states and properties that are supported by a role. Authors must assign an ARIA role and the appropriate states and properties to an element during its life-cycle, unless the element already has appropriate ARIA semantics (via use of an appropriate HTML element). Addition of ARIA semantics only exposes extra information to a browser's accessibility API, and does not affect a page's DOM.
See also
- Designing accessible forms
- Understanding WAI-ARIA basics
- Creating keyboard-navigable JavaScript widgets
- Using ARIA for labels with embedded fields inside them
- Managing focus in composite widgets (
aria-activedescendant
vs. roving tabindex) - Testing ARIA
- Displaying accessible tables
- Labeling widgets
- Landmark roles
- ARIA live regions
- HTML Drag and Drop API
- ARIA: presentation role