There are a few browsers (Firefox, Opera) that treat image alt text as if it were normal text on the page, when the image isn’t present. If the reader turns images off to save bandwidth, we can still visually treat the images by styling the alt text, and this could be especially handy in regards to site logos.
For example, while working on Rollyo, I marked up the site’s logo with an
<h1><img src="img/logo.gif" alt="ROLLYO" /></h1>
I don’t pledge allegiance to any specific markup convention for site logos, but with images turned off, you can see that Firefox treats the alt text “ROLLYO” as a level 1 heading (Figure 1).
- Figure 1
This is a nice way of keeping the visual hierarchy of things consistent, even in the absence of images. And yes, this does rely on the browser’s own built-in stylesheet, which customarily displays headings large and bold.
If you don’t agree with wrapping a site’s logo in a heading element (and I often go back and forth), then there’s another approach. Just add a few font styles for whatever element your logo happens to be sitting in (provided there is no other text in there as well).
For example, if it’s sitting in a
<div>, as it is here on SimpleBits:
<div id="logo"><img src="img/logo.gif" alt="SimpleBits" /></div>
Then adding a few CSS rules to that specific element would do the trick (Figure 2):
- Figure 2
When the image is there, no harm done. When the image isn’t there, then the alt text will be larger and bold, thus keeping a visual heirarchy consistent. At present, this will work in Firefox and Opera (AFAIK). But it’s really just a tiny little enhancement.
Related: See also this previous SimpleQuiz discussion regarding site and page titles.