Super-Duper-Quick-Fix Accessibility Audit: Signal

Aria Live
5 min readDec 27, 2018

--

Screenshot of technical specs for Signal page

I remember not long ago — the 90s to be exact — when the internet felt so much safer and having an online private life was a lot easier. That sense of security vanished when I learned of companies using my data for profit, banking on outdated laws to find loopholes.

Today, the wheels are starting to get kicked on a lot of services/platforms like Facebook and Twitter that used loopholes in laws such as the (CDA), set up in the early days of the internet. This law allows these companies to dodge accountability for content published through their networks while assuring they can still harvest all of this content for sale. And this is one of the original flaws in how these companies are allowed to and choose to use our data, masking their practices under privacy and terms consent.

If we understood the full extent of harm would we agree to their terms? I can’t say we would, but the truth is that most companies have us sign documents like this with questionable terms on a daily basis. Those terms many times hold us accountable for content they should curate themselves to protect us as their customers.

A Deloitte survey of 2,000 consumers in the U.S found that 91% of people consent to legal terms and services conditions without reading them. For younger people, ages 18–34 the rate is even higher with 97% agreeing to conditions before reading. — 2017 Global Mobile Consumer Survey: US edition The dawn of the next era in mobile

Fortunate for us there are companies like Signal who do prioritize our privacy and allow us to connect with people we love.

Signal messages and calls are always end-to-end encrypted and painstakingly engineered to keep your communication safe. We can’t read your messages or see your calls, and no one else can either.

As my contribution, I’ve chosen to share three small things that Signal 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.

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

Screenshot of Signal 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:

Images:
⚠️ There are many images on the homepage that do not have alt text. Unfortunately, this makes the images inaccessible to people as there are no descriptions to be read aloud. (See Figs. 2)

✅ Recommendation: Add descriptive alternative text in the code for each image. Unless images are just decorative in that case alt=“” which will keep the image from appearing as content.

Screenshot of Signal logo mark and source code missing alt text (Fig. 2)

Color Contrast:
⚠️ The blue #008CDD text on the white #FFFFFF background “Terms & Privacy Policy” need a bit more contrast (See Fig. 3)

✅ Recommendation: Make text larger or bold (Text is considered large at 14pt bold or 18pt regular)

Screenshot of low contrast link with Colour Contrast Analyser results (Fig. 3)

Links:
⚠️ There are links using images that do not have discernible text making them unclear as to what the links are for when using assistive technology (See Fig. 4)

✅ Recommendation: Adding text that is positioned offscreen therefore making it not visible but readable by assistive technologies. Here is a CodePen Example of this.

Screenshot of image link and source code showing missing descriptive text (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)

--

--