Accessible CSS3 Animated Accordion Examples

Default Accordion

Toggle Target Title 1

An accordion component is a collection of expandable panels associated with a common outer container. Panels consist of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. The general look is similar to a tree where each root tree node is an expandable accordion header.

Toggle Target Title 2

The accordion component must have a role of tablist and have aria-multiselectable="true" This will enable an assistive technology, such as screen reader, to convey that the tablist is an accordion or a multiselectable tablist. This will also tell the user that the keyboard navigation matches an accordion and not a tablist.

Toggle Target Title 3

Contained within the tablist is a set of tab/tabpanel pairs. Each header tab in the tablist has a role of tab. The accordion panel uses the role tabpanel and should have an aria-labelledby relationship referencing the correponding header having a role of tab

Accordion that closes the previously expanded item.

Toggle Target Title 1

An accordion component is a collection of expandable panels associated with a common outer container. Panels consist of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. The general look is similar to a tree where each root tree node is an expandable accordion header.

Toggle Target Title 2

The accordion component must have a role of tablist and have aria-multiselectable="true" This will enable an assistive technology, such as screen reader, to convey that the tablist is an accordion or a multiselectable tablist. This will also tell the user that the keyboard navigation matches an accordion and not a tablist.

Toggle Target Title 3

Contained within the tablist is a set of tab/tabpanel pairs. Each header tab in the tablist has a role of tab. The accordion panel uses the role tabpanel and should have an aria-labelledby relationship referencing the correponding header having a role of tab

Accordion with custom IDs

Toggle Target Title 1

An accordion component is a collection of expandable panels associated with a common outer container. Panels consist of a header and an associated content region or panel. The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. The general look is similar to a tree where each root tree node is an expandable accordion header.

Toggle Target Title 2

The accordion component must have a role of tablist and have aria-multiselectable="true" This will enable an assistive technology, such as screen reader, to convey that the tablist is an accordion or a multiselectable tablist. This will also tell the user that the keyboard navigation matches an accordion and not a tablist.

Toggle Target Title 3

Contained within the tablist is a set of tab/tabpanel pairs. Each header tab in the tablist has a role of tab. The accordion panel uses the role tabpanel and should have an aria-labelledby relationship referencing the correponding header having a role of tab