Choosing Components for Accessibility

Components are built to be accessible out of the box, but it’s up to designers and developers both to implement them in a way that supports the built-in accessibility features. This means choosing the correct component for each use case based on the desired behavior over any other aspects.

Below summarizes several similar components to help clarify when and where to use them in order to best support users who require assistive technologies.

Autocomplete

The Autocomplete is best used when there is a long list of possible options, such as currency codes or locations, and the user will likely already know the value they need to input; the autocomplete offers a way to quickly narrow down a choice. The component will automatically handle accessible messaging. Autocomplete items should not be a link.

Autocomplete Filter

The Autocomplete Filter adds an additional filtering feature beyond the user’s typed input. Autocomplete items should not be a link.

The Autocomplete Filter is not a common pattern seen in other applications across the web, so we must ensure logical messaging is provided so a visually impaired user understands how to use it. Since the filter dropdown button appears before the input, it would be best to provide a description for the button to explain it’s interaction with the input that follows. Ideally, the description would be unique to the specific field.

Select

Use a Select when there are fewer than 12 options - otherwise, use an Autocomplete. A Select component can be used as a form field or when there are other atomic selections to be made that will then change the page in some way, i.e. a set of filter options for table rows or cards below the Select. Select items should not be a link.

Button Dropdown

A Button Dropdown should be considered as a collapsed set of Buttons within a Toolbar. In other words, the UI should make sense as a set of Buttons arranged in a row or as a dropdown. If it wouldn’t make sense to have each option as an individual Button component, it’s likely that the Button Dropdown is the wrong choice for the scenario. Each option in a Button Dropdown should behave as any other button - they should not trigger navigation but instead an action such as submitting a form or opening a modal.

Autocomplete vs Autocomplete Filter vs Select vs Button Dropdown - Use Case Summary

x indicates that a component is inappropriate for the use case

o indicates that a component is appropriate for the use case