Pagination > Update compact variant markup

Problem

In the compact example the markup for Prev or Next when a user can't move forward or back is incorrect. The <span> still has an href and as mentioned elsewhere, incorrect use of aria-disabled="true".

Solution

Remove aria-disabled="true" and the href and instead use aria-hidden="true" on the element. While "role="presentation" could be used here, it only removes the semantic meaning of the list item. Instead, using aria-hidden="true" removes it altogether.

For example:

<!-- Before -->
<li>
  <span aria-disabled="true" aria-label="Go to previous page" href="#">Prev</span>
</li>

<!-- After -->
<li aria-hidden="true">
  <span>Previous</span>
</li>

Using aria-hidden="true" will completely remove all elements, child elements, and content from the accessibility tree regardless of the default semantic nature and they will remain removed until the aria state is changed to false it functions in much the same way as CSS’s display:none. This is where it differs from role="presentation".

When you’re thinking about removing an element from the accessibility tree first think, “Am I removing the element all together or just the semantics?” If you do that, it will be sure to lead you down the right path and make your UI all the more pleasurable for assistive technology to consume. (Source)