Opened 4 years ago

Closed 12 months ago

Last modified 3 days ago

#34041 closed Cleanup/optimization (fixed)

Accessibility improvements for admin breadcrumbs

Reported by: Thibaud Colas Owned by: Antoliny
Component: contrib.admin Version: dev
Severity: Normal Keywords: accessibility, landmarks, ARIA
Cc: Tom Carrick Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description (last modified by Mariusz Felisiak)

There are two nice and simple accessibility improvements we could make to the Django admin’s breadcrumbs:

  1. (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.
  2. 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)
  3. 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 (28)

comment:1 by Mariusz Felisiak, 4 years ago

Triage Stage: Unreviewed → Accepted

comment:2 by Mariusz Felisiak, 4 years ago

Type: New feature → Cleanup/optimization

comment:3 by Florian Perucki, 4 years ago

Owner: changed from nobody to Florian Perucki
Status: new → assigned

comment:5 by Mariusz Felisiak, 4 years ago

Triage Stage: Accepted → Ready for checkin

comment:6 by Mariusz Felisiak <felisiak.mariusz@…>, 4 years ago

In 872b6119:

Refs #34041 -- Added navigation landmark to breadcrumbs in admin.

Thanks Thibaud Colas for pair programming.

comment:7 by Mariusz Felisiak, 4 years ago

Description: modified (diff)
Has patch: unset
Triage Stage: Ready for checkin → Accepted

comment:8 by Mariusz Felisiak, 4 years ago

Owner: Florian Perucki removed
Status: assigned → new

comment:9 by Jerry Wan, 4 years ago

Owner: set to Jerry Wan
Status: new → assigned

comment:10 by Jerry Wan, 4 years ago

Has patch: set

Link to PR: ​https://github.com/django/django/pull/16414

comment:11 by Mariusz Felisiak, 4 years ago

Cc: Tom Carrick added

comment:12 by Mariusz Felisiak, 4 years ago

Patch needs improvement: set

comment:13 by Thibaud Colas, 20 months ago

Patch needs improvement: unset

(​PR waiting for accessibility team review)

Last edited 20 months ago by Thibaud Colas (previous) (diff)

comment:14 by Sarah Boyce, 19 months ago

Patch needs improvement: set

The PR needs to have the existing comments and conflicts resolved, if the accessibility team wants to review, it's still on their review queue board.

comment:15 by Antoliny, 17 months ago

Owner: changed from Jerry Wan to Antoliny

comment:16 by Antoliny, 17 months ago

Patch needs improvement: unset

comment:17 by Antoliny, 17 months ago

Patch needs improvement: set

comment:18 by Antoliny, 17 months ago

Patch needs improvement: unset

comment:19 by Sarah Boyce, 16 months ago

Patch needs improvement: set

comment:20 by Antoliny, 16 months ago

Patch needs improvement: unset

comment:21 by Jacob Walls, 12 months ago

Patch needs improvement: set

Just a question about the necessity of the <a href=""> bit.

comment:22 by Antoliny, 12 months ago

Patch needs improvement: unset

comment:23 by Jacob Walls, 12 months ago

Patch needs improvement: set

Two last teeny edits.

comment:24 by Antoliny, 12 months ago

Patch needs improvement: unset

comment:25 by Jacob Walls, 12 months ago

Triage Stage: Accepted → Ready for checkin

comment:26 by Jacob Walls <jacobtylerwalls@…>, 12 months ago

Resolution: → fixed
Status: assigned → closed

In bc03f106:

Fixed #34041 -- Added aria-current attribute to admin breadcrumbs.

Co-authored by: farita1699 <uwanjerry25@…>

comment:27 by Jacob Walls <jacobtylerwalls@…>, 3 days ago

In 38e2188c:

Fixed #37412, Refs #34041 -- Added backwards incompatible note for admin breadcrumb changes.

comment:28 by Jacob Walls <jacobtylerwalls@…>, 3 days ago

In 6a3b3ca:

[6.1.x] Fixed #37412, Refs #34041 -- Added backwards incompatible note for admin breadcrumb changes.

Backport of 38e2188cde2278131237fd2177b55ded3d515556 from main.

Note: See TracTickets for help on using tickets.
Back to Top