Accessibility in Blazor Pager Component
26 Jun 20264 minutes to read
The Blazor Pager component is designed to meet widely recognized accessibility standards, ensuring compatibility with assistive technologies and delivering an inclusive experience. It adheres to the following guidelines:
- ADA – Americans with Disabilities Act compliance for accessible digital content.
- Section 508 – U.S. federal accessibility requirements for software applications.
- WCAG 2.2 – Web Content Accessibility Guidelines for perceivable, operable, and understandable content.
- WAI-ARIA Roles – Accessible Rich Internet Applications specifications for improved interaction with assistive technologies.
Accessibility Compliance
The table below lists the accessibility features supported by the Blazor Pager component:
| 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 | |
Legend:
- Fully meets the requirement. - Partially meets the requirement.
- Does not meet the requirement.WAI-ARIA
The Blazor Pager component applies Accessible Rich Internet Applications (WAI-ARIA) roles and attributes to improve interoperability with assistive technologies.
| Element | Purpose | Applied Role / Attribute |
|---|---|---|
| Pager root container | Identifies the region as page navigation | role="navigation" |
| Pager wrapper | Groups the collection of page selectors | role="pager" |
| Page selector | Represents an interactive control for page selection | role="button" |
| Navigation region | Provides an accessible name for the navigation area | aria-label="<descriptive text>" |
Keyboard navigation
The Blazor Pager component supports keyboard interactions to ensure accessibility for individuals relying on assistive technologies or keyboard navigation. The available shortcuts are:
| Windows | Mac | Action |
|---|---|---|
| Page Down / → | Page Down / → | Navigate to the next page |
| Page Up / ← | Page Up / ← | Navigate to the previous page |
| Enter / Space | Enter / Space | Select the currently focused page |
| Tab | Tab | Move focus to the next pager item |
| Shift + Tab | ⇧ + Tab | Move focus to the previous pager item |
| Home | Home | Navigate to the first page |
| End | End | Navigate to the last page |
| Alt + Page Up | ⌥ + Page Up | Navigate to the previous pager group |
| Alt + Page Down | ⌥ + Page Down | Navigate to the next pager group |
Ensuring accessibility
The Blazor Pager component’s accessibility compliance is validated using axe-core integrated with Playwright tests. This automated testing ensures adherence to accessibility standards and identifies potential issues.
An interactive sample is available to evaluate the component’s accessibility using standard tools: