Pager Accessibility

Accesibility Attributes

Web accessibility makes web content and web applications more accessible to disabled people. It's especially helpful in dynamic content changes and development of advanced user interface components with HTML, Javascript and related technologies. Smart HTML elements framework offers full accessibility support for it's web components.

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.

Keyboard Interaction

The following keyboard shortcuts are available to interact with the Pager:

Key Action
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.