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

[Carlton Gibson]

Hi Thibaud. Thanks for this. Very happy to look at changes here.

One note: at least for the admin, we don't support any version of IE (it's Edge only). If it's just an extra attribute then no problem, but I'd double-check before we add lots of code for IE compat.

[Thibaud Colas]

👍it’s just the one attribute – I’m happy to remove it if you think this isn’t worthwhile. The consequences of _not_ having it are simply that the SVGs become tab-able in IE11, which is annoying but not too big of a deal at the bottom of a page like this.

I can see myself doing similar focused audits (and hopefully fixes too!) following the accessibility discussion on django-developers, so any feedback on the audit format above and how to implement the fixes is appreciated. Hopefully we’ll discuss a more systematic approach to this as part of the accessibility team DEP, but in the meantime I’m keen to tackle the low-hanging fruits.

[Mariusz Felisiak <felisiak.mariusz@…>]

In a1215a32:

Fixed #32053 -- Fixed accessibility issues on the 'Congrats' page.

• Add lang attribute.
• Use the same text for the page’s main heading, and title.
• Add underlines for all links in copy.
• Stop using h2 for link to the Django page.
• Use h1 for the main heading.
• Remove useless type attribute on style element.
• Remove grey text that fails contrast checks.
• Use a shade of grey that passes AAA contrast requirements.
• Stop using h4 for footer links.
• Add full stop in block-level links so VoiceOver correctly pauses between runs of text.
• Hide main artwork for screen reader users.
• Update SVG icons markup to be screen-reader friendly.
• Switch options to be block-level links.
• Remove unused markup.