Search code examples
htmlaccessibilitywai-aria

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

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

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