Opened 7 months ago

Last modified 4 days ago

#36509 assigned Bug

Missing label on input fields in tables

Reported by: Sander Claus Owned by: jaffar Khan
Component: contrib.admin Version: 5.2
Severity: Normal Keywords: accessibility, changelist, ux, wcag
Cc: Thibaud Colas, Antoliny Triage Stage: Accepted
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description (last modified by Thibaud Colas)

Editable fields in the tables are missing a label for users using assisting technologies like screen readers.

Example: the dropdown in the Type column and date selection field in the Release Date column.
​https://django-admin-tests.netlify.app/django_admin_tests/latest/english/admin/demo/release/

The columns have a title on top, but this is not associated with the individual field elements.

Axe has flagged this as an accessibility issue related to the ​select-name rule.

This seems to be a failure of ​WCAG SC 4.1.2 Name, Role, Value

Change History (9)

comment:1 by Thibaud Colas, 7 months ago

Cc: Thibaud Colas added
Component: Uncategorized → contrib.admin
Description: modified (diff)
Keywords: accessibility changelist ux wcag added
Triage Stage: Unreviewed → Accepted

Thank you, I believe this hasn’t been reported before. Not sure what the fix looks like with Django’s admin implementation but in HTML that’s most likely an extra aria-labelledby or aria-label for those elements.

comment:2 by Sander Claus, 7 months ago

Owner: set to Sander Claus
Status: new → assigned

comment:3 by Antoliny, 7 months ago

Cc: Antoliny added

comment:4 by Sander Claus, 7 months ago

Has patch: set

​PR created

comment:5 by Sarah Boyce, 6 months ago

Patch needs improvement: set

comment:6 by jaffar Khan, 11 days ago

Owner: changed from Sander Claus to jaffar Khan

I’ve been working on this ticket and implemented a prototype to address missing labels on inputs in admin changelist tables.
My approach is:
Added an id attribute to each table header (id is header field name).
Added an id to each row header using the object PK.
Updated items_for_results() to render form widgets with aria-labelledby, referencing both the row header and column header IDs.
It will work for all editable fields.

comment:7 by jaffar Khan, 11 days ago

​https://github.com/django/django/pull/20577

Last edited 8 days ago by jaffar Khan (previous) (diff)

comment:8 by jaffar Khan, 8 days ago

Patch needs improvement: unset

in reply to:  7 comment:9 by jaffar Khan, 5 days ago

Replying to jaffar Khan:

​https://github.com/django/django/pull/20595

Version 0, edited 5 days ago by jaffar Khan (next)
Note: See TracTickets for help on using tickets.
Back to Top