Creating civic engagement tools that include all voters

html code

When we started working on the Election Toolkit, we knew we wanted it to be helpful for all election officials, no matter what their technical skills or budget. We also wanted it to be accessible to everyone, including people with disabilities. It’s the right thing to do, of course. It is also a requirement for the election departments who will use the tools in the toolkit.

We learned that making civic engagement tools that work for everyone starts with this website, but it doesn’t end there.

Making the site accessible

At first, we focused on making sure that works for everyone. We wanted to get beyond thinking about accessibility as just a checklist or an afterthought.

That work started by making the site responsive, so it can easily adapt to different size screens. The same coding techniques that support responsive design also support the flexibility needed for good accessibility.

We also made sure the site works without a mouse — because so many kinds of technology to support people with disabilities rely on emulating a keyboard or using the keyboard navigation built into HTML.

Then we paid special attention to how the site works for people without vision. The easy part was adding short descriptions for every image and making sure that all the visual cues were echoed in audio cues. For example, each of the tools has sections for Getting Started and Using the Tool. Adding an audio message (using a coding technique called ARIA) made sure that users who can’t see the change in the section heading will know whether it’s open or closed.

Making content created with the tools accessible

Making the site accessible was an important first goal for us, but we quickly realized that was just the beginning. We had to make content that would reflect our accessibility goals, too.

The Election Toolkit helps election officials reach out and encourage people to vote. Their civic engagement efforts welcome all voters. So, throughout the tools, we’ve added information about how to make public outreach and information materials accessible. A few examples:

  • Tips on designing infographics or presenting data in both visual and text form
  • How to use the new Twitter feature to add a description to any image you tweet
  • Suggested alternative text for the civic icons and images
  • Links to information about captions and audio descriptions for videos
  • Writing content in plain language for your website

Finding accessible tools

The more we thought about accessibility, the more obvious it became that the next step was to find accessible tools. This is still a work in progress, but this goal is helped by updates to many of the great free tools out there. Google Docs, for example, has made great strides recently.

In the future

With the help of the team at JSutton Media and developer Milenko Subotic, we think we’ve reached a good accessible user experience for the site. If you’re curious about the details, you can read more in our accessibility statement.

In the future, we will continue to add tips about how to make all of your civic engagement outreach work for all voters. And, we’ll keep looking for tools that are also accessible, so everyone in the office can use them.


If you are interested in reading more about a broader view of accessibility, we suggest:

What we mean when we talk about accessibility, an article by Alistair Duggan on the UK Government Digital Service blog

A Web for Everyone: Designing Accessible User Experiences, a book by Sarah Horton and Whitney Quesenbery and the companion A Podcast for Everyone.

If you have suggestions for accessible tools, or stories about making elections accessible, we’d love to hear them.