Opened 4 months ago

Closed 3 months ago

#35143 closed Cleanup/optimization (fixed)

Improve accessibility of error page(s) with semantic HTML

Reported by: Marijke Luttekes Owned by: Marijke Luttekes
Component: Error reporting Version: 5.0
Severity: Normal Keywords: accessibility, HTML
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: no

Description

The HTTP error pages available in Django debug mode could benefit from improved semantics.

The following changes should be simple, without altering the look and feel of the page:

  1. The page should have a header, main, and footer.
  2. Each table should have scope attributes on th elements.
  3. Monospaced text in the patterns list should use a code element.
  4. The small text within the h1 should use a small element instead of a span.

Discussed with accessibility team member Thibaud Colas, who made this example page for the HTTP 404 error:
​https://static-django-demo.netlify.app/django_admin_tests/v5.1/english/defaults/404/

Change History (6)

comment:1 by Mariusz Felisiak, 4 months ago

Component: contrib.admin → Error reporting
Triage Stage: Unreviewed → Accepted

Agreed. Accessibility improvements are always welcome.

comment:2 by Marijke Luttekes, 4 months ago

Owner: changed from nobody to Marijke Luttekes
Status: new → assigned

I will pick this up, as discussed with Thibaud earlier!

comment:3 by Marijke Luttekes, 3 months ago

Has patch: set

comment:4 by Mariusz Felisiak, 3 months ago

Patch needs improvement: set

comment:5 by Mariusz Felisiak, 3 months ago

Patch needs improvement: unset
Triage Stage: Accepted → Ready for checkin

comment:6 by Mariusz Felisiak <felisiak.mariusz@…>, 3 months ago

Resolution: → fixed
Status: assigned → closed

In b9e2a3fc:

Fixed #35143 -- Improved accessibility of 404/500 debug pages.

This:

  • changes the header, main, and footer content areas to be rendered in a <header>, <main>, and <footer> tags,
  • adds scope attributes to <th>,
  • uses <code> for a patterns list,
  • uses <small> instead of <span>.
Note: See TracTickets for help on using tickets.
Back to Top