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?

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.