Skip to main content

Jim Byrne Accessible Website Design Glasgow for The Third Sector, Voluntary, Charities and Not for Profits

Accessible, Responsive Website Design
Jim Byrne Web Designer

Add structural meaning to simple image based headings

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.

Related content

Written by :

Avatar of JamesByrne

Give me a phone if you would like me to test the accessibility of your website:

I provided feedback on the WCAG 2, have two decades of experience and worked with hundreds of organisations.

07810 098 119

Alternative access to client feedback ››

Client Quotes

Loading Quotes...