Edit

PyCon US 2024 poster: Building accessible websites with Wagtail and Django

With Vince Salvino, we ran a poster session at PyCon US 2024.

Our poster

By Vince Salvino - CodeRed, and Thibaud Colas - Torchbox – both representing Wagtail.

Vince, Scott, and Meagen in front of the poster at the conference

All of the data for the charts is available here: PyCon US 2024 | Wagtail accessibility statistics

Try Wagtail

```bash pip install wagtail wagtail start mysite cd mysite pip install -r requirements.txt python manage.py migrate python manage.py createsuperuser python manage.py runserver -> http://localhost:8000/ Quit the server with CTRL-C. ``` ### Accessibility laws (USA & world) Source: [W3C Web Accessibility Laws & Policies](https://www.w3.org/WAI/policies/). Refined data: [PyCon US 2024 \| Poster - Accessibility policy](https://docs.google.com/spreadsheets/d/1RajyVWKlCFlcZg_kYSLNhE8I26hE7ZWRfhga_QvZC4Y/edit?gid=1304246423#gid=1304246423) #### USA states with accessibility laws ![USA states with accessibility laws](/images/blog/pycon-us-2024-poster-accessible-websites/USA%20states%20with%20accessibility%20laws.png) #### World countries with accessibility laws ![World countries with accessibility laws](/images/blog/pycon-us-2024-poster-accessible-websites/World%20countries%20with%20accessibility%20laws.png) ### The Zen of Wagtail See in the developer docs: [The Zen of Wagtail](https://docs.wagtail.org/en/stable/getting_started/the_zen_of_wagtail.html). TL;DR: - Wagtail is not an instant website in a box. - Always wear the right hat. - A CMS should get information out of an editor’s head and into a database, as efficiently and directly as possible. - The best user interface for a programmer is usually a programming language. ### Website accessibility scores in the Python web ![Website accessibility scores in the Python ecosystem](/images/blog/pycon-us-2024-poster-accessible-websites/Website%20accessibility%20scores%20in%20the%20Python%20ecosystem.png) This shows the mean accessibility score of Wagtail sites over time, compared to other Python technologies. Wagtail sites are consistently doing better – but only just (84 in April 2024, 85 in April 2023 – still above the 81 average for Django sites). ### Accessibility in the CMS #### Wagtail accessibility checker ![Wagtail accessibility checker screenshot](/images/blog/pycon-us-2024-poster-accessible-websites/Wagtail%20accessibility%20checker%20screenshot.png) #### Accessibility checks built into Wagtail See the [built-in accessibility checker](https://docs.wagtail.org/en/stable/advanced_topics/accessibility_considerations.html#built-in-accessibility-checker) documentation. ![Accessibility checks built into Wagtail](/images/blog/pycon-us-2024-poster-accessible-websites/Accessibility%20checks%20built%20into%20Wagtail.png) - **button-name**: 70% of Wagtail sites pass this, compared to 65% in 2023. A button element on the page is lacking a label. This is entirely detectable with automated tests such as those featured in our [built-in accessibility checker](https://wagtail.org/blog/introducing-wagtails-new-accessibility-checker/), built on Axe. - **link-name**: 42% passing (38% in 2023). Just like button-name, one of the page’s links is missing its title. - **heading-order**: 51% passing (50% in 2023). Some heading levels are getting skipped on the page – always have a main heading (h1) followed by subheadings (h2, h3, etc.). - **frame-title**: 55% of sites passing (50% in 2023). A frame (such as an embedded video) is missing its title. Again entirely detectable with automated tests – and very simple to fix once identified! ### Accessibility improvements #### Wagtail sites with no accessibility issues ![Wagtail sites with no accessibility issues](/images/blog/pycon-us-2024-poster-accessible-websites/Wagtail%20sites%20with%20no%20accessibility%20issues.png) In 2024, we found 4.77% of Wagtail sites had no issues detected, compared to 4.44% in 2023 and 3.83% in 2022. Those numbers are above industry averages but nowhere near our ambitions. #### Distribution of alt text scores ![Distribution of alt text scores](/images/blog/pycon-us-2024-poster-accessible-websites/Distribution%20of%20alt%20text%20scores.png) The Wagtail accessibility team found AI to be very promising for alt text, with consistently better quality than Wagtail sites are achieving currently. The team compared the alt text of real-world Wagtail images, with results generated by GPT-4 Vision. For 89% of images, the AI alt text was better than average; compared to 43% for the existing alt text. ## Our pitch Shared for future reference. See the [PyCon US 2024 poster sessions list](https://us.pycon.org/2024/schedule/posters/list/). --- An astonishing 96.3% of websites have accessibility issues. While often times "accessibility" is viewed as a bolt-on fix for users with disabilities - good accessibility makes the site easier to use for everyone, and can have serious benefits for sales, marketing, and customer experience. [Wagtail](https://wagtail.org/) is an open source content management system built with Python and Django. In recent years, Wagtail has made huge investments in accessibility. In this poster, we will show some of the background research, major accessibility improvements in Wagtail, and how to leverage these capabilities in Wagtail to improve your own website's accessibility. Our poster will cover how to get started with the CMS, and a suite of common accessibility considerations, including: - [Built-in automated accessibility checks](https://us.pycon.org/2024/schedule/posters/list/) (and how to do this even without using Wagtail) - Alt text – why it matters, how to do it well, opportunities to use generative AI - Tools from the Python ecosystem to help with accessibility