Toggle button

Requirements

Users should be able to:

• Navigate to each button using assistive technology.
• Identify which button has been toggled. 
• Toggle between different views of the same content or filter options.

Interactions

Keyboard interactions

• Tab. Moves focus from the previous interactive element to the button or button group.
• Pressing tab again moves focus to the next interactive element on the page.
• Arrow left and Arrow right. Moves focus between different buttons in a group.
• Enter or Space. Activates the button.

Design considerations

• A selected button should have a clear visual selected state.
• Make sure there is sufficient contrast between selected and non-selected states.
• Use a label to make the purpose of a button group clear.

Development considerations

• Button names should be clear and descriptive of purpose. The visible names should match the accessible names.
• Use aria-describedby pointing to the button group label to emphasize its purpose to screen reader users.
• Buttons should be wrapped in a div with a role=”group” to help screen reader users understand the relationship between buttons.
• Use the aria-pressed attribute to make screen reader users aware of a button's state.