I recently gave a talk at Wagtail Space US 2020 about the accessibility of Wagtail websites – following on last year’s talk about the accessibility of the Wagtail admin.
Slides: Wagtail Space US 2020 - Accessibility wins for Wagtail projects
Why accessibility matters
Inclusive experiences
- We want all users to have a great experience, no matter how they use the web.
- Accessibility improvements lead to usability improvements for all.
Search: “Curb cut effect”
Accessibility is not an optional extra
USA:
- Section 508 for recipients of federal funding, ADA for all*.
EU/UK:
- EU Directive 2016/2102 for the public sector, UK Equality Act 2010 for all.
In the end it’s all based on WCAG 2.1 AA.
* I’m not a lawyer. See Gimlet Media lawsuit
Oh and it’s not just about Wagtail sites
Intranets, CRMs, ERPs, dashboards. Django admin.
Internal-only tools shouldn’t compromise on accessibility just because their audience is smaller.
alistapart.com/article/building-the-woke-web
Common* Wagtail issues
* Very common. Go check your sites after the talk
Alt text for images
- Images’ Title fields are auto-populated with file names on upload
- Wagtail sets alt text based on image Title by default
- ????
Solution: always have an “alt text” field wherever an image is used.
RFC #51, #4945, RFC #44, #5789
Alt text for images, #2
- Have a mandatory alt text field when images aren’t decorative…
- Display it
Solution: always have an “alt text” field wherever an image is used.
RFC #51, #4945, RFC #44, #5789
Alt text for images, #3
- Always have an alt text field for each usage of an image
- Make sure the field is optional when appropriate so decorative images can be hidden
- Give appropriate guidance to editors, axesslab.com/alt-texts
- Wagtail’s rich text images alt text needs to become optional
Solution: always have an “alt text” field wherever an image is used.
RFC #51, #4945, RFC #44, #5789
Embed titles
- In some cases, Wagtail embeds don’t have a title attribute set
- Screen reader users need it to know what the embed is, and decide to browse it, or skip it
Solution: either check your embed provider returns a title in 100% of the cases, or add a mandatory “Title” field for all embeds.
Heading levels
Screen reader users rely on logical, lean heading outlines to navigate pages
- Wagtail makes it easy to restrict which heading levels are available in any rich text field. Do it.
- Also restrict which heading levels are available via StreamField
- Keep your templates in check too.
Solution: Limiting features in a rich text field. Use wagtail-accessibility.
Heading levels, #2
Heading levels
Screen reader users rely on logical, lean heading outlines to navigate pages
- Validate that no heading is left empty
- Or, consider hiding empty headings with CSS (h2:empty { display: none; })
Solution: Limiting features in a rich text field. Use wagtail-accessibility.
In the future – rich text rewriting to remove empty headings? #4223
Other issues worth knowing about
- TableBlock
- The Caption field should be mandatory
- The header cells field should be mandatory (#5989)
- Links
- We need a way to flag / validate link text to avoid “Read more”, “Click here”, “Find out more”
- Or having a way to add custom aria-label where relevant
- Broken links should be user-friendly, not href=”None”.
- Forms
- Avoid Django’s as_table, as_ul rendering.
Content wins
- wagtail-accessibility (based on tota11y)
- help_text (example: wagtail-nhsuk-frontend)
- HelpPanel – help_text but bigger
- wagtail-readinglevel
- Rich text experiments: guidelines-aware spellcheck
- Rich text experiments: sentence length, wooorm.com/readability
Developer wins
Accessibility audits: getting started
django-html-validator
Based on the official v.Nu validator. Very easy to integrate into your workflow with Docker.
-
Finds about 15% of issues
-
v.Nu also has a CLI which I recommend as part of accessibility audits
Static analysis
- React: eslint-plugin-jsx-a11y
- Vue: eslint-plugin-vue-a11y
- Styles: stylelint-a11y
Curlylint
Learn how to use a screen reader
On a Mac with VoiceOver,
- Cmd + F5 to open VoiceOver. Same to close it.
- Ctrl to silence it
- Ctrl + U to open the rotor
That’s it.
Even simpler on iOS.
Community wins
A cultural shift?
You can be the person on your team who advocates for those issues to be fixed
It matters on all projects, all audiences
There are well-defined standards, and readily available tools.
You can be the person who knows how to use a screen reader and shows others how to do it.
alistapart.com/article/building-the-woke-web
Wagtail can be a CMS that’s part of the solution
The WebAIM Million keeps track of the accessibility of 1M websites’ homepages
- Numbers are appalling
- We can do better
- Wagtail can help people make accessible websites – better defaults, starter templates, documentation
Accessibility team 🌈
The accessibility team focuses on improvements to the accessibility of Wagtail, and of websites built with Wagtail. Everyone is welcome regardless of skill level or background.
Find us on the Wagtail Slack in #accessibility