Simple Accordion Example

The link below toggles the expansion/collapse of additional information. This is an example of how to implement such a control in an accessible manner.

Note: For satisfying WCAG Success Criteria 2.4.4 - Link Purpose (In Context) when meeting WCAG A and AA requirements, the "Show" and "Hide" text would need surrounding context to convey the context of the link. Understanding link purpose out of context through the link text alone is required by Success Criteria 2.4.9 - Link Purpose (Link Only), which is a WCAG level AAA requirement. Most websites and applications strive for WCAG A and AA compliance so this is generally not a requirement.

Concepts included in this example for accessibility:

• The aria-expanded state has been added to the link that is expandable/collapsible to convey its state. The state is updated accordingly when the element's state changes.
• The aria-controls property has been added to the link that is expandable/collapsible and references the ID of the content toggled by the link.
• The CSS display property is updated appropriately when toggling the content to ensure it is properly hidden both visually as well as programmatically to ensure it is not exposed to assistive technology when collapsed and visually hidden.
• The region role has been applied to the element containing the additional content. This informs users when they are entering/exiting the region of related information. The aria-expanded state is necessary however a region is not required for this type of widget. This is just a proof of concept.
• The aria-label property has been applied to the region containing the expandable text to name the region. As aforementioned, a region is not necessary for the toggled content. When regions are used, however, they must be labeled to provide accessible names. This facilitates users navigating via regions with a screen reader to identify the regions.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa ante, tincidunt sed eros sit amet, finibus efficitur orci. Etiam a suscipit neque, ac cursus massa. Integer eros orci, porttitor et gravida nec, maximus ut sem. Suspendisse potenti. Nunc metus dui, fermentum ac est sed, ullamcorper pulvinar est. Donec cursus sit amet mauris iaculis aliquet. Vestibulum sit amet mi nec justo malesuada tincidunt. Integer sed bibendum ex, in faucibus ligula. Sed a felis sodales, blandit ante id, iaculis enim. Vestibulum rhoncus dolor arcu, at rutrum libero molestie non. Vivamus scelerisque sapien augue, vitae venenatis enim venenatis ut. Integer in odio eget nisi facilisis consequat. Aliquam bibendum nulla ex, non porttitor neque posuere bibendum.