id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
32053	Accessibility issues with Congrats page for new projects	Thibaud Colas	Thibaud Colas	"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 3.5 (via Accessibility Insights)
- Color blind variant 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
- Manual zoom testing in Chrome, with browser-level zoom from 100% to 400%
- Manual zoom testing in Chrome, with font size increase to Very Large

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"	Bug	closed	Core (Other)	3.1	Normal	fixed	accessibility, ui		Ready for checkin	1	0	0	0	0	1