Accessibility review of Board elections

[thibaudcolas]

Context

We want to properly test our DSF Board elections flow to make sure everyone can make use of the available information and actually go through with voting.

Related: Accessibility review of code.djangoproject.com

Audit requirements

Standards

• WCAG 2.2 AA
• Some AAA-level success criteria where relevant
• Some elements of ATAG 2.0 – for example reviewing whether it’s possible to create accessible content in Trac comments.

Scope

• Candidates listing (from previous elections)
• Ranked Vote official demos
  • Ranked Vote voting form
  • Ranked Vote results page
• Our own demo setup, with 20 candidates registered (a@example.com, b@example.com, c@example.com, etc)
  • Test for 2026 DSF Board elections

Reporting

• Format similar to djangoproject.com accessibility audit, with a single GitHub comment arranged in sections, here ideally
• Accompanying video or screenshots if relevant

Testing methodology

Automated tasks:

• Accessibility Insights

Manual tasks:

• Screenshot-taking & visual review for tab order
• Manual keyboard navigation testing
• Manual 400% zoom testing
• Desktop screen readers: VoiceOver macOS
• Speech recognition: Voice Control
• Windows contrast themes

Audit planning

• Validate requirements & decide on approach
• Confirm availability of relevant stakeholders / auditors
• Audit
• Report
• (Backlog curation)

[caarmen]

Hello! 👋

I tested the rank voting form using VoiceOver on an iPhone, and wasn't able to understand how to drag the movies to order them.

Here's a link to a screen recording of my experience:

• https://github.com/user-attachments/assets/77ae7ba0-0d2c-4ed4-b5d0-4c8a3914a949

The video is mostly black, because I put screen curtain on, to not cheat with my eyes 👀

I'll try to do another screen recording without the screen curtain, as I'm sure the one above isn't super helpful for understanding what's going on 😅 (though I suppose it can provide a glimpse into the user experience 🤷)

---

UPDATE: I was able to reorder items on my second attempt, but it would be helpful to have feedback on the changing position as the item is moving, if possible. Or maybe just at the end of the drag gesture. Some way to know where I've moved the item.

• https://github.com/user-attachments/assets/0c3cf086-2697-4730-8a01-a6600ccfff3c

Now I've seen the video and understand the page a bit better.

Part of my confusion regarding there being two lists could be solved by making "Candidate descriptions" readable. Also, I guess on a real voting form the second list would have some more text for each item, so it would probably be more obvious.

[mihrab34]

Testing candidates listing

Confusing

• section navigation-header appears as heading but not using heading element. see screenshots below

Screenshots

Screen Recording of Automated Task

https://drive.google.com/file/d/1Wol5sVZJGe-HamPZDjyhWytjS1qELvkd/view?usp=sharing

[caarmen]

In the ranked voting form, on a mobile device, if you want to scroll down the page, you have to do the scroll gesture in a limited zone on the screen (left or right edges). Otherwise the gesture will accidentally cause a drag and drop of the list items.

Not blocking, but mildly frustrating if the user only has access to the site from a mobile phone.

• https://github.com/user-attachments/assets/e7e95376-bfc6-4a33-8c80-58a01ea07921

[thibaudcolas]

Thank you both! I have additionally set up Test for 2026 DSF Board elections, with a setup more similar to our real elections. @caarmen are you ok to test the login form for that? The actual voting interface should be the same as the official demo.

@mihrab34 the issue you reported is for all blog / news pages? For this audit it’s really just the candidates listing that is relevant, within the blog post contents. Other site-wide issues of course will get in the way of voters but we can’t really do much about them specifically in the context of elections.

[caarmen]

@caarmen are you ok to test the login form for that? The actual voting interface should be the same as the official demo.

Login form

With VoiceOver and the screen curtain on, on an iPhone, I was able to fill the login form ok.

I did it again without the screen curtain to get a screen recording:

• https://github.com/user-attachments/assets/2e9c44e2-b69c-426b-86e4-611371262de1

Feedbacks:

• Minor (or not at all): the text field for the name says "invalid" before I even started to type (but that may be an explicit choice).
• Minor: The "hints" for the two text fields are each read twice (ex: "Your name your name")
• Minor: after submission, it went to the page with the voting form, but it landed in the middle of the list.

Submit vote

This is a deeper dive into the test I did yesterday (#2 (comment)). But this time, instead of just getting a feel for how the form works, by playing a bit with the movies list, I used the form with candidates A-J, with the goal to sort the list in a specific order and submit the form.

My goal was to rank the candidates in this order:

1-f
2-a
3-i
4-d
5-g
6-h
7-e
8-b
9-j
10-c

I was able to rank the items in this order, and submit a vote too. But the ranking was a bit confusing.

I did it again with the screen curtain off, but still not looking at the screen. But, this allowed me to get a screen recording, to understand what happened, afterwards.

• https://drive.google.com/file/d/1MgQpWJAQM4nA_SnjeVIv7tZmCEwkO5NT/view?usp=drive_link

Major: Sometimes the navigation skips multiple items, and the user (me anyway 😅 ) thinks that these items were totally removed.

Basically, after each drag n drop to change the position of one item, I had to go to the top of the list to understand the new order.

Thanks for your vote

Minor: I arrived on this screen at the bottom, and had to swipe left left left to go up to the top of the screen;

Vote results

Not much to say as there weren't enough votes yet to have results.

[caarmen]

Regarding the candidates list:

I noted some feedbacks of the candidate list in this document, before I knew of the existence of this Github issue :)