Accessibility in Blazor Button Group
14 Aug 20263 minutes to read
The Blazor Button Group component follows widely accepted accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility. This document summarizes the compliance level of the component, its supported keyboard interactions, and the validation tools used to verify accessibility.
The accessibility compliance for the Blazor Button Group component is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support | AA |
| Section 508 Support |  |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.Keyboard interaction
The Blazor Button Group component follows the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The behavior of the keyboard shortcuts depends on the Mode of the Button Group (single, multiple, or default/command mode).
The following keyboard shortcuts are supported by the Blazor Button Group component.
| Windows | Mac | Actions |
|---|---|---|
| Tab | Tab | Focuses the next button in the Button Group. |
| Shift + Tab | ⇧ + Tab | Focuses the previous button in the Button Group. |
| Arrows (↑ , → , ↓ , ←) | Arrows (↑ , → , ↓ , ←) | In SelectionMode.Single, moves focus and selects the next/previous button. In SelectionMode.Multiple, moves focus only; press Space to toggle the focused button. |
| Space | Space | Activates the focused button in the default Button Group, or toggles selection of the focused button in SelectionMode.Multiple. |
Ensuring accessibility
The Blazor Button Group component’s accessibility levels are ensured through axe-core with Playwright tests.
The accessibility compliance of the Blazor Button Group component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Blazor Button Group component with accessibility tools.