Best Practices for Making a Wagtail Site as Accessible as Possible
summary
Wagtail adds an on‑page accessibility checker in Wagtail 4.2 driven by the axe engine from DQ systems, and it’s configurable to show developer‑level errors. Concrete fixes demonstrated include changing a div to a semantic header to restore the banner landmark, enforcing heading hierarchy via StreamField clean() validation, adding a per‑use alt field in a custom image block, and emitting ARA label attributes for repetitive links so screen readers hear “Download 2023 annual report,” not just “Download.”
AI-written summary · about
chapters (9)
- 0:00Wagtail accessibility intro
- 4:38Wagtail’s accessibility tools
- 8:30Semantic markup in templates
- 12:50Configuring accessibility checker
- 13:08Proper heading hierarchy
- 23:15Alt text for images
- 29:35ARIA labels for links
- 36:27Help text for editors
- 39:37Summary and resources
related talks
02h 54mHow To Build More Accessible Websites with Wagtail
28mDjango Accessibility for Everyone
06mBreaking barriers
01h 03mAccessibility: Making your websites more inclusive
23mWeb Accessibility In Django
48mAccessibility awareness
01h 05mAccessibility Testing 101
15mMy Site Is Already Online — How Do I Make It Accessible?