Super-Duper-Quick-Fix Accessibility Audit: Civic.com

Screenshot of Civic YouTube video on the homepage.

What if I told you that there was a technology that would make it nearly impossible for someone to ever steal your identity every again? What peace of mind would that bring you when doing any sort of transaction, whether financial or something like voting. This is where Civic caught my interest with what it is trying to achieve using Blockchain technology–to decentralize the identity of individuals making it easier for us to be able to verify who we are when we need to do so. In the Blockchain landscape, this is one of the projects I believe has real potential to make things better for society. But I do hope they start to address groups of people who don’t have access to Civic.

And this is why I’ve chosen to share three small things that Civic can do to make their website more accessible to people who access the internet using assistive technologies (AT), such as a screen reader, braille readers or magnifiers just to name a few.

“Civic Secure Identity Ecosystem — We are giving businesses & individuals the tools to control and protect identities”

Now, with all that being said, let’s dig in. (See Fig. 1)

Civic.com homepage (Fig. 1)

There are typically three things that I can do “quickly” to see how accessible a site is.

  • The first is tabbing through the website to see if there are visual cues to help people who might need them to navigate the site.
  • The second is to look at the colors and visuals to see if there are any potential issues with contrast as some color combinations could be difficult to see.
  • The last thing is to look at the source code to make sure it is semantically structured. This is important for devices, such as screen readers to properly read content in a way that makes sense to the reader.

Now here are some small and easy fixes 🛠 I’d recommend to make the site even more accessible to people with auditory, cognitive, physical, speech, and visual disabilities:

The links:
There were a few things I found when tabbing that are simple fixes.

⚠️ There are no visual cues when tabbing through the <a> tags aka anchor links for this section of the website making it challenging for some people with visual disabilities who may need them to access content. (See Fig. 2)

✅ Recommendation: Add some CSS to make the links have visual cues. Here is a CodePen example of how to do this.

Footer links on homepage with Chrome Web Inspector open showing there are no outlines on focus (Fig. 2)

Color Contrast:

⚠️ The main navigations white text on the green gradients background for the main navigation needs more contrast as it fails at all small and large text sizes. (See Fig. 3)

✅ Recommendation: Making the white text a darker color or darkening the green gradient. Here is an example of a green that would work.

Civic.com homepage image of low contrast text links and text (Fig. 3)

The Video:

⚠️The video link does not have a visual cue on focus either, therefore people using a keyboard to navigate may not be able to watch the video. (See Fig. 4)

✅ Recommendation: This require an outline to be set on focus as well. As an added bonus having a transcript of the video would give people another way of accessing the content.


I hope this post will help you, developers, designers, and product managers–to better understand how you can build fully accessible digital products and experiences. The ultimate goal is to make the best technology for all people, which in turn will save you a lot of money in the long run and make your product and experiences even better.

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


About me:
 
I’m a Full-Stack Designer at Flight Studio 1, where I focus on accessibility (a11y) as part of the user experience, front-end development, and graphic design. While looking at the interconnectedness and impact on society–which in turn, can help your business grow sustainably.

You can also catch me working with my good friends at Equal Entry where we partner up with organizations to ensure technology provides equivalent access to people of diverse abilities.

Hi 👋🏽, I’m Rodrigo Sanchez (He/Him)