You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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 read 3 - current - 2 - 1.
Using aria-label="Page 2 (current)" or aria-current="true" would fix this issue.
Let me know what you think.
The text was updated successfully, but these errors were encountered:
There is a few issue with the current implementation of accessibility for the pagination component
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.aria-disabled="true"
to the link in the example would fix this issue.<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
.aria-label="Page 2 (current)"
oraria-current="true"
would fix this issue.Let me know what you think.
The text was updated successfully, but these errors were encountered: