Accessibility improvements for admin breadcrumbs
There are two nice and simple accessibility improvements we could make to the Django admin’s breadcrumbs:
- (fixed in 872b61193b013a700ff88cf50f0eb2cf2c266ff7) Wrap them in a
<nav aria-label="{% translate 'Breadcrumbs' %}>"> region, so they can be identified as a navigation landmark by screen reader users.
- Structure the links as a
<ol> list with <li> items for each crumb, so screen reader users know how many items there are (visually they don’t need any changes)
- Switch the last item to also be a link, with a
aria-current="page" attribute, so semantically the last item is marked as "current page" (again doesn’t necessarily need any visual change). Technically this would also work as a span but I believe switching to a link would be a nicer experience (consistent tabbing through all items in the breadcrumb)
All three improvements are based on the Breadcrumb ARIA authoring practices pattern. All can technically be done separately if desired.
Change History
(12)
| Triage Stage: |
Unreviewed → Accepted
|
| Type: |
New feature → Cleanup/optimization
|
| Owner: |
changed from nobody to Florian Perucki
|
| Status: |
new → assigned
|
| Triage Stage: |
Accepted → Ready for checkin
|
| Description: |
modified (diff)
|
| Has patch: |
unset
|
| Triage Stage: |
Ready for checkin → Accepted
|
| Owner: |
Florian Perucki removed
|
| Status: |
assigned → new
|
| Owner: |
set to Jerry Wan
|
| Status: |
new → assigned
|
| Patch needs improvement: |
set
|
PR: https://github.com/django/django/pull/16106