This weeks tips: add structural meaning to image based headings
Added on Friday 15 Aug 2003
Cascading Style Sheets allow a certain degree of control over font choice, line height, font size, and so on. But for many designers this limited control is still not enough - and they continue to images instead of text for their web page headlines.
Here is a tip for adding some structural meaning to those image based headings - a technique first suggested to me by Patrick H. Lauke as a comment on an article about make non-text elements accessible (http://www.mcu.org.uk/articles/alttext.html).
When using a graphic as a heading, enclose the image tag in the appropriate structural markup, e.g.,
<h1><img src="mculogo.jpg" height="48" width="171" alt="The Making Connections Unit"></h1>
For users of screen readers such as Jaws the text in the alt attribute will be recognised as a heading, thus retaining its structural meaning.