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 use 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.
When using a graphic as a heading, enclose the image tag in the appropriate structural markup, e.g.,
<h1><img src=”jimbyrnelogo.jpg” height=”48″ width=”171″ alt=”Jim Byrne Accessible Website Design”></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.
I provided feedback on the WCAG 2 (as representative of Guild of Accessible Website Designers) have two decades of experience and worked with hundreds of organisations.
07810 098 119