CODEWITHSUNDEEP
htmlaccessibilitysemantic-markuphtml-heading
Runnick
Runnick

Reputation: 715

Accessibility: h1 on the main page?

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?

Upvotes: 6

Views: 2977

Answers (2)

Adam
Adam

Reputation: 18807

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.

Upvotes: 3

Johannes
Johannes

Reputation: 67748

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.

Upvotes: 0

Related Questions