WAI-ARIA and Pagination

Question

I would like to get some advice on WAI-ARIA markup I have added to my paginated post navigation.

Does this look correct, am I missing anything?

Should anything be added/removed to the current page link (#2)?

Also, curious on my "Page Count" and "View All" sections what if anything can be added to make it more ARIA-friendly.

<nav role="navigation" class="post-navigation">

     <ul role="menubar" class="pagination">

        <!-- Page Count -->
        <span class="page-count">Page 2 of 4 </span>

        <li aria-label="Previous">
            <a role="menuitem" aria-posinset="1" data-pagenum="1" href="#">
                <span aria-hidden="true">«</span>
            </a>
        </li>
        <li>
            <a role="menuitem" aria-posinset="1" data-pagenum="1" href="">1</a>
        </li>
        <li class="active">
            <span role="menuitem" aria-posinset="2">2</span>
        </li>
        <li>
            <a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">3</a>
        </li>
        <li>
            <a role="menuitem" aria-posinset="4" data-pagenum="4" href="#">4</a>
        </li>
        <li aria-label="Next">
            <a role="menuitem" aria-posinset="3" data-pagenum="3" href="#">
                <span aria-hidden="true">»</span>
            </a>
        </li>

        <!-- View All link handing -->
        <li aria-label="View All">
            <a role="menuitem" href="#?viewall">View All</a>
        </li>

    </ul> 
</nav>

Answer 1

If you’re using HTML5 <nav> element, it’s not necessary to apply a role of ‘navigation’ – certain HTML elements inherently pass their relevant roles to the accessibility API. If you were wrapping the navigation menu in a <div>, for example, then you’d need to apply a role of ‘navigation’.

Role="menubar" has been correctly applied to the <ul> element, as has role="menuitem" to the <a> tags.

I would suggest applying a role="none" to each <li> element; otherwise this could confuse some users of assistive technologies since listitems and menuitems would be interspersed with each other.

Might be an idea to provide an aria-label to the <ul> with role="menubar"; used to help people understand the menu purpose and uniquely identify it from other menubars on the page.

Can also apply a tabindex="0" to first and last <a> elements – gives keyboard focus to link and makes a part of the tab order of the page. Alternatively, give a tabindex="-1" to make <a>s focusable but not part of the tab order of the page.