The H1 Conundrum: Understanding the Challenges of Heading Level One
Today’s question was sent to us by Tobi. Going forward, we will be answering questions from our users in the form of blog posts. Please send your questions using the form on the “Ask a Question” page.
Here is an interesting question voiced by many of us whether to assign h1 tag to the logo or not.
Currently we have a conundrum with company logos and their business names. Right now our h1’s are taken by the company names which are hidden in the logo. I have two quick questions. 1) Is this a good practice or the h1 should be part of the content that changes with each page (i.e. Page Title)?
2) Should the company logo have any kind of place in the heading structure or just being part of a landmark such as a navbar is enough? Thank you for any insight you can provide.
In certain content management systems, it has been observed that the H1 heading is located in the logo region of the page, while the main heading is also provided with a heading level 1. Although this is not a failure of WCAG, it can be inconvenient for people with disabilities who rely on heading structures for navigation.
Here are a few ideas on how to tackle this:
- The best approach is to remove the H1 from the logo region. Provide a heading level one in the main content of the page.
- Start the main content of the page with a heading level 2 “H2”.
- Use two heading level H1s on the page. This is not a major inconvenience for assistive technology users.
To answer the second part of the question, the logo region needs to be wrapped inside the banner region (using
<header>), and the navigational menu elements should be wrapped using the nav landmark.