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.

Take my Web Accessibility Online Training Course - WCAG 2.1 Compliance

Learn to design and manage WCAG compliant, accessible websites with my online course

You will learn both the techniques of accessible website design and an entire ‘framework for thinking about the subject’. It will equip you with the skills to understand, identify and fix issues any accessibility issues you come across. Watch the free videos to get a taste of what is on the course. Video image from Web Accessibility Online Training Course - WCAG 2.1 Compliance

Related content

Related content

View a list of all blog posts.

Written by :

Avatar of JamesByrne

Let's Chat

07810 098 119