CODEWITHSUNDEEP
htmlaccessibilitywai-ariawcag
rink.attendant.6
rink.attendant.6

Reputation: 46218

What ARIA state role to use for current page in navigation

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?

Upvotes: 8

Views: 6388

Answers (3)

lucalanca
lucalanca

Reputation: 665

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

Upvotes: 1

Jan Stanicek
Jan Stanicek

Reputation: 1281

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

Upvotes: 5

AlastairC
AlastairC

Reputation: 3297

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.

Upvotes: 2

Related Questions