How to Create Media Accessibility on Your Site With Cloudinary!

Challenge:

Take a look at a few examples of media accessibility using Cloudinary. Create you own short examples of how to use Cloudinary to create images that are optimal for users who are colorblind. The top 3 examples will win cash prizes! 💰 (Submission Link Below)

Web accessibility (a11y) is about gaining an insight into—

• What your users see or hear when they open your app.

• How they understand your app through interpretation.

• How they can use your app with ease.

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, 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.

Enablement of Media Accessibility (m16y) With Cloudinary

Solutions for enabling media accessibility abound, ranging from straightforward tools like CSS to complex ones that involve algorithms. Cloudinary's dynamic-transformation capability stands out as being intuitive and simple, requiring the least code. Following are the features that relate to media accessibility.

Put Yourself in Your Audience’s Shoes With the simulate_colorblind Effect

Color blindness is one of the most onerous visual-impairment challenges to overcome, let alone that no standards exist for solutions. The best way to understand how color-blind people experience your site is by experimenting with it yourself: apply Cloudinary's latest transformation effect simulate_colorblind to an image, like this: https://res.cloudinary.com/demo/image/upload/e_simulate_colorblind/pie_chart.png

The default mode is simulation of deuteranopia. To simulate another color-blind type, such as tritanopia, edit the e_simulate_colorblind portion of the URL, like this: https://res.cloudinary.com/demo/image/upload/e_simulate_colorblind:tritanopia/pie_chart.jpg

https://res.cloudinary.com/demo/image/upload/w_700,h_500,c_fill/l_pie_chart,w_700,h_500,c_fill,x_700,e_simulate_colorblind:tritanopia/l_pie_chart,w_700,h_500,c_fill,y_500,x_-350,e_simulate_colorblind/l_pie_chart,w_700,h_500,c_fill,y_250,x_350,e_simulate_colorblind:tritanomaly/pie_chart.jpg

Display Colors With the Color-Blind Support Effect

Displaying colors for the visually impaired is a knotty task. To do that—even for fundamental user-interface elements, such as text and buttons—involves complex calculations with JavaScript and CSS. But what about displaying red and green colors in images for those who are afflicted with deuteranopia? Cloudinary's color-blind support effect, e_assist_colorblind, aptly serves that purpose, as shown in this picture: https://res.cloudinary.com/demo/image/upload/e_assist_colorblind/pie_chart.png

e_assist_colorblind adds stripes to highlight the difference between hot (red) and cold (green) colors, enabling the deuteranopia-afflicted people to immediately figure out, for example, whether they are looking at a shirt with two different colors even if it might seem otherwise.

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

• Additionally, here are a couple of cool tricks: To control the color intensity of the stripes, append a numerical value to the parameter, for example, e_assist_colorblind:30

To replace the red and green colors with prettier ones, append 'xray' to the parameter.

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

Now You Try! 😃 Submit your own example using Cloudinary to create an image that is optimal for users who are colorblind. Submit your the URL for your image here!