Accessibility in Blazor Pager Component
30 Jun 20221 minute to read
Accessibility is achieved in the Pager component through WAI-ARIA standard and keyboard navigations. The Pager features can be effectively accessed through assistive technologies such as screen readers.
WAI-ARIA
WAI-ARIA (Accessibility Initiative – Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with Ajax, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components.
The following ARIA attributes are used in the Pager:
- pager (role)
- link (role)
- aria-label (Attribute)
- aria-selected (Attribute)
Keyboard navigation
Pager functionalities can be interactive with keyboard shortcuts.
The following keyboard shortcuts are supported by Pager.
| Interaction Keys | Description |
|---|---|
| Page down / Right arrow | Navigates to the next page. |
| Page up / Left arrow | Navigates to the previous page. |
| Enter / Space | Select the currently focused page. |
| Tab | Focus on the next pager item. |
| Shift + Tab | Focus on the previous pager item. |
| Home | Navigates to the first page. |
| End | Navigates to the last page. |
| Alt + Page up | Navigates to the previous pager. |
| Alt + Page down | Navigates to the next pager. |