Step Indicator
The Step Indicator guides users through a number of steps across multiple screens in order to complete the task.
Standard Step Indicator
The standard Indicator displays a label for each step on larger screen sizes and scales to a more condensed version on XS/Small screen sizes.
When to Use
- This is the most common Step Indicator and should be used in most instances.
When Not to Use
- Do not use as a form of pagination.
- On smaller screen sizes, it may be preferred to use a Standard Indicator with Dropdown (as this provides the user with more insight into subsequent steps in a process).
Examples
- Standard Indicator (shown above)
- Standard Indicator with Dropdown
- Condensed Indicator
- Dropdown Indicator
Usage
Number of Steps
Keep the number of steps at a minimum (target 3 to 6 steps). For larger processes, consider breaking up into separate process flows. If a small number of steps is not possible, consider using the Standard Indicator with Dropdown or the Dropdown Indicator (as these allow for a large number of steps to be indicated within smaller screen sizes).
Visual Display
- The Step Indicator should appear at the top of the screen, below the main navigation.
- The step width flexes with the size of the container. There is a minimum width of 100px, and a maximum width of 160px. No step in this format should exceed this 160px even when a container far exceeds the total width of the Step Indicator.
- Replace the “Step X” label with the corresponding name of the step and keep labels extremely succinct.
Examples
Standard Indicator with Dropdown
This version displays the Standard Step Indicator on wider screen resolutions, transitions to a Condensed variation on medium screen sizes and transitions to a Dropdown variation on the smallest screen sizes.
When to Use
- Use when there are a large number of steps and it is important to see the name of the steps on smaller screen sizes.
When Not to Use
- For processes with fewer steps, the Standard Step Indicator is preferred.
Condensed Indicator
The Condensed Step Indicator is similar to the Standard Step Indicator with the exception of not including the label beneath each individual step. The label may appear above the Step Indicator, as an optional element
- Smaller scale
- Does not display a label below; instead the label displays on tap/hover
- Can wrap to more than one line, based on available space
- May display a label name (current step only) above the indicator (optional)
When to Use
- Use when there is limited horizontal space or when a smaller scale is preferred (on mobile applications, for example).
- When communicating the number of steps is important AND when it is not critical to communicate the name of each step.
When Not to Use
- When it is important for the user to know the name of each subsequent step.
Additional Guidelines
- On desktop, A tooltip should display on hover or tap to label each step.
- Try to limit the number of steps to six or fewer.
Dropdown Indicator
When to Use
- Use on smaller screen sizes when communicating the name of each step and/or the ability to navigate between steps is important to users.
When Not to Use
- Not recommended for larger screen resolutions.
- Not recommended for short process flows.
Additional Guidelines
- Use a disabled state for steps that the user is not able to access.
- When the user selects a step in the dropdown, the specified step should load and the indicator should display the new step.
Developer Notes
The following options may be passed when using new Spark.StepIndicator(el, {}):
For all available methods and full API, refer to the component code on Bitbucket.
Standard Indicator
This is default type of Step Indicator. You don’t need to set any parameters.
Standard Indicator with Dropdown
You can set data-type='standard-dropdown', or directly set parameter type='standard-dropdown' to set this variation.
Large Indicator
You can set data-type='large', or directly set parameter type='large' to set this variation.
The Large Indicator is not recommended for most products. It will remain “large” at all breakpoints and will wrap if there is not enough space.
It is best used by setting at custom breakpoints and configuring the type before calling update().
Condensed Indicator
You can set data-type='condensed', or directly set parameter type='condensed' to set this variation.
Dropdown Indicator
You can set data-type='dropdown', or directly set parameter type='dropdown' to set this variation.
Accessibility Notes
Providing Labels for Assistive Devices
Depending on the size or variation of the Step Indicator being displayed, certain values are displayed or hidden to account for the available screen size or the configurations selected. To ensure that the correct text labels are made available to screen-readers and other assistive devices regardless of viewport size, it is important to set aria attributes to certain elements within the Step Indicator component.
Each step within the Step Indicator contains a spark-step-indicator__text element. This should be considered the primary text made available to assistive devices as its label is typically more descriptive. As such, an id attribute should be set for this label. Keep in mind that this attribute needs to be unique on each page, so each step should have its own unique id e.g id="step-1", id="step-2" and so on.
Since the primary text comes from the element discussed above, the text in the spark-step-indicator__icon element needs to be hidden to assistive devices. To accomplish this, add an aria-hidden attribute to this element with the value set to true unless it is either a completed or current step. Current or completed icons should have an aria-label attribute attached to them to notify assistive devices of the current state of the Step Indicator.
Once the id above is set, we need to indicate to assistive devices that the text label contained within that element is what should be read out. This is done by setting an aria-labelledby attribute to the parent spark-step-indicator__item element, with the value of the attribute being the id set on the child element.
The example below illustrates the process above.
Identifying Completed and Other Steps
The current step and completed step should have an aria-label attribute that is appropriate for the current state of the step. The aria-hidden attribute should be removed from the current and completed steps. You can update these by calling the setStepState.
Managing Disabled Steps
To prevent navigation to a disabled step via keyboard, a tabindex attribute should be set on the spark-step-indicator__item--disabled element. The value of this attribute should be -1. If changing the status of a step programmatically via the setStepState function (e.g. completed, disabled) then Javascript will set the attribute above for disabled items, or it will be removed if the status changes to something other than disabled. For more information, read the full API documentation.
Dropdown Indicator States
The Standard Indicator with Dropdown and Dropdown Indicator variations require an id attribute set on the .spark-step-indicator__list element. This attribute is used by an aria-controls attribute set on the dropdown button to indicate which element it controls. If the attribute is not set, the value of the aria-controls will be empty, in which case it might not be clear to assistive devices as to which element is being controlled. Other aria attributes used in conjunction with the above, e.g. aria-expanded, are set automatically using Javascript.