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.,

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.