Accessibility: h1 on the homepage?
In terms of accessibility and document structure, what should be the h1 or main heading on the master page?
On other pages this is mostly straightforward: the page title is a good candidate for h1. But the home page is likely missing a title?
What would you like to do h1? logo? hidden title citing home page?
source to share
This is a pretty good and difficult question:
- If you want to wrap your logo inside your tag
<h1>
, be sure to add that logo to the link.
I had something like this:
<?php if ($homepage) { ?>
<h1><img src="..." alt="My Website" /></h1>
<?php } else { ?>
<a href="/"><img src="..." alt="My Website" /></a>
<?php } ?>
- You may prefer to have some kind of visible (or hidden)
h1
for the master page header to maintain a consistent web page structure on your website.
Placing the logo h1
on the logo will not cause the onscreen user to use headings to navigate through what they think will be the beginning of the content.
There is no general solution as it mainly depends on your site; i would focus on:
- with one
h1
containing the title of the page, - this one
h1
should be at the beginning of the content, - this
h1
one should not be within a link or should not contain a link.
If your homepage logo can answer these questions then insert your logo in h1
, otherwise use a specific title.
source to share
There should be something on your home page that contains the title of that page: a logo, text, an image containing a title, etc. Whatever it is: wrap it with a tag h1
to mark it as main in the header.
And if there is nothing (for example, just a full screen image with no text), you can put that image in h1
and write the page title to the attribute alt
.
source to share