Accessibility Fix: Add pagination markup for screen reader users to pagination

  • Resolved Amber Hinds

    (@alh0319)


    2 weeks ago

    Hi Tobias,

    Thanks for this great plugin. Would you please be able to update the pagination to have the expected HTML markup for screen reader users?

    Pagination helps the assistive technology users navigate the content. Here are recommendations for improving TablePress pagination:

    • Place the pagination elements in a nav tag. If you do not use a nav tag, you need to add role=”navigation” to the existing div.
    • Include an aria-label=”pagination” on the nav tag (or div with role of navigation) to describe the type of navigation.
    • Add meaningful aria-labels to the pagination links, for example aria-label=”next page” rather than just the words next or previous.

    Here’s your current pagination code:

    <div class="dataTables_paginate paging_simple" id="tablepress-frontpage-no-2_paginate">
         <a class="paginate_button previous disabled" aria-controls="tablepress-frontpage-no-2" aria-disabled="true" role="link" data-dt-idx="previous" tabindex="-1" id="tablepress-frontpage-no-2_previous">Previous</a>
         <a class="paginate_button next" aria-controls="tablepress-frontpage-no-2" role="link" data-dt-idx="next" tabindex="0" id="tablepress-frontpage-no-2_next">Next</a>
    </div>

    Improved code:

    <!-- Option 1 -->
    <nav class="dataTables_paginate paging_simple" id="tablepress-frontpage-no-2_paginate" aria-label="table pagination">
         <a class="paginate_button previous disabled" aria-controls="tablepress-frontpage-no-2" aria-disabled="true" role="link" data-dt-idx="previous" tabindex="-1" id="tablepress-frontpage-no-2_previous" aria-label="previous page">Previous</a>
         <a class="paginate_button next" aria-controls="tablepress-frontpage-no-2" role="link" data-dt-idx="next" tabindex="0" id="tablepress-frontpage-no-2_next" aria-label="next page">Next</a>
    </nav>

    <!-- Option 2 -->
    <div class="dataTables_paginate paging_simple" id="tablepress-frontpage-no-2_paginate" role="navigation" aria-label="table pagination">
         <a class="paginate_button previous disabled" aria-controls="tablepress-frontpage-no-2" aria-disabled="true" role="link" data-dt-idx="previous" tabindex="-1" id="tablepress-frontpage-no-2_previous" aria-label="previous page">Previous</a>
         <a class="paginate_button next" aria-controls="tablepress-frontpage-no-2" role="link" data-dt-idx="next" tabindex="0" id="tablepress-frontpage-no-2_next" aria-label="next page">Next</a>
    </div>

    In addition to this, it would be great to add an option which allows numbered pagination to be turned on. Here’s a good example of accessible code for numbered pagination.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi @alh0319!

    Thanks for your post and this very valuable feedback, I really appreciate it!

    Good news here: TablePress 3.0, currently scheduled for mid-November (together with WP 6.7), will see improvements of the HTML markup for pagination and other table features, in relation to accessibility!

    The HTML code will then be

    <div class="dt-paging">
    <nav aria-label="pagination">
        <button class="dt-paging-button disabled previous" role="link" type="button" aria-controls="tablepress-1" aria-disabled="true" aria-label="Previous" data-dt-idx="previous" tabindex="-1">?</button>
        <button class="dt-paging-button next" role="link" type="button" aria-controls="tablepress-1" aria-label="Next" data-dt-idx="next">?</button>
    </nav>
    </div>

    From what I can see, this already implements the first two bullet points of your list. I’ll check if I can also extend the aria-label texts by default (it’s possible by using a translation feature already, but I’m not sure if I can easily change the default, as this is loaded from an external library). Also, that external library now uses <button> tags instead of <a> which should however be fine, due to the ARIA attributes, right?

    Choosing numbered pagination will also be possible (though, only in the TablePress premium versions, together with some further pagination features), where the output will look like

    <div class="dt-paging">
    <nav aria-label="pagination">
        <button class="dt-paging-button previous" role="link" type="button" aria-controls="tablepress-1" aria-label="Previous" data-dt-idx="previous">?</button>
        <button class="dt-paging-button" role="link" type="button" aria-controls="tablepress-1" data-dt-idx="0">1</button>
        <span class="ellipsis" aria-controls="tablepress-1" aria-disabled="true" data-dt-idx="ellipsis" tabindex="-1">…</span>
        <button class="dt-paging-button" role="link" type="button" aria-controls="tablepress-1" data-dt-idx="3">4</button>
        <button class="dt-paging-button current" role="link" type="button" aria-controls="tablepress-1" aria-current="page" data-dt-idx="4">5</button>
        <button class="dt-paging-button" role="link" type="button" aria-controls="tablepress-1" data-dt-idx="5">6</button>
        <span class="ellipsis" aria-controls="tablepress-1" aria-disabled="true" data-dt-idx="ellipsis" tabindex="-1">…</span>
        <button class="dt-paging-button" role="link" type="button" aria-controls="tablepress-1" data-dt-idx="8">9</button>
        <button class="dt-paging-button next" role="link" type="button" aria-controls="tablepress-1" aria-label="Next" data-dt-idx="next">?</button>
    </nav>
    </div>

    Unlike the example markup in your link, this does not use an unordered list, so that’s something that I will forward as a suggestion to the developer of the library that TablePress uses for this!

    Again, thanks a lot for your input here, I really appreciate it!

    Best wishes,
    Tobias

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.