When you use process blocks in your Rise 360 courses, introducing linear concepts and letting learners move through sequential steps is a snap. It’s as easy as 1-2-3!

Craft a carousel of media-rich steps with or without an introduction and summary. Check out the details below.

1. Insert a Process Block
2. Modify the Introduction and Summary
3. Add and Modify Steps
4. Customize the Block Settings
5. Accessibility

Step 1: Insert a Process Block

1. Open a Rise 360 course, then edit an existing lesson or create a new one.
2. Select the process block from the blocks shortcut bar.

You can also

1. Click the All Blocks button on the blocks shortcut bar or click the insert block icon that appears when you mouse over a boundary between blocks.
2. From the sidebar, choose the Interactive category, then select Process.

Step 2: Modify the Introduction and Summary

By default, an introduction and summary appear before and after the numbered steps in your process interaction. The introduction has a button that starts the process, and the summary has a button that takes you back to the beginning when you’re finished. Here's how to edit the introduction and summary or turn them off if you don’t need them.

1. Hover over the block to access the left-hand design toolbar. Click the Content icon.
2. Change the introduction and summary titles if you prefer different wording. 
3. Modify the body text and add any media you’d like.
4. If you don’t need an introduction or summary, click the eye icon to the left of each title in the sidebar to hide one or both. When they’re disabled, your process starts with the first step in the interaction and ends with the last step, and there’s no option to automatically jump back to the beginning.

Step 3: Add and Modify Steps

There are a lot of ways you can modify your steps, from adding text to importing media.

1. From the content screen, click the Add Step button at the bottom of the sidebar to add steps to the process. Drag steps up and down the sidebar to reorder the list. Steps are automatically numbered and will renumber themselves when you rearrange them.
2. Select each step in your interaction, then do any of the following:
   
   Add Text
   Edit (or delete) the title and body text.
   Add Media
   Click the camera icon to upload an image or video, browse the Content Library 360, or embed web content (such as a YouTube video). Once added, you can change the alignment, adjust the crop on images, and add alt text. Media displays between the title and description text for each step.
   Add Audio
   Click the microphone icon to generate AI audio, record audio, or upload an audio file. 
3. If you need to delete a step, hover over it in the sidebar and click the garbage bin icon that appears.
4. When you’re finished, click Close in the upper right corner to return to your block lesson.

Step 4: Customize 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 cards when you modify the block background. The Format menu provides options for changing the block padding, toggling or customizing the step label, disabling zoom for images, and toggling the placement of audio. 

You can also apply Heading Levels. These provide structure to your content to make it more accessible when read by assistive devices. 

Accessibility 

Process 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 a process block. This information can also help you verify the expected behavior during accessibility testing.

• Focus starts on the step controls (the list of steps), not the content. 

• When the step controls are in focus, use the Left and Right Arrow keys to move between steps.

• Press Tab to move to interactive elements, such as the Previous, Next, and Start buttons.

• Press Enter or Space to activate a button.

Screen Reader Experience

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

• Focus starts on the step controls (the list of steps), not the content. This means the reading order is different from the visual order. 

• The screen reader announces the interaction as a carousel and identifies the current step. For example, “Carousel… slide controls grouping… go to slide button… current.” 

• The focus remains on navigation buttons as the learner moves through the steps, unless the learner intentionally moves into the content.

• When focus is on the step controls, use the Up and Down Arrow keys to move between steps.

• The content for each step (except the introduction) is read automatically as you navigate through the block.

• Press Tab to move to interactive elements, such as the Previous and Next buttons and the Start button.

• Press Enter or Space to activate a button.

Mobile Experience

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

• Focus starts on the step controls (the list of steps), not the content, and will remain on the step controls as a learner moves through the content. 

• When not using a screen reader, learners can either tap the step controls or swipe to move between steps. 

• When using a screen reader, the learner should use the navigation controls for the screen reader on their device.

Our Approach

Process blocks use a carousel-style interaction (a set of slides that learners move through). Based on the guidance from the WAI-ARIA Authoring Practices Guide (APG) for carousels, focus is placed on the navigation controls before the content.

This approach helps learners:

• Understand that the interaction includes multiple steps

• Move between steps efficiently

• Choose where to start before reading

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.