Member-only story

Creating accessible CSS art

Modern HTML and CSS features to make CSS art accessible for everyone

Alvaro Montoro
UX Collective
7 min readJul 8, 2021
Drawing of a woman looking at the post title: “creating acccessible CSS drawings”

CSS art has been a thing since the creation of CSS itself. It is a great way of practicing and learning and it makes for an interesting coding challenge. But it has a big problem: CSS art is inherently not accessible.

In this post, we will not see how to create CSS drawings and illustrations (there are plenty of those posts). Instead, we will focus on some tips and best practices to make that CSS art more accessible for everyone.

After applying these techniques, your CSS art will be friendlier for screen-reader users, people with specific color needs and preferences, people with vestibular disorders or vertigo… and all without impacting your art or limiting your creativity. It’s a win-win.

For a working example of the tips in the article, check this CSS illustration. And without further ado, let’s see the recommendations:

  1. Identify the CSS art as an image
  2. Add alternative text
  3. Go pixel-perfect… or go for scalable design
  4. Use semantic HTML elements
  5. Be mindful with the animations
  6. Consider people’s color choices
  7. Set the aspect ratio

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Alvaro Montoro

Full-Stack Software Engineer, Mobile Developer, Web technologies enthusiast. CSS aficionado. Twitter: @alvaro_montoro

No responses yet

What are your thoughts?