Accordion and tabs blocks let you explore related concepts in media-rich interactions. Showcase items one by one or compare multiple concepts in a clean, easy-to-digest format.

1. Insert Accordion and Tabs Blocks
2. Add Content and New Items
3. Switch Between Block Types
4. Modify the Block Settings
5. Accessibility

Step 1: Insert Accordion and Tabs Blocks 

1. Open a Rise 360 course, then edit an existing lesson or create a new one.
2. Click All Blocks in the blocks shortcut bar or the insert block icon that appears when you mouse over a boundary between blocks.
3. From the sidebar, select the Interactive category, then select Accordion or Tabs.

Step 2: Add Content and New Items

1. Hover over the block to access the left-hand design toolbar. Click the Content icon.
2. The edit panel opens on the left-hand side. You can modify the title and text of each item. 
   
   Click the media folder icon to add images, or web content. If media is already uploaded, click Edit to replace or remove it. You can also crop, add captions, and add alt tags for existing media. Click the audio icon to add generated AI audio, recorded audio, or upload an audio file. 
3. Click the Add Item button at the bottom of the sidebar to add additional items. You can add as many items as you want! Note that if you add more than four items in tabs, learners will have to scroll to see all of them.
4. Click X in the upper right corner to return to your lesson.

You can also edit body text directly inside accordion and tabs blocks. However, you can only edit title text, images, multimedia, and web content in the edit panel. 

Step 3: Switch Between Block Types

Think your tabs would look better as accordion items or vice versa? Then change it up! Hover over an existing tabs block. Click the block type selector button that appears to the left of the design toolbar and select Accordion or Tabs from the menu.

That’s it! Reverse the process if you want to switch back.

Step 4: Modify the Block Settings

Modify how your content looks on the screen by hovering over an existing block to access the left-hand design toolbar. Click the Style icon to access block background options. You also have the option to maintain a white background for accordion and tab items when you modify the block background. The Format menu provides options for changing the padding and accordion behavior, toggling the placement of audio, as well as disabling zoom for images. 

Accessibility

Tabs and accordion blocks are designed to support accessibility, but as an author, you control the accessibility of the content you add. Follow the tips below to help your content work well for all learners.

• Add alternative text (alt text) for all meaningful images. Describe what the image shows and why it matters in context, not just what it looks like. Mark purely decorative images so screen readers skip them (1.1.1 Non-text Content).

• Include closed captions for videos. Make sure captions are accurate, synchronized with the audio, and include relevant non-speech sounds when they add meaning (1.2.2 Captions [Prerecorded]).

• Provide audio descriptions or transcripts for videos with important visual content. A transcript should capture all spoken content and key visual information not covered in the narration (1.2.1 Audio-only and Video-only [Prerecorded]).

• Check text contrast when you change background colors. Aim for at least a 4.5:1 ratio for body text and 3:1 for large text (1.4.3 Contrast [Minimum]). 

For further guidance on creating accessible content, refer to the accessibility design tips in our articles below:

• Rise 360: How to Design an Accessible Course

• Accessibility Index

Keyboard Navigation

The following section describes what learners navigating a training with a keyboard can expect when using accordion and tabs blocks. This information can also help you verify the expected behavior during accessibility testing.

Accordion Block

• Focus starts on the first accordion header. 

• Press Tab and Shift + Tab to move between the accordion headers.

• When focus is on the accordion header for a collapsed panel, Enter or Space expands the panel.

• When focus is on the accordion header for an expanded panel, Enter or Space collapses the panel.

• If the accordion panel is expanded and contains interactive content such as an image or video, pressing Tab while on the header moves focus to those items.

Tabs Block

• Focus starts on the first tab element. 

• When the tab element is in focus, use the Left and Right Arrow keys to move between tabs.

• Press Tab to move to the tab panel, and Shift + Tab to move back to the tab element.

• If focus is on the last tab element, pressing the Right Arrow key moves focus to the first tab. If focus is on the first tab element, pressing the Left Arrow key moves focus to the last tab.

• If the tab panel contains interactive content such as an image or video, pressing Tab while in the tab panel moves focus to those items.

Screen Reader Experience

The following section describes what learners using screen readers can expect when navigating accordion and tabs blocks. You can also use it to verify the expected behavior during accessibility testing.

Accordion Block

• Focus starts on the first accordion header. 

• The screen reader announces the title, state, and heading level—for example, “TITLE button collapsed heading level 2.”

• Press Tab and Shift + Tab to move between the accordion headers.

• When focus is on the accordion header for a collapsed panel, Enter or Space expands the panel. The screen reader announces “expanded.” Press the Down Arrow key to move focus to the content. The screen reader announces “TITLE + region”, followed by the content. Press the Up Arrow key to move back to the accordion header.

• When focus is on the accordion header for an expanded panel, Enter or Space collapses the panel. The screen reader announces “collapsed.”

• If the accordion panel is expanded and contains interactive content such as an image or video, pressing Tab while focus is on the content moves focus to those items.

Tabs Block

• Focus starts on the first tab element. 

• The screen reader announces “tab control” to indicate that the learner has entered a tabs block, followed by the title of the first tab element—for example, “tab control, TITLE tab selected 1 of 3.” 

• When the tab element is in focus, use the Left and Right Arrow keys to move between tabs. The screen reader announces the tab element’s title and state—for example, “TITLE tab selected 2 of 3.”

• Press Tab to move to the tab panel, and Shift + Tab to move back to the tab element. The screen reader announces the title of the tab element first—for example, “TITLE property page” followed by the content of the tab panel.

• If focus is on the last tab element, pressing the Right Arrow key moves focus to the first tab. If focus is on the first tab element, pressing the Left Arrow key moves focus to the last tab.

• If the tab panel contains interactive content such as an image or video, pressing Tab while in the tab panel moves focus to those items.

Mobile Experience

The following section describes what learners using mobile screen readers can expect when navigating accordion and tabs blocks. You can also use it to verify the expected behavior during accessibility testing. 

Accordion Block

• Focus starts on the first accordion header. 

• Double-tap to open an accordion. Swipe right to move into the content. Swipe left to return to the accordion header. Double-tap again to close it.

• If a header is closed, swipe right to move to the next accordion header.

• If a header is open, swipe right to move into its content. Continuing to swipe right from the content moves focus to the next accordion header.

Tabs Block

• Focus starts on the first tab element. 

• Swipe right to move to the next tab element. Double-tap to select it.

• Continue swiping right through the tab elements to reach the tab panel and hear its content.

• Swipe left to move back to a tab element.

Our Approach

Accordion and tabs blocks were built using guidance from the WAI-ARIA Authoring Practices Guide (APG)—specifically the accordion pattern and the tabs pattern.

This approach helps learners:

• Understand that the interaction contains multiple sections of content

• Move between sections efficiently using standard keyboard controls

• Know which section is currently expanded or active

We’ve conducted usability testing with screen reader and keyboard users to help inform this approach. However, accessibility patterns can vary by context, and no single solution works in every scenario. We’ll continue to evaluate and improve these experiences over time based on learner feedback and evolving best practices.