Member-only story
Creating accessible CSS art
Modern HTML and CSS features to make CSS art accessible for everyone

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: