Improve pagination template accessibility with aria attributes and re… #9905
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,21 @@ | ||
| <ul class="pager"> | ||
| {% if previous_url %} | ||
| <li class="previous"> | ||
| <a href="{{ previous_url }}" rel="prev" aria-label="Previous page">« Previous</a> | ||
| </li> | ||
| {% else %} | ||
| <li class="previous disabled" aria-disabled="true"> | ||
| <a href="#" tabindex="-1" aria-disabled="true">« Previous</a> | ||
|
Comment on lines
+7
to
+8
There was a problem hiding this comment. In the disabled state this link still has href="#", so it remains clickable for mouse/touch users even though it is marked aria-disabled and removed from the tab order. To avoid a mismatch between semantics and behavior (and prevent jumping to the top of the page), consider rendering a non-link element (e.g., span) or removing the href when disabled.
Member
There was a problem hiding this comment. Would be nice to review how this one looks at the moment and how it would look/behave with the suggestion. |
||
| </li> | ||
| {% endif %} | ||
|
|
||
| {% if next_url %} | ||
| <li class="next"> | ||
| <a href="{{ next_url }}" rel="next" aria-label="Next page">Next »</a> | ||
browniebroke marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </li> | ||
| {% else %} | ||
| <li class="next disabled" aria-disabled="true"> | ||
| <a href="#" tabindex="-1" aria-disabled="true">Next »</a> | ||
|
Comment on lines
+17
to
+18
There was a problem hiding this comment. In the disabled state this link still has href="#", so it remains clickable for mouse/touch users even though it is marked aria-disabled and removed from the tab order. To avoid a mismatch between semantics and behavior (and prevent jumping to the top of the page), consider rendering a non-link element (e.g., span) or removing the href when disabled. |
||
| </li> | ||
| {% endif %} | ||
| </ul> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The new aria-label value ("Previous page") is inconsistent with the existing pagination template (numbers.html uses aria-label="Previous"). Consider using the same label across pagination templates (and reusing the existing visible wording) to keep screen reader output consistent.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In
numbers.html, I think it's listing all pages number so "Previous" and "Next" are probably enough, but here I think "Previous page" is clearer, and more explicit.