Open mellis481 opened 2 years ago
Certain implementation decisions that were made for the pagination component have resulted in some serious inaccessibility issues. These include:
The programmatic label for all pager buttons uses the
title
attribute which is sub-optimal.aria-label
is the best attribute to use as it works with more screen readers.The programmatic label for page number pager buttons only includes the page number itself and cannot be changed so screen readers will only ever announce eg. "2" instead of something more helpful like "Page 2".
Since a pagination component includes navigation elements, it should necessarily be wrapped in a
nav
element with an appropriate programmatic label (eg.<nav aria-label=”pagination”>
).The active page is not identified (using
aria-current="page"
) and is, therefore, not announced by screen readers.Instead of having the focusable/actionable pager elements be the anchor or button within each
<li>
element, the focusable elements in the Pagination component are the<li>
elements. This results in the following issues:
- a suboptimal screen reader UX because, when an element is focused, a screen reader will announce “clickable item 2” instead of something more helpful like "page 2 link".
- the focusable element is only actionable via the ENTER key only rather than the SPACE and ENTER keys.
- using UP/DOWN keys has unexpected/undesirable results.
For reference, here is a good example of an accessible pagination component.
Is this library even maintained nowadays?
Certain implementation decisions that were made for the pagination component have resulted in some serious inaccessibility issues. These include:
title
attribute which is sub-optimal.aria-label
is the best attribute to use as it works with more screen readers.nav
element with appropriate programmatic label (eg.<nav aria-label=”pagination”>
).aria-current="page"
) and is, therefore, not announced by screen readers.<li>
element, the focusable elements in the Pagination component are the<li>
elements. This results in the following issues:For reference, here is a good example of an accessible pagination component.