Making Wagtail accessible
Work in progress
1
Thibaud Colas, He/Him, @Torchbox��Slides: bit.ly/2Yf2Weo
From the Wagtail 2.6 release notes:
Wagtail now aims for compliance with WCAG 2.1, AA level
Wagtail isn't fully compliant just yet, but we have made many changes to the admin interface to get there. We thank the UK Government (in particular the CMS team at the Department for International Trade), who commissioned many of these improvements.
2
Slides: bit.ly/2Yf2Weo
Why do we care about making Wagtail accessible
For users of assistive technologies, Wagtail’s admin interface is difficult to use (#4199).��For organisations choosing between CMSes, this might make Wagtail a bad option – because of legislation that mandates compliance with accessibility standards.
US: Section 508
UK: Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018
3
Slides: bit.ly/2Yf2Weo
4
More positive reasons to care
We want all Wagtail users to have a great experience, no matter how they use Wagtail.
We want people relying on assistive technology to be successful in the workplace.
We want to provide an inclusive experience.
5
6
And it’s not just Wagtail
Intranet, CRMs, ERPs, dashboards. Django admin.
Internal tools shouldn’t compromise on accessibility just because their audience is smaller.
7
What we* did
8
We* = Beth Menzies, Katie Locke, Thibaud Colas, Helen Chapman, Jordan Bauer, Andreas Bernacca, people who reviewed PRs, people in #accessibility on Slack
Targets: Compliance
WCAG 2.1, AA level
9
Targets: Assistive technology support
NVDA on Windows with Firefox ESR
VoiceOver on macOS with Safari
Windows Magnifier & macOS Zoom
Windows Speech Recognition & macOS Dictation
VoiceOver on iOS, TalkBack on Android�
10
Tooling
Axe – Accessibility rules engine with support for WCAG & Section 508
Accessibility Insights – Browser extension with Axe and more
React Axe – Axe integrated directly in our UI components
Pa11y – Command line tool for accessibility checks with Axe & HTML_CS
11
Tooling
Automated accessibility test suite with 100+ scenarios
Automated visual regression test suite, 87 scenarios (BackstopJS)
GitHub: thibaudcolas/wagtail-tooling
12
Audit: UI overview
13
Audit: results
340 different scenarios identified
190 (ish) scenarios tested
336 issues found by automated testing
A few more issues already identified manually (#4199)
14
Let’s look at the issues
15
16
Live auditing
bakerydemo-thibaudcolas.herokuapp.com/admin/ �Wagtail 2.5.1�User: wagtailspace, pw: threeten
17
What issues can you spot? Focus indicator
Good example: great.gov.uk
18
What issues can you spot? Focus indicator
19
What issues can you spot? Tab stops
Tab stops with Accessibility Insights, Wagtail 2.5.1
Good example: consumerfinance.gov
20
What issues can you spot? Tab stops
21
What issues can you spot? Tab stops
22
What issues can you spot? Color contrast
23
What issues can you spot? Color contrast
24
What issues can you spot? Using a screen reader
VoiceOver on macOS Safari, Wagtail 2.5.1
Backup: youtube.com/watch?v=f98wE4SwGLk
Search “VoiceOver accessibility testing: Wagtail 2.5 demo”
25
What we fixed
26
Many things
27
What’s next
28
A cultural change?
Accessibility should be part of the design & dev workflow for any UI changes, rather than an occasional one-off push
Contributors to Wagtail should have clear information on what to do to make sure they build accessible UIs
29
Work in progress
RFC: Making Wagtail Accessible for users of assistive technologies
Backlog: WCAG2.1 AA compliance project on GitHub
Let’s work on this together this sprint?
30
Thank you!
Let’s work on this together during the sprint?
31
#accessibility on Slack��Slides: bit.ly/2Yf2Weo