How to Make Democracy Accessible

Website homepage (Fig. 1)
  • 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)
  • 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 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:
    <ol>
    <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>
    </ol>
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)

--

--

Accessibility to the MAX! Curated by @RodrigoSanchez / www.FlightStudio1.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store