Accessible Voting Ballots

In 2020, mail-in voting experienced a huge surge in popularity as Americans were looking for a way to perform their civic duty while still being COVID-safe.

Problem: Mail-in voting prevents many disabled voters from voting independently and privately, as it requires paper ballots.

Solution: To address this problem, IVS (a company that makes accessible voting systems) developed a web-based system that allows voters with disabilities to fill out their own ballots at home. Once their choices are made, they can either email in the PDF for absentee voting or take their device to a polling location, which will be equipped to produce a paper ballot, filled out with their choices, that is then turned in with those of other in-person voters.

Impact: I used HTML, CSS, and JavaScript to create the template ballot for this system, which will be used in Maine and Connecticut.

My challenge was to create an online ballot that complies with standard appearances, is screen reader compatible and otherwise accessible, and allows for flexibility in the number of races, type of races (e.g. plurality or ranked-choice), and number of candidates in each race.

I used HTML and CSS to create the ballot template and then JavaScript (with jQuery) to allow easy generation of ballots with the appropriate races and candidates for different elections. I also learned about accessibility best practices and screen readers to ensure the ballot is accessible.

First, I needed to understand the two voting systems for which I was creating ballots: plurality (or winner-take-all) and ranked-choice.

Plurality voting is the voting system that most Americans are most familiar with, as it is what a majority of states and the federal government uses. It allows for each voter to vote for only their top-choice candidate(s) and the candidate(s) with the most votes wins that office, regardless of if they received a majority of votes. A voter only chooses multiple candidates if that office has multiple seats, such as a city council.

Ranked-choice voting is when voters rank the candidates in order of preference, and a series of tallies are conducted as the candidate with fewest first-choice votes is eliminated and those ballots’ counts are redistributed to their second-choice. A candidate eventually wins once enough candidates have been eliminated so that one candidate receives a majority of first-choice votes. It is used in some states, such as Maine.

Winner-take-all ballots are simpler than ranked-choice, so I started there. I used HTML and CSS to build a simple template. I wanted it to look as similar to the reference ballot that I was using as I could, so as not to confuse or disorient voters. Therefore, I only made visual changes if it would help with accessibility.

Ranked-choice ballots are more complex and what I spent a majority of the project working on. They require tables with a potentially very large number of cells. In order to use this template over the course of many elections with different races and numbers of candidates, I needed to create JavaScript functions that would generate ballots with the correct number of tables (one per race) and the correct number of rows and columns in each. Because there may be a variety of table sizes in one ballot, I also had to ensure there was defined CSS for all of them (different column widths, font sizes, etc.) and that they were responsive across different devices, including a laptop and phone.

Because paper ballots used for mail-in voting are not accessible to all voters, we had to ensure that these web-based ballots would be. To do so, I did a few weeks of research on web accessibility guidelines and then made sure the ballots:

> are tabbable for keyboard users
> are screen reader compatible
> include skip links for longer ballots (so that users don’t have to tab through races they don’t plan to vote in)

I also discussed incorporating gestures for touchscreen devices with my boss.