Author: Melanie Mudge
Last week was the CSUN Assistive Technology Conference in Anaheim. Scribely’s founder, Caroline Desrosiers, teamed up with Heather Neff, founder of Equivalent Design, to talk about how to make websites, marketing materials, and digital graphics more accessible with smart SVGs and human-crafted alt text. In case you weren’t able to be there, here is a link to download Caroline Desrosiers' slides on Next-Level Alt Text.
Imagery can be a powerful tool, used to influence perception and user experience. Successful imagery communicates product appeal while increasing sales and customer satisfaction. On the other hand, unsuccessful imagery, or imagery that is not accessible, has a negative overall impact on user experience and can often affect our bottom line.
So how do we ensure that our digital imagery is accessible? One way is to use smart SVGs!
SVGs, or Scalable Vector Graphics, are graphics that are made using code and math, rather than with pixels like JPEGs and PNGs. This means that SVGs scale up or down much better than their pixel-based counterparts.
Smart SVGs, then, are dynamic files created by Equivalent Design that are accessible, responsive, and sustainable. They contain various layouts and responsive behaviors—for example, they can change in size, layout, and even color based on context and user preferences—and they are, on average, under 10 KB in size.
Because they’re responsive, they automatically adapt to different screen sizes, color modes, contrast preferences, and more, which means your brand stays visible and accessible in many contexts and on many platforms. Ultimately smart SVGs:
SVGs are changing the game when it comes to digital graphics. With SVGs, we can create fun and creative animations that enhance the experience on web pages. They add style, personality, and flair, helping you stand out in a sea of endless content. We can even deliver audio experiences through SVGs, expanding the possibilities for screen reader users to customize and personalize their listening experience. And with smart SVGs, we’re now able to make those graphics much more accessible to a wider range of people.
Long story short, these graphics are incredible works of art, but they aren’t really accessible until they have text-based descriptions. As [someone] said, “You can’t reach any level of WCAG conformance without text alternatives.” But to fully encapsulate these responsive SVGs' meaning, we need alt text that measures up.
Of course, there are all the normal rules for writing alt text (see our Alt Text Masterclass: How to Write Alt Text article if you’re not sure what those are), but these are for basic images. What about when there’s more going on in the image? Where’s the guidance for artistic images? Because artistic images are more emotional and experiential and deeply rooted in the artist’s message, style, techniques, you often have to take a completely different approach.
Describing creative and artistic images can feel intimidating and subjective, but there are techniques we can use to ensure we’re describing them well.
Before you write anything, react. A lot of the alt text work happens before you write anything at all. What do you feel when you see this image? Briefly describe it. Capturing that feeling is what writing meaningful alt text is all about.
Next, look around. This involves three steps.
Now start writing. Follow the steps below in order to ensure that you’re getting to the most important elements first.
Of course, SVGs are their own category, so describing them requires a slightly different approach. These are Scribely’s techniques for taking alt text for SVGs from basic to beautiful, depending on the type or purpose of the SVG.
As we improve technology in the 2020s and beyond, our graphics and images continue to become more intricate, detailed, and responsive. We need to be making sure these digital works of art are accessible to more people from the start. Therefore, the alt text and extended descriptions that accompany our graphics must reflect their complexity. Ultimately, it’s a skill to be able to turn complex images into useful, transformative descriptions that draw users into the experience. And because it’s a skill, it takes a lot of time and practice to hone it, so don’t be afraid to just start writing. This is about progress, not perfection. But as with any writing skill, it never hurts to improve! Take the time to seek out resources that will expand your vocabulary and teach you new techniques.
Want help describing your images and graphics? Want to train your team how to do it? Scribely can help! Contact us today about how we can assist your next project
