0

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>
unor
  • 92,415
  • 26
  • 211
  • 360
Benjamin
  • 697
  • 1
  • 8
  • 32
  • 1
    Unless you have a problem or a specific question, you seem to ask for a code review, which might not be on-topic here. It could be asked on [codereview.se] (if you want to move your question, flag it and ask a moderator to migrate it). – unor Apr 02 '16 at 15:48
  • Thanks, Unor, I didn't even know about the 'Code Review' exchange. – Benjamin Apr 02 '16 at 21:19
  • 1
    Just a thought: `role="navbar"` and `"menu"` are intended to be used in app menus for actions like "File > open" or "Edit > Copy to clipboard". For a website navigation it's probably better to use a classical `
      ` list without a special role as you are providing usual weblinks to visit other pages... Also mentioned here: [A website navigation menu isn't exactly a menu](http://terrillthompson.com/blog/474)
     – Oops D'oh Apr 08 '16 at 22:25
  • If you have more than one landmark with a role="navigation", you'll need an aria-label="" with a description of that landmark (i.e. "Search results pagination" or "Primary site navigation"). You'll need this to be WCAG compliant. – Mark Witmer Nov 15 '18 at 21:44

0 Answers0