Edit

Accessibility wins for Wagtail projects - Wagtail Space US 2020

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:

EU/UK:

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

  1. Images’ Title fields are auto-populated with file names on upload
  2. Wagtail sets alt text based on image Title by default
  3. ????

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.

#5982

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

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

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.

a11ysupport.io / learn

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