Accessibility issues with Congrats page for new projects

[Thibaud Colas]

Similarly to #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) (#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