Build your web apps using Smart UI
Smart.Pager - Accessibility
Pager provides a built-in compliance with WAI-ARIA specification. This is achieved through attributes like role, aria-label, aria-current and others. They are applied to the corresponding elements inside the template of the components.
The purpose of the ARIA attributes is to help disabled people by providing the information specific to the component to assistive technology in the screen readers.
The Pager represents a collection of navigational elements, such as buttons, inputs, popups. As such it has the role navigation applied.
There are many controls inside the Pager component that have different roles, for example the page navigation buttons that have the role button or the page index selectors that have the role listitem since they are part of container with a role list.
The following ARIA attributes are used in the Pager:
- aria-disabled - indicates that the interaction with the Pager is disabled.
- aria-current - indicates the currently selected page. Applied to the page index selector.
- aria-expnaded - indicates whether the page size selector popup is expanded or not.
- aria-label - labels the page navigation buttons of the Pager. There are buttons for first,last, next and previous pages.
- aria-labelledby - identifies the element that labels the Pager by it's id. The Pager contains a specific summary contains that indicates the currently selected page. Other elements that have this attribute applied are the navigation input and the page size selector. They have a specific label that appears infront of the control.
The following keyboard shortcuts are available to interact with the Pager:
|Home||Selects the first page.|
|End||Selects the last page.|
|Page Down/ Arrow Down/ Arrow Left||Selects the previous page.|
|Page Up/ Arrow Up/ Arrow Right||Selects the next page.|
Additional information on WAI-ARIA for the SMART Framework can be found here.