How to make complex icons with only CSS
Drew Vosburg
2374

On accessibility, I can see advantages or at the least an equivalence to SVG with the addition of a SPAN containing the icon’s (CSS displaced or hidden) copy text — not for visual display, but for access from AT browsers?

As an alternative to SVG this HTML/CSS strategy may then address the concern regarding the markup semantics of using a DIV and CSS for presentation only (the HTML now expressing semantic content), or an SVG for presentation only (an image marked up with an alternative text, or indeed its own HTML copy strategy)?

The DIV with SPAN icon structure may serve a semantic purpose and perhaps offer an advantage to our users’ experience when listening to our designs and to the icon’s accessibility and progressiveness in general? That SPAN copy doesn’t need to be restricted to a single word and can contain very useful support or instruction and using JavaScript, may even form a tooltip. This would addresses conditions where the icon semiotic is less concrete and requires scalable text to support it visually?

EDIT: Having now played with your HTML I note the DIVs already each contain copy text. Cool. My initial idea to add a SPAN only complicated things.The icons are accessible. I don’t see a problem with the semantic although any block-styled element could be used to preference. I used a list for fun and it worked OK, which lends to common navigation patterns.

To pin a tooltip I added a TITLE attribute to the DIV and on mouseover, JavaScript pulls the TITLE into a dynamic element and positions it with the pointer. (A Close button on the tooltip deals with touch foibles.) The script could also use the copy text from the DIV to negate duplicity on AT devices. Adding link anchors required some CSS tinkering and the mouseover needed an additional change to only colour. Fun.

Using Drew’s CSS icon to call a touch-friendly tooltip. (The cloud gradient is messed up by the screen grab. It’s fine on the screen.)

— end edit.

Thoughts?

Of course, this icon technique is very clever — especially the employment of gradient fills to create complexity but I do wonder how accessible it might be to mortal designers or idiots like me. I’m happy with CSS and pasting and modifying your compiled CSS and yet I am concerned my own creativity and skills may negate my own design nuances. For that reason, maybe we will resist change to this technique in spite of a semantic and accessible advantage and stick to drawing stuff in our favorite graphics package? And there I see a future — if graphics packages continue their evolution toward producing workable and (one day) coherent CSS..?

Thank you for sharing the technique. There’s more to reflect on here than meets the eye.

Like what you read? Give Pat Godfrey a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.