We live and work in an increasingly visual economy that relies on images and video to communicate complex information fast. From the humble emoticon to 4K Ultra HD video, brands and their customers are using visual imagery to attract, share, build communities, form relationships, persuade, sell and entertain.
But how can we better serve people with visual impairments? According to World Bank Blogs, 15 percent of the world’s population – or one in six people worldwide – experience some form of sight disability. As we continue to rely on the web more and more, making your website more accessible to everyone is a vital part of diversity and inclusion.
The case for accessibility (A11y)
Accessibility, or in this case, web accessibility, is often referred to as “A11y,”- a “numeronym” where 11 represents the number of letters between the “a” and “y” in “accessibility”. The Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C) published a series of Web Content Accessibility Guidelines (WCAG). These contain four main principles that build a foundation for greater accessibility for all:
- Perceivable – Information and user interface components must be presentable to users in ways they can perceive
- Operable – User interface components and navigation must be operable
- Understandable – Information and the operation of user interface must be understandable
- Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies
There’s a fine line between accessibility and usability (or user experience). Though not quite the same, they certainly go hand-in-hand. If your audience can’t use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.
Where web images and videos are concerned, all visitors to your site should be able to perceive time-based media (images/video that unfolds over time), color usage, and mixed web content. These five tips that follow will help you to make your media assets more accessible and user-friendly.
1. Perceivable information and user interface: let your images speak for themselves
Using alternative text (alt text) in HTML has long been a common SEO best practice, which also works well for accessibility.
According to Moz, alt text is “used within HTML code to describe the appearance and function of an image on a page.” It serves three purposes:
- It enables accessibility, that is, helps visually impaired users understand the content.
- It serves as a placeholder in cases where related images are not accessible.
- It helps search-engine crawlers index content by providing context
For the best user experience, tag all your images with alt text. Failing that, you could skip putting alt text with decorative images. However, if these images fail to load, your viewers will have no idea of what they are missing. Not ideal.
However adding clear, concise, and readable alt descriptions to images can be very labor-intensive – especially for delivery to blind users through screen readers. However, thanks to the advances in AI algorithms for media recognition and categorization over the last decade, there are tools that automate keyword generation at scale and with impressive speed. Examples include Amazon Rekognition Auto Tagging, Google Auto Tagging, Imagga Auto Tagging. The process is intuitive—even for thousands of images.
2. Enable dark or light mode
Dark mode is mandatory for users with light sensitivity, a widespread visual impairment in our modern age of high ‘screen time’.
A straightforward way to enable dark mode is to simply use the invert() function of Cascading Style Sheets (CSS), a function that is used to apply a filter to an image, which converts all the available colors within an app to the exact opposite colors, hence turning on or off dark or light mode.
The problem with that fix is that it applies to all the images, causing their colors to be inverted as well. More sophisticated image management tools allow you to automatically apply an image transformation which displays all the images in inverted color, retaining their original appearance in either dark or light mode.
3. Contrast your image and text colors
Contrasting image and text colors keeps the audience engaged. However, if your web developers need to manually code this, it not only takes a lot of resources but also long-term maintenance. Some image management tools, however, can automate applying brightness/ opacity effects. By setting the appropriate percentage of brightness (and opacity) on an image background, the tools allow you to apply the appropriate ratio of contrast between the background and the overlaid text, ensuring readability for everyone.
4. Make your videos readable
To comply with accessibility levels A and AA, you must add subtitles as an alternative or as a feature for pre-recorded videos. This benefits everyone since 80 percent of videos are viewed with audio off. AI-based video transcription tools enable you to easily automate the process of generating transcripts for videos.
5. Be aware of color accessibility
Back in the days of black and white television, the legendary snooker commentator Ted Lowe – aka “Whispering Ted” – was famous for saying “for those of you who are watching in black and white, the pink is next to the green.” This was back in the 1960s. However, for approximately 300 million people worldwide, the seemingly simple task of distinguishing colors remains a daily challenge.
color blindness, or Color Vision Deficiency (CVD), affects roughly one in twelve men, and one in 200 women. That’s more than 8 percent of the population – a significant proportion of your potential customers who may be missing vital information or unable to engage fully with your site.
Being color blind doesn’t just mean seeing colors differently. Affected people can actually miss vital information depending on how an image is composed. Some objects can be totally camouflaged. Even if colors and shapes are well separated, images that convey meaning by color can be problematic. For example people affected by deuteranopia – a form of red/green color-blindness – will struggle to match the legend to segments of a pie chart.
Free tools are available (Cloudinary offers one) that can show a simulation of how an image looks to people with different color blind conditions including deuteranopia, protanopia, tritanopia, tritanomaly, deuteranomaly, cone monochromacy and rod monochromacy. They also allow you to analyze images to provide color blind accessibility scores and information on which colors are the hardest to differentiate. And you can use these tools to apply effects to images to help differentiate problematic colors.
Having the means to analyze your images objectively and search for the ones with the best scores allows you to select the most appropriate images, confident that they conform to the expected standards. If you can’t change your images, consider putting a toggle on your website or app to display images in a color-blind-friendly way. Then, you can keep your original images with the original colors for those who can see them, and still provide a way for your color blind customers to see all the details
If you allow users to upload their own content to your website, you could make them stop and think about color accessibility by:
- Providing feedback based on the analysis scores on upload.
- Providing a mechanism for them to view their content through the eyes of someone with a color-blind condition
Accessibility is a broad subject. Making your web images and video accessible is just a small, albeit significant, part of it. Although getting it right requires meticulous and painstaking effort, the tips described in this article should help, and also identify tasks that can be automated with AI software. As mentioned earlier, web accessibility and user experience go hand-in-hand. When your media assets are accessible all users benefit.
Caroline Levison, technical writer, Cloudinary
