Web developer Shehzad Azram shows how SVG icons could help solve accessibility issues, and reveals how to implement one.
Things have come a long way from the days when we used plain vector art images as icons. Yet there are still a number of accessibility issues when it comes to icons. Thankfully, SVGs could go a long way towards addressing this problem.In this article, I’ll take you through the different icon options we have used in the past, then explore the benefits (and drawbacks) of SVG icons. Finally, I’ll explain how to implement SVG icons, using automation tools to reduce the workload.
While SVG has been around since the last century, it took over a decade for Internet Explorer to catch up with v9. With the rapid decline of legacy IE usage, SVG is now a viable solution across the vast majority of browsers and devices.
There are still some older browsers that do not support SVG icons, but there are tricks to get around this. So why should we use them over font icons? SVGs, like font icons, are vector-based.
Unlike font icons, you don’t have to use workarounds to make them accessible: they already contain semantic title and description attributes. They scale to any size without losing detail, so look great on HDPI displays.
Real world examples and expert tips on the use of icons in apps and online, from usability and accessibility specialist Sophie Buda.