Few people think much about web accessibility. Even fewer people understand it, and without understanding there won’t be empathy or change. However, a string of high-profile class action lawsuits in 2019, like the one against Beyonce’s management company, brought the issue to light — and I expect we’ll see a lot more companies prioritizing web accessibility in 2020.
At the same time, the US and many European countries are more rigorously enforcing their by-laws applying to free content accessibility. Companies will no longer be able to afford to ignore this issue.
It’s no surprise that visually impaired people are demanding better access. Populated with Instagram ‘stories’ and online stores that display 360-degree, high-definition product images and video, the web has become a visual public space. That puts many people at an unnecessary disadvantage.
It’s not only lawsuits driving demand for greater visual access, but the growing problem of poor vision. According to the World Health Organization (WHO), around 1.3 billion people have some visual impairment, such as low vision, color blindness, and (partial) blindness. That’s nearly 20 percent of the global population — including your website visitors — who struggle with accessibility.
Adjust your mindset
I’ll be the first to accept that the US is more lawsuit-happy than most. Maybe you live in another country, with a different legal culture and don’t think you need to worry about accessibility. That’s the wrong mindset.
As a frontend developer, I do care about web accessibility; it’s my responsibility. I don’t want visitors just to have ‘access.’ I want them to have the best possible experience. Let’s take a closer look now at some of the different types of visual impairments people have and how to address them on a site.
Light sensitivity
Light sensitivity is a very common issue, especially for people who sit in front of computer screens all day. Light-sensitive people can find it hard, painful, or even impossible to read and concentrate under bright lights, on bright screens, or on web pages where bright colors are combined.
This is why most developers like me switch to dark themes in their dev tools, IDE, or their OS (if it has one). It’s also why popular apps like Twitter, Google, Facebook Messenger, and recently iOS, provide “Dark Mode.”
One difficulty is that there’s no one standard for light sensitivity. It varies by person and setting, so it’s impossible to devise one configuration set that works for all light-sensitive people.
Solution: Light sensitivity themes
Offer “Dark Mode” or a “Light Theme” for your users and allow them to set the brightness, essentially letting them decide for themselves.
There are several approaches to achieve this, depending on your technology stack and browser support. A straightforward way is to combine a CSS variable and the CSS invert method: filter: invert().
By defining invert(1), the browser inverts all colors available in your apps to the exact opposite matching colors.
/*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. You might want to add some code to make sure colors are reserved even in inverted mode (dark or light).
Warning: filter is still not supported in IE. If IE support is critical for your app, consider using other approach such as CSS-in-JS (styled components for Vue or for React).
Contrast sensitivity
Contrast sensitivity occurs where people struggle to read text that is placed over images and videos. This happens when white text is placed on a light background, black text is placed on a dark background, or text is placed on a visually ‘busy’ background.
Solution: Tools and resources
Unlike light sensitivity, contrast sensitivity issues are easy to identify. Popular browsers including Chrome and Firefox now include a ‘contrast score check’ in their dev tools, which flag any page sections that aren’t visible enough. You shouldn’t rely solely on these tools, however, because the automatic scores are not always 100 percent accurate.
To address contrast sensitivity fully, refer to the Web Content Accessibility Guidelines (WCAG). It states that text, or images of text, must have a contrast ratio of at least 4.5:1. Exceptions are large text (where it’s 3:1), invisible, and decorative text and logotypes, where the text is part of a brand name.
To summarize some of the main points:
- Addressing contrast sensitivity shouldn’t be confused with changing color schemes. It’s all about ensuring that people can read webpage text by providing the optimal contrast between text and its background.
- Larger text has a lower contrast criteria. This is because larger text is, by nature, easier to read. 18 point text or a 14 point bold text is considered “large text.”
- Contrast also applies to images of text, not just strictly applied to fonts — for example, a JPG image of a brand logo.
To ensure your website passes the contrast test, check out this free Contrast Checker tool by WebAIM.
Color blindness
Color blindness (or color vision deficiency) makes it difficult (or impossible) for affected people to identify or distinguish between specific colors.
Imagine a colorblind person visits an online store to buy a red t-shirt and sees only green ones. How would this visitor know which ones to buy?
Solution: Translate colors to text
In some cases it will be impossible to adapt an image to appear correctly for someone with color vision deficiency. For these, the options are to either provide chat/live support or text prompts (or, ideally, both).
To provide text prompts, we add the name of the color as text to images using the alt attribute. So instead of saying that an image is a ‘t-shirt,’ we would explicitly state that it is a red t-shirt. The more specific, the better. Yellow is somewhat helpful, but ‘mustard yellow’ is much more descriptive.
This will involve some light coding, or you can use one of the image management tools on the market that help automate this process.
Solution: Pattern your colors
Another option is to provide a unique pattern to represent each different color on your webpage. The standard approaches are not straightforward — either designers need to manually code something or use image editing software like Photoshop or Gimp to create an extra resource for each colorblind case.
The free version of my company’s own software includes a transformation “e_assist_colorblind effect” to make this process easier. For example, you can add stripes to highlight the difference between hot (red) and cold (green) colors.
Hopefully this has given you some ideas for how to address the most common issues around visual accessibility. By focusing on this important issue, you’ll not just avoid litigation, but you’ll attract more site visitors, raise engagement, and potentially boost revenue as well.
Get the TNW newsletter
Get the most important tech news in your inbox each week.