Accessibility: h1 on the main page?

Question

In terms of accessibility and document structure, what should be h1 or main heading on the home page?

On other pages it's mostly simple: title of the page is good candidate for h1. But on the home page there is most likely no title?

What would you want to make an h1 then? the logo? hidden title saying home page?

Wittie

You can wrap the logo in <h1> on home page. Something that I did on aslint.org – Raccoon

See also: Using <h1> on website name in HTML5 · Using a H1 logo in HTML5 · What should be the right h1 tag? – Addend

Answer 1

This is quite a good and difficult question :

• If you may want to wrap your logo inside your <h1> tag, then be sure not to enclose this logo in a link.

I used to have something of this kind:

 <?php if ($homepage) { ?>
    <h1><img src="..." alt="My Website" /></h1>
 <?php } else { ?>
    <a href="/"><img src="..." alt="My Website" /></a>
 <?php } ?>

• You can prefer to have a specific visible (or hidden) h1 for your homepage title, in order to preserve a coherent webpage structure within your web site.

Putting the h1 on the logo will not lead a screenreader user using the headings to navigate at what he would expect to be the start of the content.

There's no generic solution as it depends mainly on your website; i would focus on :

• having one h1 containing the title of the page,
• this h1 should be at the start of the content,
• this h1 should not be within a link nor it should contain a link.

If the logo of your homepage may answer those points, then enclose your logo in a h1, otherwise use a specific title.

Kymberlykymograph

why you wouldn't want link+h1? – Wittie

@Wittie Despite the fact that some screenreaders may have difficulties announcing the link or the heading, there's no accessible reason why the current title of the page might link to elsewhere or to the exact same page which would be very confusing. – Kymberlykymograph

Answer 2

There's got to be something on your homepage that contains the title for that page: A logo, some text, an image containing the title etc. Whatever it is: Wrap it in an h1 tag to mark it as the main title.

And if there isn't anything (e.g. just a fullscreen image with no text), you can still wrap that image into an h1 and write the page title into the alt attribute.

Siegfried