Introduction

For most people, 4th January is just another day. For Beyonce, it was one she’d never forget. Her company got sued for not providing enough web accessibility (aka “a11y”) to visually impaired users. Sadly, this isn’t new. Not everyone knows about web accessibility, fewer people understand it, and not many people care. But as front-end developers, we should care. We’re the ones wiring up accessibility on sites.

This article highlights why web accessibility matters, with a focus on modern, visual websites.

The Visual Web

The web has turned visual over the past decade. Think about the sheer number of images, videos and visual elements crammed onto a single webpage. Instagram spearheaded visual storytelling. E-commerce sites now display 360-degree videos of their products alongside high-definition images to push sales. With a fun analogy: ten years ago, people used to say they had a cat, then they started posting images of their cat, and today they’re posting videos of the cat.

If you’re interested in learning more about how the web has turned visual, check out the State of Visual Media Report by Cloudinary.

Challenges

Let’s look at some of the challenges developers face when it comes to accessibility and visuals on a site.

Users need support

According to WHO, roughly 1.3 billion people are living with some visual impairment, such as low vision, colour blindness and (partial) blindness.

That’s nearly 20% of the world population (about 2 out of 10 people) with visual difficulties. Roughly 20% of your site visitors may have trouble accessing web content.

This number keeps climbing.

Laws surrounding accessibility

Many countries, especially in Europe and the U.S., have enforced laws around accessibility for any free content. Companies can’t ignore these users and pretend they don’t exist, because they now have a legal obligation.

In the U.S. specifically, lawsuits related to web accessibility increased by almost 200% each year from 2015 to 2017 and tripled by 2018.

E-commerce felt this the hardest. Target (a US-based general merchandise retailer) had to pay $10 million for neglecting visually impaired users. Had they invested a little bit into accessibility from the start, they could have avoided that fine entirely and made their users’ lives far less difficult.

This trend won’t stop.

Lawsuit? It only happens in the U.S., not where I live.

The U.S. may be notoriously litigious, but that doesn’t mean you should only care about accessibility out of fear of being sued. That’s the wrong mindset.

To become a versatile front-end developer or designer, caring for accessibility is part of your job. It’s your responsibility to make sure users can access the site you’re working on and have a good time using it, regardless of who they are.

Especially in e-commerce: any user with visual impairments must be able to browse the site without a problem and see the different colours for a given t-shirt, for example. You’ll lose visitors and potentially lose profit because you’re not serving your customer properly.

Visual Impairments

Visual impairment is a functional limitation, a decreased ability to see to a degree that isn’t fixable by glasses. Estimates vary. In the United States, around 10 million people are affected. In the UK, the number is estimated to be almost 2 million.

Let’s look at some of the most common visual impairments, focusing on the ones that potentially affect people browsing websites.

Light Sensitivity

Light sensitivity (or photophobia, which is not a fear of photos) is a common issue, especially for people who work with computer screens a lot (developers, for example). Users with light sensitivity find it hard, painful, or even impossible to read when there’s bright light or a combination of many bright colours together.

That’s why 90% of developers switch to dark themes in their dev tools, IDE, or OS (if it has one).

That’s also why applications like Twitter, Google, Facebook Messenger, and iOS provide “Dark Mode”. And Kindle, which is famous for its E-ink technology, was built to tackle this exact challenge.

There’s no single standard for light sensitivity. It varies from person to person depending on the surroundings, making it quite impossible to find one configuration that suits everyone.

Contrast Sensitivity

Contrast sensitivity hits users when they try to read text over images or videos. It happens due to the lack of contrast between text and background images or video. For example:

• White text on a light background

• Black text on a dark background

• Lack of text-shadow to differentiate.

Unlike light sensitivity, contrast sensitivity is easy to spot. Modern browsers like Chrome and Firefox have introduced a contrast score check in their dev tools, helping developers discover instantly if a section on a page isn’t visible enough.

Still, awareness of this challenge isn’t always sufficient. Sometimes the automatic score is not always 100% accurate.

One randomly good “bad” example is the website of the University of Advanced Technology. The text appearing on images is nearly impossible to read. Text like this carries essential information. You shouldn’t have to guess what it says.

Colour blindness

Colour blindness (or colour vision deficiency) makes it difficult or near-impossible for people to identify or distinguish between specific colours. As stated by the NHS, “most people can adapt to colour vision deficiency”. But adapting is sometimes not enough.

Picture this: a person with colour vision deficiency visits your e-commerce platform, only to find that seemingly all the t-shirts look the same colour. The colour picker has a dropdown with colours shown, without a label. How would this person know which t-shirt is red or green? How could a purchase be made? You need to prepare for these situations to provide a proper experience for the site visitor.

Solutions

Let’s look at some solutions you can apply.

Themes for light sensitivity

Offer “Dark Mode” or a “Light Theme” for your users and let them set the brightness. Let them decide for themselves. There are several approaches to achieve this, depending on your technology stack and browser support. One way is to combine a CSS variable and the CSS invert method: filter: invert().

By defining invert(1), the browser inverts all colours in your app to their exact opposite.

/* Define css variable for dark/light mode */
:root {
  --nightMode: 0;
}

/* Apply the mode change to the whole app on <body> */
body {
  filter: invert(var(--nightMode));
}

This filter effect also applies to all images within the app. By adding the e_negate effect from Cloudinary transformation to the images, you can easily make sure their colours are preserved even in inverted mode (dark or light).

https://res.cloudinary.com/mayashavin/image/upload/e_negate/20-12-2D-pie.png

Easy peasy, right?

Warning

filter is still not supported in IE. If IE support is critical for your app, consider using another approach such as CSS-in-JS (styled components for Vue or for React).

Contrast

When dealing with text, another key aspect of readability is contrast. The Web Content Accessibility Guideline (WCAG) defines that text or images of text must have a contrast ratio of at least 4.5:1, with the exception of large text (3:1), invisible and decorative text, and logotypes where the text is part of a brand name.

We’re not talking about changing the colour. We want to make sure that people with moderately low vision can still read the text by providing sufficient contrast between text and its background.

Larger text has a lower contrast threshold, purely because larger strokes are used. Larger text is, by definition, easier to read.

Remember, contrast also applies to images of text, so anything that’s been rendered into an image format but contains text.

Generally, 18-point text or 14-point bold text is already considered “large text” and carries the lower contrast ratio requirement.

If you’d like to verify that your text and background colours pass the contrast test, check out the Contrast Checker tool by WebAIM.

Translate colours to text

Sometimes you can’t change the image and add helpers for people with colour difficulties (though the Cloudinary transformation we’ll mention next can automate this). For those situations, you can use a different technique: add the colour name as text using the alt attribute. Instead of saying the image is a ‘t-shirt’, explicitly state that it’s a red t-shirt. Be as specific about the colour as possible. “Blue” is vague; “navy blue” is much better.

Since we’ve mentioned Cloudinary, it’s relatively easy to grab the predominant colour of a photo automatically and add it as a tag. This involves some code but roughly looks like this, using Node.js:

require('dotenv').config();
(async () => {
  const cloudinary = require('cloudinary').v2;
  // upload image
  const result = await cloudinary.uploader.upload('./blue.jpg', {
    public_id: 'blue',
    overwrite: true,
  });
  const public_id = result.public_id;
  // get predominant colours
  const colours = await cloudinary.api.resource(public_id, { colors: true });
  const main_colour = colours.predominant.google[0][0];
  // add predominant colour as tag
  await cloudinary.uploader.add_tag(main_colour, public_id);
})();

Once you have that piece of information, you can generate the final URL. Something along these lines:

require('dotenv').config();
(async () => {
  const cloudinary = require('cloudinary').v2;
  const public_id = 'blue';
  const data = await cloudinary.api.resource(public_id);
  const url = cloudinary.url(public_id);
  const final = `<img src="${url}" alt="${data.tags[0]}" />`;
  console.log(final);
})();

You can also enable automatic tagging where AI-based services detect what’s in the photo and add tags accordingly. Read more about this feature here.

Pattern your colours

The bad news: there’s no simple coding solution for this challenge on images. The conventional approach requires designers or image editing software (Photoshop, Gimp) to create an extra resource for each colourblind case. That’s clearly not optimal for application performance or resource management in the long run.

The good news: Cloudinary’s e_assist_colorblind transformation can solve some of the problems a colourblind user would face:

https://res.cloudinary.com/demo/image/upload/e_assist_colorblind/pie_chart.png

This effect adds stripes to highlight the difference between hot (red) and cold (green) colours.

Now users with deuteranopia can immediately differentiate the problematic colours on a T-shirt and decide to make a purchase (or not).

Tip:

You can control the intensity of the stripes by appending a numerical value to the parameter, for instance, e_assist_colorblind:30 to increase the intensity to 30 from a default 10.

More effect options can be found in the Cloudinary documentation.

Conclusion

A high percentage of the global population is online, and it’s vital that sites are accessible to all. The diversity of people visiting our websites keeps growing. We (as site owners and developers) must be prepared to serve the needs of many.

Neglecting accessibility features could lead to lost customers, fewer engagements, a drop in user retention, and in some countries, a lawsuit.

Check out a project we’ve launched about media accessibility called m16y.