Monday, June 15, 2015

Firebug to the Rescue

Firebug to the Rescue
So I'm looking at a weather report online and next to the temperature I get this wiggly sign that's supposed to tell me something more about the day. Since it wasn't one of those obvious icons like a beaming sun, or a snowman, I hovered over the icon hoping to get a pop-up window that'll tell me what the icon stands for. It didn't work because the HTML image tag had the "alt" but not the "title" attribute.

That's when I switched on the debugger to see if the filename for the icon was descriptive. It was but not everyone who comes to your site is going to know how to do that. You can help your audience by simple including a descriptive title attribute like this:

<img title="FOG" alt="Weather Condition Icon" 
  src="/sites/all/modules/custom/angularmods/app/shared/wxicon/svgz/foggy.svgz?1">

Anyone who hovers over the icon image will get a small yellow pop-up with your text in it.

Post a Comment