1 of 45

Accessibility wins�for Django projects

1

Thibaud Colas, he/him, @Torchbox��Slides: thib.me/django-wins

2 of 45

A Wagtail story

2

Slides: thib.me/django-wins

3 of 45

3

4 of 45

Why do we care about making Wagtail accessible

​

�We want to provide an inclusive experience.

We want people relying on assistive technology to be successful in the workplace.�

Accessibility improvements lead to usability improvements.

4

Search: “Curb cut effect”

5 of 45

Other reasons to make Wagtail accessible

�For users of assistive technology, Wagtail’s admin interface is difficult to use.��When choosing a CMS, this might make Wagtail a bad option – because of legislation that mandates compliance with accessibility standards.�

US: Section 508 for public sector, ADA for all

EU: 2016 Accessibility Directive, 2019 European Accessibility Act

5

6 of 45

Oh, and it’s not just Wagtail

Intranets, CRMs, ERPs, dashboards. Django admin.

​

Internal tools shouldn’t compromise on accessibility just because their audience is smaller.

​

6

alistapart.com/article/building-the-woke-web

7 of 45

EU legislation overview

23/09/2020: all public sector must comply with 2016 directive

23/06/2021: all public sector mobile apps

2025: e-commerce, banking, transport services – must comply with 2019 act

All based on WCAG 2.1, AA level

7

8 of 45

8

Credit: Yomex Owo @ Unsplash

9 of 45

Common* issues

​

​

​

​

​

​

* Very common. Go check your sites after the talk

9

10 of 45

10

11 of 45

Alt text for images

11

12 of 45

Alt text for images

12

13 of 45

Alt text for images

  • Have a mandatory alt text field for images that aren’t decorative
  • Use it in the template

​

​

Solution: “alt text” field wherever a non-decorative image is used in your models

13

No-nonsense alt text guide: axesslab.com/alt-texts

14 of 45

Alt text for images

14

15 of 45

Videos

15

16 of 45

Videos

16

17 of 45

Videos

  • Provide captions for any spoken content in the video
  • Provide a transcript for spoken content and any written material in the video

Or…

  • Use YouTube or equivalent
  • Make sure embed iframes have a title attribute

17

18 of 45

Videos

18

19 of 45

Heading levels

Screen reader users rely on logical, lean heading outlines to navigate pages

  • Only one h1 per page
  • Don’t skip heading levels (no h3 without a preceding h2)
  • Only use headings for the structure of the page, not because the designs use large text

​

19

20 of 45

Heading levels in Wagtail

body = RichTextField(features=['h2', 'h3', 'bold', 'italic', 'link'])

​

20

21 of 45

Heading levels troubleshooting

21

Bookmarklet: h123

22 of 45

Forms

Avoid as_table or as_ul

  • Use tables for tabular data only, not layout
  • Use lists for text

Vanilla HTML from Django is missing a lot of basic usability cues – indicating required fields, showing expected patterns for date/time fields, etc.

22

23 of 45

23

24 of 45

Developer wins

​

​

​

​

​

​

torchbox.com / blog / Accessibility audits: getting started

24

25 of 45

25

26 of 45

Training

​

a11yproject.com

​

accessibility-developer-guide.com

26

27 of 45

Tooling

Axe – Accessibility rules engine with support for WCAG & Section 508

Accessibility Insights – Browser extension with Axe and more

Pa11y – Command line tool for accessibility checks with Axe & HTML_CS

​

eslint-plugin-jsx-a11y, eslint-plugin-vue-a11y, stylelint-a11y

​

​

​

27

Pa11y example: github.com / thibaudcolas / django_admin_tests

28 of 45

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

No “p” element in scope but a “p” end tag seen.

End tag “div” seen, but there were open elements.

Unclosed element “section”.

Consider using the “h1” element as a top-level heading only.

​

28

29 of 45

30 of 45

31 of 45

32 of 45

33 of 45

34 of 45

35 of 45

pip install django-pattern-library

35

36 of 45

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. Equally as simple (but different) on Windows with NVDA.

a11ysupport.io / learn

36

37 of 45

Community wins

37

38 of 45

A cultural shift?

38

39 of 45

Django developers have a role to play

​

It matters on all projects, all audiences

There are well-defined standards, and readily available tools.

​

​

​

​

​

​

39

alistapart.com/article/building-the-woke-web

40 of 45

Django as a framework has a role to play

​

​

​

​

​

The WebAIM Million keeps track of the accessibility of 1M websites’ homepages

  • Numbers are appalling
  • We can do better

​

In 2020, there is no reason for a site to launch with accessibility issues that can be found in two clicks with automated tools.

​

40

41 of 45

41

django/deps#69

42 of 45

An accessible future for Django?

  • WCAG 2.1 AA compliant Django admin
  • WCAG 2.1 AA compliant djangoproject.com
  • Built-in Django features (forms, etc) accessible by default
  • Official documentation about accessibility, common gotchas
  • Review of major third-party packages
  • Review of major third-party project templates

What do you think?

42

43 of 45

43

django/deps#69

44 of 45

Thank you!

Let’s work on this together some time?

44

Image credits: Firefox Emoji, Django pixel heart

Thank you to William Blackie for his help reviewing this talk��Slides: thib.me/django-wins

45 of 45

Questions

Django DEP: https://github.com/django/deps/pull/69

Accessibility beyond screen readers:

45