Edit

DjangoCon Europe 2023 – Accessibility review of djangoproject.com

Here are the results of a quick accessibility audit I did for the Django project website, as part of the DjangoCon Europe 2023 sprints.

I recorded myself going through this and put it up on YouTube, so we have a demo for each of the issues: djangoproject.com accessibility testing - DjangoCon Europe 2023. I’ve also reported the issues in the project’s GitHub repository: Accessibility issues with site design and implementation #1381.

Overview

TL;DW; There are pretty fundamental issues, that aren’t always blockers but would require widespread changes to address: keyboard support, color contrast, use of headings. My recommended highest-priority changes are:

  1. A new top-level navigation, including keyboard support fixes.
  2. Changes to the main content layout for easier navigation to important links.
  3. A new color palette with more legible text.

Issues

Here is a detailed list of issues I spotted, split into the categories I normally use, with links to my testing video’s timestamps, WCAG success criteria, and existing GitHub issues where appropriate.

Blockers

Blocker: Critical issue. Certain users cannot perceive or operate this, with no workaround available.

  • The “hamburger” menu toggle is impossible to use with a keyboard. This makes it impossible for keyboard and screen reader users to access menu items and navigate the site in this way. (Menu button is not a button #1234, 18:18, SC 2.1.1 Keyboard).
  • The page’s second column content is hidden in print stylesheets. This makes it impossible for users of magnifiers to access this content (22:00).

Major

Major: Certain users are very likely to have difficulty perceiving or operating this.

  • Heading level 1 should be used for the title of the page / visually most prominent heading, ideally not for invisible content (“Django” on homepage). Ideally each page would only have a single h1. (07:04, SC 1.3.1 Info and Relationships).

Confusing

Confusing: Understanding or operating this may be difficult for some users.

Minor

Minor: Degraded user experience for some users. This slows down use of the application.

  • Missing skip link (00:42, SC 2.4.1 Bypass Blocks).
  • Custom “dotted outline” focus styles: not visible enough and broken in main navigation (01:02, SC 2.4.13 Focus Appearance).
  • The two-column layout as implemented means reaching the second column content with the keyboard requires going through the entire first column (02:58, see also #494).
  • The sidebar heading hierarchy makes it hard to understand the content structure (07:04).
  • Keep uppercase text to a minimum. Can be problematic to read for some people, shouty, leads to pronounciation issues with screen readers (15:40).
  • Avoid interactive elements going right up to the edge of the screen on smaller viewports (“Get started with Django” button), as it makes it hard for touch users to touch-scroll past those elements (17:30).
  • For forced colors mode compatibility, show the regions of the page with borders since backgrounds are removed (19:40).
  • For forced colors mode compatibility, show the outline of buttons with borders since backgrounds are removed (19:40).
  • Form fields should remain visible in print stylesheets so the page content is understandable (22:20).

Best practices

Best practices: These are not accessibility issues, but are recommended for ensuring the best user experience.

  • The theme toggle’s icon should resize according to browser font size changes (15:20).
  • Footer logos should also ideally resize according to browser font size changes (15:20).
  • Hide the theme toggle in print styles (21:05).
  • Have link URLs visible in print styles (21:05).
  • Hide footer content in print styles (21:05).

Methodology

In the interest of time, I only reviewed the site with a suite of automated and semi-automated checks available in Google Chrome:

Though those tests will find a lot of common issues, normally accessibility testing would include navigating the site with assistive technologies (screen readers, speech recognition, screen magnification, etc).

Video timestamps