Pagination: improve accessibility
Created by: thbt
There is a few issue with the current implementation of accessibility for the pagination component
- When working with icons, you use both
aria-label
and.sr-only
. It makes sense to use aria-label on a link, since it is standard and is supported by most screen readers, so we don't really need the.sr-only
span. - Using a screen reader, disabled pagination links are not announced as "disabled". They can't be focused but the screen reader can still browse them.
- adding
aria-disabled="true"
to the link in the example would fix this issue.
- adding
- You suggest adding
<span class="sr-only">(current)</span>
for the currently visited link, but some screen readers (NVDA) will read it wrong when reading the pagination backwards (from last to first): consider 2 is selected, it will read3 - current - 2 - 1
.- Using
aria-label="Page 2 (current)"
oraria-current="true"
would fix this issue.
- Using
Let me know what you think.