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.