Accessible Tabs and Accordions

Both tabs and accordions show and hide content after user initiation. When stripped down to their most basic form, each toggle element can be semantically represented as a heading followed by content relating to that heading. For this reason, the markup must begin in this way for progressive enhancement. Doing this allows the content to make the most sense when no JavaScript is available, when viewed in text only browsers (like WebbIE), and when displaying all content expanded in the print stylesheet. It also lends itself to displaying expanded for large screen displays and compacting to an accordion layout for smaller screens only which can be a better user experience for some content.

With progressive enhancement, JavaScript is added to condense the content into its tab or accordion container. To be accessible, the accordion triggers and tabs must be keyboard friendly. It is also important to use ARIA to give screen readers more information about what content is being displayed.

Try out the samples below or download on GitHub.

Accordion anytime, anywhere

This is your classic accordion that always acts like an accordion no matter what size screen resolution.

First Heading Content for the first accordion. This can include multiple paragraphs, nested headings, lists, images, tables, a map, a form, or even additional nested tabs and accordions. Regular Heading Just a regular link. Second Heading Content for the second accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. First Tab Content for the first tab. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Second Tab Content for the second tab. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. Third Tab Content for the third tab contains an additional nested accordion. Content can be easier to scan and read when its all expanded on large screens by default, without the extra work of opening each individual accordion. Closed Accordion Content for closed by default accordion. Open Accordion Content for open by default accordion. Open Accordion 2 Content for open by default accordion 2. Third Heading Content for the third accordion contains an additional nested accordion set to display as an accordion for small screens only. Content can be easier to scan and read when its all expanded on large screens by default, without the extra work of opening each individual accordion. Nested Accordion Content for the first nested accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Nested Accordion 2 Content for the second nested accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. Nested Accordion 3 Content for the third accordion.

Accordion multi select

This accordion can have more than one open at a time.

First Heading Content for the first accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Second Heading Content for the second accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. Third Heading Content for the third accordion.

Accordion default open option

The accordions can be open by default with the class of "open" added to the toggle.

First Heading - Default Open Content for the first accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Second Heading - Default Open Content for the second accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. Third Heading - Default Closed Content for the third accordion.

Accordion to plain text

Taking a mobile-first approach, this content acts like an accordion on small screens and expands out to show the full content on large screens. This method makes for a good user experience by providing an easy to scan mobile layout while not making content hidden behind extra clicks on large screens.

First Heading Content for the first accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Second Heading Content for the second accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. First Tab Content for the first tab. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Class names to add to the accordion container for different styles: always or small-only

tabs

multi

open Second Tab Content for the second tab. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. Test Data Table Table Heading 1 Table Heading 2 Table Heading 3 Table data Table data Table data Table data Table data Table data Table data Table data Table data Third Tab Content for the third tab contains an additional nested accordion. Content can be easier to scan and read when its all expanded on large screens by default, without the extra work of opening each individual accordion. Multi Nested Accordion Content for the first nested accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Multi Nested Accordion 2 Content for the second nested accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. Multi Nested Accordion 3 Content for the third accordion contains an additional nested accordion. Third Heading Content for the third accordion contains an additional nested accordion. Content can be easier to scan and read when its all expanded on large screens by default, without the extra work of opening each individual accordion. Nested Accordion Content for the first nested accordion. This can include multiple paragraphs, nested headings, lists, images and even additional tabs and accordions. Geonetric on Google Maps Nested Accordion 2 Content for the second nested accordion. Again, this content can include multiple paragraphs, nested headings, lists, tables, images and even additional tabs and accordions. Nested Accordion 3 Content for the third accordion contains an additional nested accordion.

Accordion to tabs

An easy-to-use accordion for small screens turns into tabs at higher resolutions.