Super-Duper-Quick-Fix Accessibility Audit: Doc.ai

Aria Live
Aria Live
Dec 4, 2018 · 4 min read
Screenshot of doc.ai YouTube video

Once upon a time, I was working on a med-tech startup with the fundamental purpose of granting every person access to all of their medical records no matter what format they were in or where in the world they were located. We felt having easy access to our unified medical records would be beneficial for people, allowing all of us to be more preventative than reactive, simply by seeing the full picture of our health history.

Although I didn’t continue with the business, my interest in this field continued. Over the past several years I’ve been observing this space to see how people are approaching this enormous challenge. I found doc.ai, which is an artificial intelligence, blockchain technology med-tech company, tackling my original purpose and bringing many new ideas to create a very powerful tool for better science, medicine and healthcare.

I hope people start contributing with their information/data to projects with this focus and that companies like doc.ai also make sure they find ways to include groups of people who may not be able to access doc.ai at the moment.

As my contribution, I’ve chosen to share three small things that doc.ai can do to make their website more accessible to people who access the internet using assistive technologies (AT), such as screen readers, braille readers or magnifiers just to name a few.

doc.ai is an A.I. powered medical research companion that enables you to take ownership of your health data to get personalized insights while earning rewards by contributing to science and accelerating research for all.

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

Image of doc.ai 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.

⚠️ Only some of the links and buttons on the homepage have visual queues (outline) because the CSS Outlines have been removed making it inaccessible to those who navigate using their keyboards. This button also has a dropdown which links to more content which cannot be accessed via the keyboard. (Fig. 2)
✅ Recommendation: Add some CSS to make the links have cues. Here is a CodePen example of how to do this.

Image of a button on the 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 light grey text a darker color. Here is an example of a grey that would work.

Image of low contrast text (Fig. 3)

⚠️ The white #FFFFFF text onto of the large photograph is difficult to read (See Fig. 4)
✅ Recommendation: Darkening the background image quite a bit or creating a solid color background that contains the content to give more contrast.

Image of white text on top of large photograph (Fig. 4)

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 understanding 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)

Aria Live

Written by

Aria Live

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade