The following example uses various CSS styles, dynamic Javascript and ARIA roles/properties to create an accessible accordion type hide/show area.
- CSS hidden is used to hide the content.
- CSS not_hidden is used to show the content.
- CSS focus is used to highlight the current focused control with a yellow background.
- Depending on the current state of the content (either hidden or not hidden) the Javascript setattribute method is used to:
- dynamically change the arrow image from pointing down to right.
- dynamically change the
aria-expanded
property to indicate the state of the accordion - dynamically change the
aria-label
property to indicate the state of the accordion, either open or closed (Just in casearia-expanded
property is not supported in the current browser/AT). - dynamically change the class from hidden to not_hidden in order to hide and show the content.
- dynamically move focus to an H tag inside the newly exposed content, causing the screen reader to speak and notify the user that content on the page has changed.
- Other ARIA roles/properties used:
- ARIA
role
is set to region. - ARIA
role
is set to button Aria-labelledby
is also used
- ARIA
Example 1:
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Code
![]()
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Standards:
- WCAG 2.0 SC 4.1.2 Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)