Should aria-current="page" be used for a client-side table pagination component?

Should aria-current="page" be used for a client-side table pagination component?

Problem Description:

It is my understanding that aria-current="page" should be used for a set of links when the link is for the current page. How does this relate to a table pagination component, where clicking the link does not navigate to a new page, but instead just changes the rows that are visible in the table?

Is this still appropriate for a page with multiple data tables?

Solution – 1

aria-current should be used if you have a set of things and one of them can be selected and has a different visual appearance based on it being selected. Whether that’s a list of links or table pagination doesn’t matter.

There are various values that can be used for aria-current. It used to only allow "true" and "false" and that would cause the screen reader to announce "current" after it announces the link name.

If you use page or step or one of the other values, most screen readers will say "current page" or "current step" after it announces the link name.

For example, if you have a table pagination widget like this:

table pagination widget

then when I navigate through the numbers, I should hear:

  • "page 1, link"
  • "page 2, link"
  • "page 3, link, current page"
  • "page 4, link"

and that can be accomplished with

<a aria-label="page 3" aria-current="page">3</a>

I could use aria-current="true" and that would change the announcement to:

  • "page 3, link, current"

Note: I also specified an aria-label for the link because otherwise I would just hear "3, link". Hearing that might not be too bad if the container for all the links (preferably a <nav> element) has an aria-label that says the widget is for paging through the table.

Rate this post
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.