Accessible Pagination Example

Notes

• A labeled Nav element is used as a container. Nav element is subjective; usage also may depend on the number of other nav elements on page; could use Section instead.
• An unordered list is used for pagination items. Other possibilities are an ordered list or no list.
• An aria-label is added to anchors to give more context to link text for screen reader users.
• The current item is marked with aria-current="page".
• The current item originally had the anchor replaced with a span. It now remains an anchor without an href attribute as I believe the positives now outweigh the negatives, especially since onclick is not used and a related TalkBack bug has been fixed. See article from 2019, The accessibility of placeholder links.