Read This First
The code in this example is not intended for production environments. Before using it for any purpose, read this to understand why.
This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.
- There may be support gaps in some browser and assistive technology combinations, especially for mobile/touch devices. Testing code based on this example with assistive technologies is essential before considering use in production systems.
- The ARIA and Assistive Technologies Project is developing measurements of assistive technology support for APG examples.
- Robust accessibility can be further optimized by choosing implementation patterns that maximize use of semantic HTML and heeding the warning that No ARIA is better than Bad ARIA.
About This Example
The below example section contains a simple personal information input form divided into 3 sections that demonstrates the Accordion Pattern.
|Space or Enter
|When focus is on the accordion header of a collapsed section, expands the section.
|Shift + Tab
Role, Property, State, and Tabindex Attributes
true when the Accordion panel is expanded, otherwise set to
|Points to the ID of the panel which the header controls.
|Creates a landmark region that contains the currently expanded accordion panel.
HTML Source Code