What ARIA state role to use for current page in navigation

Question

Recently I've been implementing ARIA into a web application and I found this question to be quite helpful in the improving the navigation parts.

After implementing this in all modules, I discovered this HTML validation error:

Attribute aria-selected not allowed on element a at this point.

Looking at the ARIA specification, I see that aria-selected is only used in roles gridcell, option, row, and tab. In my case, the role of the link is menuitem.

This is a representative sample of the HTML code:

<nav role=navigation>
    <ul role=menubar>
        <li role=presentation><a href='page1.php' role=menuitem>Page 1</a></li>
        <li role=presentation><a href='page2.php' role=menuitem>Page 2</a></li>
        <li role=presentation><a href='page3.php' role=menuitem aria-selected=true>Page 3</a></li>
        <li role=presentation><a href='page4.php' role=menuitem>Page 4</a></li>
    </ul>
</nav>

As you can see, this is taken on "page 3".

What is the correct ARIA role to use here?

score 4 · Answer 1 · answered Oct 25 '17 at 12:58

4

you may also use aria-current="page" for describing current displayed page among navigation items.

answered Oct 25 '17 at 12:58

Jan Stanicek

1,201
1
14
30

See for some further explanation: https://tink.uk/using-the-aria-current-attribute/ – murb Feb 13 '18 at 17:08

AlastairC · Accepted Answer · 2013-10-28T12:32:17.960

2

I believe that aria-selected is for 'widgets' that are one-tab stop, like a set of tabs that you then arrow around to select. The selected aspect is about which one is in focus, not which page you are on.

I would check out this as a well tested example: http://whatsock.com/tsg/Coding%20Arena/ARIA%20Menus/Horizontal%20(Internal%20Content)/demo.htm

From: http://whatsock.com/tsg/

For showing the current page I would probably use a more traditional method: Make it not a link. E.g:

<li><a href='page2.php'>Page 2</a></li>
<li><strong>Page 3</strong></li>

This also prevents people from clicking on the same-page link by accident (which I see quite often in usability testing). You can apply the same CSS to nav ul a and nav ul strong and then override the styling for the strong.

edited Oct 28 '13 at 12:32

answered Oct 26 '13 at 12:37

AlastairC

3,277
21
15

That answers the question about what `aria-selected` is for, but not "how to identify which page I am on". Interesting demo nonetheless. – rink.attendant.6 Oct 28 '13 at 06:54
Ah, ok, I've added something about current page, does that help? – AlastairC Oct 28 '13 at 12:32

score 1 · Answer 3 · answered Dec 10 '19 at 12:24

Short answer: you can use aria-current="page" or aria-current="location" to indicate the current link in a list of links.

Your pagination component could be improved in terms of accessibility (you can see this as a variation of the similar breadcrumbs pattern):

<nav aria-label="pagination">
  <ol>
    <li>
      <a href="/results/1">Page 1</a>
    </li>
    <li>
      <a href="/results/2">Page 2</a>
    </li>
    <li>
      <a href="/results/3" aria-current="location">Page 3</a>
    </li>
    <li>
      <a href="/results/4">Page 4</a>
    </li>
  </ol>
</nav>

A few notes:

Use <nav> to automatically use the navigation landmark (<nav> is equivalent to <div role="navigation"> but shorter and more elegant)
Use aria-label to provide a meaningful name to the <nav> (most likely, you have more <nav> elements on the page and you should label each one accordingly).
Use to make the set of links structured. This can also help screen reader users as it will be announced as "pagination, navigation (next) list, 4 items, helping users understand how many pages there are.
Use aria-current="location"oraria-current="page"` current page of the list (this is most likely shown in a different style as the other pages, but we need to mark it for screen reader users).

What ARIA state role to use for current page in navigation

3 Answers3

Linked