#32053: Accessibility issues with Congrats page for new projects
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: Core | Version: 3.1
(Other) |
Severity: Normal | Keywords: accessibility, ui
Triage Stage: | Has patch: 1
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
Similarly to [https://code.djangoproject.com/ticket/31617 #31617] about
accessibility of the Django admin, there are a lot of small fixes /
improvements that should be done to the accessibility of the "The install
worked successfully! Congratulations!" page for new projects.
I’ve audited it with a suite of tools and screen readers, with
requirements from WCAG 2.1 AA in mind:
- The V.Nu HTML validator
- Axe v3 (via Accessibility Insights)
- VoiceOver in Safari 13 on macOS 10.14
- VoiceOver in Safari 14 on iOS 14
- Manual keyboard testing in latest Chrome, Firefox, Safari on macOS 10.14
Here is the list of issues I identified:
- Missing a `lang` attribute, so screen reader users would potentially
have the page announced in the wrong language.
- It would be better for the page title to directly state what the page
is about, and match the main heading.
- There shouldn’t be an `h2` used for the Django docs link – this isn’t
a section of the page.
- The links in text are only distinguished by their color – this is
problematic for colorblind users, who might not realize there are links.
- The main rocket launch visual should be hidden for screen reader users
- The animation should respect `@media (prefers-reduced-motion: reduce)`
([https://code.djangoproject.com/ticket/32051 #32051])
- The main heading should be a `h1` (the page has no h1 currently)
- The main paragraph text needs to pass color contrast checks
- SVG icons should be hidden for screen reader users.
- SVG icons in links should be set to `focusable="false"` for screen
reader users in IE11
- (It would be nice for all text on the page to pass AAA contrast
requirements, considering it’s such a simple page. Currently, the footer’s
p tags only pass AA).
- For some reason the footer links don’t have a focus outline for me in
Firefox & Safari
- Footer links shouldn’t be using h4 headings
- Text font size and line heights shouldn’t be defined in pixels, so
users can resize text if desired
I also made a recording of the VoiceOver testing for future reference:
https://youtu.be/XB0Ft8tLMFg
--
Ticket URL: <https://code.djangoproject.com/ticket/32053>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/055.798aeb46b0c95cf9cf616d53c0022700%40djangoproject.com.
