Icons used correctly can enhance both the user experience and look of your interface. Sadly, more and more designers are using them in the wrong way. And it’s hurting both the usability and accessibility of the interface.
MY DAD AND HIS TED APP
I love to watch my dad use technology. It’s such a great learning experience for me as an interaction designer.
He is 57, wears glasses when reading and always delays getting a new phone until his old one completely stops working. You see, he does not like to learn new technology. He just wants his stuff to do what he needs it to do without having to think.
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.
Graphic icons are a powerful way to enhance usability and accessibility in apps and online, but only if they are chosen and implemented with care. Here are some tips from Emanuela Gorla, a usability and accessibility consultant at System Concepts.
Real world examples and expert tips on the use of icons in apps and online, from usability and accessibility specialist Sophie Buda.