Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pagination: improve accessibility #22009

Closed
thbt opened this issue Feb 16, 2017 · 1 comment
Closed

Pagination: improve accessibility #22009

thbt opened this issue Feb 16, 2017 · 1 comment

Comments

@thbt
Copy link

thbt commented Feb 16, 2017

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.

@thbt thbt changed the title Pagination: improve accessibility for disabled links Pagination: improve accessibility Mar 28, 2017
@thbt
Copy link
Author

thbt commented Mar 29, 2017

One more thing, you suggest swapping out <a> for <span>, but I would like to know which solution is the best for users of assistive technology.

Edit: After testing and discussing it, I decided to go with span

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants