[Django] #32053: Accessibility issues with Congrats page for new projects
Django
-------------------------------------+-------------------------------------
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.
Django
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:
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
--
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:1>
Django
Reporter: Thibaud Colas | Owner: nobody
Component: Core (Other) | Version: 3.1
Severity: Normal | Resolution:
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by Carlton Gibson):
* stage: Unreviewed => Accepted
Comment:
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:2>
Django
Reporter: Thibaud Colas | Owner: nobody
Component: Core (Other) | Version: 3.1
Severity: Normal | Resolution:
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Comment (by 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:3>
Django
Reporter: Thibaud Colas | Owner: nayan10102
Type: Bug | Status: assigned
Component: Core (Other) | Version: 3.1
Severity: Normal | Resolution:
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
Changes (by nayan10102):
* owner: nobody => nayan10102
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:4>
Django
-------------------------------------+-------------------------------------
| Colas
Type: Bug | Status: assigned
Component: Core (Other) | Version: 3.1
Severity: Normal | Resolution:
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nayan10102 => Thibaud Colas
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:5>
Django
-------------------------------------+-------------------------------------
| Colas
Type: Bug | Status: assigned
Component: Core (Other) | Version: 3.1
Severity: Normal | Resolution:
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:6>
Django
-------------------------------------+-------------------------------------
| Colas
Component: Core (Other) | Version: 3.1
Keywords: accessibility, ui | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"a1215a3237ff53941d606fc54d926495e454c2d9" a1215a32]:
{{{
#!CommitTicketReference repository=""
revision="a1215a3237ff53941d606fc54d926495e454c2d9"
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.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/32053#comment:7>