Accessible svg icons with inline sprites – 24 accessibility grade 6 electricity unit test


Standing on their own, icons can be misinterpreted as Mallory van Achterberg shows in her talk at the Fronteers Conference in 2017. gas tax deduction The most important issue though: they lack text. Text is the most accessible format for information on the web. Screen readers understand text best and the same applies to most assistive technology, such as translation apps and Braille displays. So, if we have anything on our web page that’s not text — like icons — we must add text that gives our users the same information. Otherwise we could exclude people from understanding our interfaces. First thing you do when you see someone drowning? How to use an SVG graphic as an icon

I created a Codepen to demonstrate what this single CSS selector can do. We can raise or lower the font-size value of the paragraph in the CSS panel and see the icon scale with the text. m gastrocnemius We can also change the color value and see how the adjustment affects the icon. Hovering over or setting focus to the link shows the transition on both the link color and the fill color of the icon.

Let’s assume we need to create a button, which toggles the visibility of a site-wide navigation. On activation the navigation will be revealed and on repeated activation it will be hidden again. As we all agree, hopefully, a button is a button and should therefore be a . gas or electricity more expensive In our example case, screen estate is scarce and all we are given by our designer is a hamburger icon; no text. Switching to our editor, we add the SVG code to the button:

Now, when someone sets focus on the button, the text in the title element will be announced (some browsers even show the text inside the element in a tooltip on hover). Notice the focusable="false" attribute-value combination on the SVG! It will prevent Internet Explorer and Microsoft Edge from focusing the SVG. This is a bug and won’t be fixed for Internet Explorer 10 and 11. gas jobs crna We got Options

Now, our designer decided to add another button with text and the icon next to it. If you have text next to the icon, don’t add a title and description but replace the role="img" on the SVG with aria-hidden="true". Setting aria-hidden="true" on an element removes it and its children from the accessibility tree altogether. gas mileage comparison It will not be exposed to the accessibility API:

Imagine the following situation: a few weeks into the project our designer is all over the place with their icons. We got a lot of different ones to deal with and different use-cases (some need a title and description while others need to be hidden). It would take a long time to create the icons with all the different attributes and text variations. Hence, along came the SVG sprite and saved us hours of time!

By placing an empty as the first child of the opening tag and hiding it from everyone (sighted or not) with an inline-style of display: none, we created a space to put our icons. It’s important to place the display: none setting inline, as we do not want the sprite to be visible while the browser is loading our stylesheet! If you had styles in the critical path of your website though, you may add it there and leave the sprite alone.

There are different ways to optimize and simplify our SVG code before adding it to our HTML document. la gas The first and most rewarding is to open the SVG in an editor and remove all unneeded clutter by hand. It is also the most time-consuming option and the chance to remove something we might have needed is pretty high. While I can recommend to do this once or twice in order to get a better understanding of the structure of an SVG file, I do not advise to go this route forever.

For those preferring the command line over a graphical interface there is svgo. We can pass it a good bunch of arguments on how to optimize the SVG, what to remove, what to leave in place and even what to enforce to stay. For people preferring task runners there is ‘ grunt-svgmin‘ built on top of SVGO and ‘ gulp-svgmin‘ just the same. Sara Soueidan wrote a wonderful overview of existing tools with advantages and disadvantages for each.

If we were more into graphic user interface tools, there is SVGOMG by Jake Archibald. It’s as powerful as the command line variant, while also showing the output (code and visual). Instead of writing flags on our terminal, we may tick or untick options from the right side panel. gasbuddy nj One caveat is that it can become quite tedious to upload and optimize each icon separately. Building the sprite

What I’ve gathered in knowledge over the years when we talk about SVG and also accessibility on the web, comes from reading books, blog posts and tutorials. Also following those people, who are working in this field of our industry and have written those books, blog posts and tutorials. Of course endless tinkering, making and breaking things during late hours with a computer in front of my nose helped as well.

So, without any further ado: thanks to Léonie Watson, Laura Kalbag, Lea Verou, Estelle Weyl, Sara Soueidan, Sarah Drasner, Val Head, Seren Davies, Marcy Sutton, Carie Fisher, Zoe Gillenwater, Heather Migliorisi, Mallory van Achterberg, Steve Falkner, Patrick Lauke, Heydon Pickering, Neil Milliken, Nicolas Steenhout, Marco Zehe, Hugo Giraudel, Gunnar Bittersmann, Eric Bailey, Alan Dalton, Chris Coyier, Bruce Lawson, Aaron Gustafson, Scott O’Hara, the whole Paciello Group, AListApart and ABookApart, Kahn Academy, the team behind Pa11y, the team behind and many whom I’ve forgot to mention here.