Home > database >  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?

Time:12-07

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?

CodePudding user response:

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

  • Related