3
\$\begingroup\$

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>
\$\endgroup\$
4
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.