Fixed #36366 -- Accessibility improvements to the admin pagination area using aria attributes. #19448
Conversation
9f1e440 to
1f582c2
Compare
|
oh hello |
| {% else %} | ||
| <a role="button" href="?{{ page_var }}={{ i }}" {% if i == action_list.paginator.num_pages %} class="end" {% endif %}>{{ i }}</a> | ||
| <a role="button" href="?{{ page_var }}={{ i }}" aria-label="page {{ i }}" {% if i == action_list.paginator.num_pages %} class="end" {% endif %}>{{ i }}</a> |
There was a problem hiding this comment.
While we are here, could we remove these role="button" from these links?
I know they have been added to remove the underline. But adding this attribute will change the "promise" and the expectations of screen reader users. A button does not (always) activate the same way as a link when using a keyboard; and you don't necessarily expect a complete reload of the page when you activate a button. So here we changed the semantics just for visual purpose.
There was a problem hiding this comment.
This would probably need separate new ticket. Would you be willing to open it, @tut-tuuut
There was a problem hiding this comment.
Previously, I added underlines to links in the main content area.
At that time, I removed the underline from links that didn’t need it by adding role="button".
As you pointed out, I clearly didn’t take accessibility into account.
Since screen reader users will hear it announced as a “button,” it could lead to unexpected behavior.
Moreover, since it's still fundamentally an anchor (a) tag, the spacebar won’t activate it either.
Thank you for pointing that out @tut-tuuut .
| <nav class="paginator" aria-labelledby="pagination"> | ||
| <h2 id="pagination" class="visually-hidden">Pagination</h2> |
There was a problem hiding this comment.
I have one question @tut-tuuut 😃.
Currently, only the word "pagination" is provided as a screen reader.
I'm wondering if it would be better to include the model name before it.
It might be too much information, but at the same time, I’m concerned that when screen reader users navigate to the pagination area, the word "pagination" alone may not clearly indicate which model's pagination it is.
(It's not that they won’t know, but rather that they would have to keep track of which model it refers to.)
There was a problem hiding this comment.
I'm wondering if it's useful with only one pagination per page. (But on the other hand, explicit is better than implicit!)
I'm not sure if it's possible to have several paginations on only one page? I'm trying to make it happen on my test django instance ^^
There was a problem hiding this comment.
Hello @tut-tuuut
In theory, customize the admin page, we can place multiple paginations on a single page, but I think such cases are rare.
Previously, when we improved the accessibility of the search section, we included the module_name in that part.
As you mentioned, I also think that explicit is better than implicit.
cb82fd4 to
3dfdbdf
Compare
|
I have a suggestion. |
…ea using aria attributes
3dfdbdf to
eef8d6f
Compare
| {% if pagination_required %} | ||
| <ul> |
There was a problem hiding this comment.
Sorry for the lag, but yes, very good idea to add the ul/li here :)
There was a problem hiding this comment.
No, it's totally fine, @tut-tuuut! I'm always grateful.
| <nav class="paginator" aria-labelledby="pagination"> | ||
| <h2 id="pagination" class="visually-hidden">{% blocktranslate with name=opts.verbose_name %}Pagination {{ name }} entries{% endblocktranslate %}</h2> |
There was a problem hiding this comment.
Since screen readers allow users to navigate to both the nav tag and the h2 tag in sequence, it seems that the descriptions provided are essentially redundant.
What do you think about removing the h2 tag and providing an aria-label on the nav element instead?
While this would mean giving up the heading semantics(translation), I think it might provide a more natural experience when navigating with a screen reader.
Trac ticket number
ticket-36366
Branch description
Using aria attributes, I added descriptive information for screen readers when accessing the admin pagination area and its elements.
when accessing the pagination area...
when accessing the pagination button...
screen reader user's can identify the currently active page using
aria-current.By adding "Page XX" to the buttons within the pagination, we clarify that they are used to navigate between pages.
Checklist
mainbranch.