A fellow interaction designer who we’ll call Haley showed me an accessibility spec for alternative text by the WCAG. She wanted my advice. “When we build iconography, we put it all in a sprite and use CSS to display it as a background image. But this says that the image has to have alt text.”
“So I’m thinking if I put the background image element in a <div> that has something attached to it, maybe via ARIA roles, to read out the alt text…” she begins.
“Why don’t you just stop using sprites?” I asked.
Based on the reaction I received, one would think I had just punted a baby bunny from the 50 yard line through the end zone of a football stadium.
I know all the reasons to use sprites as background images – cacheing, one load from the server, etc. etc – but none of them have as huge an impact on usability as not knowing what’s on the screen so I don’t particularly care.
“What about using SVGs in place of the sprites? They’re smaller than the current icons, they’ll cache, and we can manipulate them directly with CSS. They’re compatible with modern browsers, and they’ve been around a long time. Oh, and they have their own accessibility guidelines.”
Whoops, there went another bunny.
The problem was not that SVG couldn’t be used in place of the background-image sprites- both of us knew that.
It wasn’t that Haley didn’t have the time to learn how to use SVG files for the project, or that they were particularly hard to learn.
The problem was inertia.
Haley didn’t know anything about SVG files. The demos she’d seen were all designed to show off the power of SVG manipulation using CSS, which made them seem complex and daunting. Haley knew a lot about creating icon sprites and loading them as background images. She’d been doing that a long time, and even if it was going to be hard, it was territory she was familiar with.
Because the territory was familiar, Haley assumed it was easier than the road she’d never taken.
In general, Haley is right. Learning a whole new topic requires effort. It’s hard. Sometimes it’s scary. Learning a little bit beyond what we know now is easier, safer, probably faster.
It would be great if the general case was also always true for the specific case, but “I don’t know how to do it, therefore it is hard” is not a safe assumption to make. (If it was, no one would learn anything new.)
To use an SVG, Haley needed to learn how to “save as SVG” in Illustrator and add it using <img src=”icon1.svg”> in her HTML. Compared to her <div> plan, the SVG solution she didn’t know how to do was easy.
Haley’s plan required her to essentially reinvent alt text. She had to develop, test, and support frequently-used code across a wide assortment of browsers. It was probably going to be significant, frustrating, and probably not nearly as accessible for the end user as they’d prefer.
Our gut feelings are right; generally, learning new things is hard. We can’t let that stop us from exploring new options. We may be wrong – it may be easier than what we already do. We may be right, but the benefits may be worth the effort. It’s possible our old way is the best. In all cases, we need to be willing to explore our options.
