Web Access Centre Blog

Most of you won’t believe what I’m about to describe, and would never use heading structure in this way. This post isn’t for you, it’s for the people who believe that it’s OK to wrap several links inside a single heading tag, or in fact use one heading to enclose one or more other elements or types of content .

If you find this difficult to comprehend, you aren’t alone, it came as an enormous surprise to me too, but I’ve recently seen four different sites using one heading to enclose at least one other element.

The problem this causes is that because heading markup is meant to enclose a single entity, a heading, and screen readers announce the beginning, the end and the level of each heading, whatever is inside the opening and closing tags gets announced as a single item.

Example 1: several links inside one heading

When several links are placed inside a heading, tabbing to any of the links causes screen reader announcement of all links, so the user has no idea which link has focus. If you have access to a screen reader check it out yourself.

Link 1 Link 2 Link 3 Link 4

For those without a screen reader, the output when the focus is on Link 1,is “Link 1 Link 2 Link 3 Link 4 heading level 4 link”. Tabbing to the second, third and subsequent links produces identical output.

I believe that the web authors who created the live example, probably wanted to mark up the links to aid navigation. What they should have done is identify the purpose of the links, for instance “Site-wide navigation” and used that as the content for the heading markup, immediately before the first of the links. (Which of course should have been in a list.)

The code that produced this is:

<h4><a href=”#”>Link 1 </a> <a href=”#”>Link 2 </a> <a href=”#”>Link 3 </a> <a href=”#”>Link 4 </a></h4>

Other problems

The above example is among the worst that I’ve come across, but other mixed content within one heading can cause almost as much confusion, Recently encountered instances include:

1. Using heading markup to apply a given style to an entire paragraph, including one or more links. This has a similar effect for screen reader users as the multiple links issue, but with the added confusion that the whole paragraph sounds as though it’s a link.
2. Including an image within heading markup, alongside the valid heading text, (presumably to help with positioning). Any text value given to the image ALT attribute will be announced as part of the heading, even though it may have nothing to do with it.
3. Including a related link within heading markup, for instance a heading “News” and its related “RSS feed” link both inside the opening and closing heading tags. This almost sounds as though it would be a good idea, but it isn’t. The benefit of having the heading, and thus the topic of the RSS link announced when the link has focus, is cancelled by the mis-information that there’s no “News” heading only a heading for “News RSS feed”.

So please just use heading markup for heading content. Not to enclose all of the content covered by the heading, nor for styling, positioning or link context.