by
on
under
Permalink

How Can I Make My Icon System Accessible?

Here’s a question I got the other day?

Would you suggest icon fonts or inline SVGs for a complex single page application? And are there specific accessibility concerns for either? Accessibility is especially important for us because schools use our products. I ask because we are currently in the process of unifying and setting up an icon system.

I don’t think I would make the choice based on what “kind” of website I was building, so let’s ignore that part of it.

I also think SVG icon systems are just better than icon fonts, so let’s assume that.

The accessibility question is the interesting bit, so let’s cover that.

There are two ways an icon might be used:

  1. Standalone: icon needs to convey meaning all by itself
  2. Decorative: icon is just visual sugar – the words around it convey the meaning.

Pattern for Standalone Icons

I’m adapting this from Accessible SVGs by Heather Migliorisi



<!-- if you are using a -based icon system, this would be a  below, but otherwise the same -->


  
  
  Short Title (e.g. Add to Cart)

  
  A friendly looking cartoon cart icon with blinking eyes.

  
  

Pattern for Decorative Icons

Remember the idea with a decorative icon is that if it wasn’t there at all, it wouldn’t matter. So, we hide it from AT:

But… icons might be used either way.

Right. So you probably should prepare your icons such that they are ready to be used as standalone, meaningful icons. Then, if they are used in a decorative context, slap aria-hidden="true" on the .

So your icon system might manifest like…

or

or

 {:standalone => true} %>

or whatever.

Let’s say you have to go with icon fonts though.

Things happen.

So much icon font usage is like this:

Or a variation, like it’s using “Private Use Area” for the attribute value or generates unique class names for each icon or whatever:

.icon-camera:before {
  content: "e90f";
}

To make a standalone icon, that’s pretty easy, you just put aria-hidden="true" on the element.

If you need a meaningful standalone icon, that means more HTML. From Bulletproof Icon Fonts, this is the recommended structure:


  
  Menu

Now the icon itself is hidden (because it uses a weird meaningless font), but there is real text there that can be read as expected by AT. You can hide the text visually as well. Assuming you have some feature testing in place here’s the CSS that hides/shows as needed:

.icon-fallback-text .icon {
  display: none;
}
supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .icon {
  display: inline-block;
}
.supports-fontface.supports-generatedcontent.icomoon .icon-fallback-text .text {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  height: 1px;
  width: 1px;
}

Remember linked icons too!

If an icon (any of these ways) is a link, make sure there is either regular HTML text in there that clearly announces what it does, or, you provide an aria-label that does:


   
    
  

How Can I Make My Icon System Accessible? is a post from CSS-Tricks

Original Article From CSS Tricks

Leave a Reply

Your email address will not be published. Required fields are marked *