CODEWITHSUNDEEP
htmlaccessibilitywcag2.0
kaylithin
kaylithin

Reputation: 33

For accessibility can a website have an H1 on a site logo and an H1 on a text headline?

Typically you only want one H1 per page for screen readers. But I have seen a trend where the site logo in a header has an H1 around it and a separate main headline on a page also has an H1. Is this acceptable or is there a better way to handle this?

Upvotes: 2

Views: 1674

Answers (1)

GrahamTheDev
GrahamTheDev

Reputation: 24825

WCAG compliance

From a perspective of WCAG and compliance, this is acceptable, you can have multiple h1s on a page, it is still in the HTML5 spec.

Conventions for headings

However, convention and best practices advises there is only one, visible <h1> on a page and that <h1> should accurately describe the current page.

The main reason for this is assistive technology, namely screen readers.

Someone who uses a screen reader is likely to navigate by sections, links or headings using shortcuts. Obviously in this cases headings is the bit we are focusing on.

They use the keys 1-6 to cycle through headings. When landing on a page the first thing they might do is press "1" to get to the main heading on the page.

If pressing "1" instead reads out the site logo it might be confusing and they may think the site structure is wrong and instead start cycling <h2>s with the "2" key. This may take them a little while to realise the page structure is not typical.

It may only take a minute or so before a screen reader user realises the strange structure of your site, so it doesn't make it inaccessible, but in terms of user experience it isn't great.

Convention for company logos as part of the <header>

The convention for a logo is to wrap it in a hyperlink and point it to the home page. Expected behaviour is key for accessibility.

The simplest form of this would be:

<header>
    <!-- logo wrapped in anchor pointing to home page -->
    <a href="homepage">
        <!-- notice the alt text is the purpose of the link so the link has descriptive link text. -->
        <img src="yourlogo.jpg" alt="{company name} homepage" />
    </a>
    <nav>
        <!-- ul with all nav items -->
    </nav>
</header>

So whoever started that trend needs to stop it, it doesn't even make sense from an SEO perspective so I am not sure why someone started that if it is indeed a trend!

Upvotes: 1

Related Questions