How to Make Democracy Accessible

Just when I thought American Democracy no longer existed, at a time when the internet and political outsiders started revealing what’s truly behind the curtain, which ain’t pretty–A friend decided to create a simple online resource called Bernie vs Hillary to help voters see which democratic candidate’s values best aligned with their own. When I heard about this I got really excited because it was an opportunity for me to help educate people and contribute to our democracy. I decided to reach out to volunteer my knowledge on web accessibility to help make the site be more accessible to all, abled and disabled people.

Here, I’ll go over another quick-fix accessibility audit I did of this website, which has now helped almost 400K people better understand the candidates values. (See Fig. 1)

Website homepage (Fig. 1)

There are typically three things that I can do “quickly” to see how accessible a site is. One is to tab through the website to see if there are visual cues to help people navigate. The second thing that I do is look at the colors and visuals to see if there are any potential issues with contrast. And the last thing is to look at the source code to make sure the code is semantically structured because this is huge for devices, such as screen readers to properly read content.

Here are some small and easy fixes I recommended updating:
There were a few things I found when tabbing that are simple fixes.

  • There were several anchor tags that didn’t have visual cues, which made it challenging to know what link I was on if I was just tabbing through the page.
    R: ✅ Here I would recommend not removing the outline property in CSS for anchor tags. (See Fig. 2)
Links with no visual cues (Fig. 2)

With regards to color contrast there was only one small thing.

  • Copy at smaller sizes is often difficult to read, but when certain colors are used it can add to that difficulty.
    R: ✅ Here I would recommend making the text slightly larger and darkening the colors, as the green, red and grey are a bit too subtle. Here is a tool to help with figuring out the contrasts for the green, red and grey. (See Fig. 3)
Small and low contrast text (Fig. 3)

The Code:
I came across some things that would be easy fixes that could make a big difference for people.

  • The site did not have any header tags.
    R: ✅ Here I would recommend creating hierarchy by using header tags.
  • There were links that weren’t anchor tags, but divs made to be links.
    R: ✅ Here I would recommend creating an ordered list of links with hidden text to give people using assistive technologies more context.
    (See Fig. 4)
    Here is an example the code:
    <li><a href=“url”><span class=“visually-hidden”>Question one<span></a></li>
    <li><a href=“url”><span class=“visually-hidden”>Question two<span></a></li>
    <li><a href=“url”><span class=“visually-hidden”>Question three<span></a></li>
Divs made into anchor tags (Fig. 4)
  • Form fields were missing <fieldset> and <legend>
    R: ✅ Here I would recommend restructuring the code to be wrapped in <fieldset> and <legend> see example here. This will give context to the user, although I would probably hide the <legend> so that it’s only read by a screen reader and not actually seen. (See Fig. 5)
Form (Fig. 5)
  • There was some text that would make sense to a person who could visually see, but wasn’t clear if not.
    R: ✅ Here I would recommend in instances where you want to hide text for screen readers, see CSS example here. An instance where you would want to do this is when an element might not have enough information/text for someone to understand its context if it’s being read by a screen reader, an example of this is the “Q:” and “A:” in the results table. (See Fig. 6)
    Here I would do something like this:
    <p>Q <span class=“visually-hidden”>question<span>: blah blah blah…</p>
    <p>A <span class=“visually-hidden”>answer<span>: blah blah blah…</p>
Not enough context for screen reader (Fig. 6)

Now let’s get back to the basics and really work on making America greater than it’s ever been.

I hope this post will help you or any developers, designers, or product managers when you build digital products and better understand how you can build solid a foundation for your products. The ultimate goal is to make your products accessible to all and save you money in the long run!

See you very soon for another quick-fix accessibility audit! Can we fix it? Yes we can!

Thank you to Incitement Design for letting me contribute to this project.

And if you’re in the market for a progressive digital agency you should contact Incitement Design now.

Accessibility to the MAX! Curated by @RodrigoSanchez /

Accessibility to the MAX! Curated by @RodrigoSanchez /