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-labeland.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-onlyspan. - 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.