#32053: Accessibility issues with Congrats page for new projects
-----------------------------------+--------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: Core (Other) | Version: 3.1
Severity: Normal | Resolution:
Keywords: accessibility, ui | Triage Stage: Unreviewed
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-----------------------------------+--------------------------------------
Description changed by Thibaud Colas:
Old description:
> 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
New description:
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
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:1>
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/070.4b4d60079a1323c3a2dffc86e9699322%40djangoproject.com.
