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…


This content originally appeared on DigitalA11Y and was authored by Raghavendra Satish Peri

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:

  1. The best approach is to remove the H1 from the logo region. Provide a heading level one in the main content of the page.
  2. Start the main content of the page with a heading level 2 “H2”.
  3. 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 role="banner" or <header>), and the navigational menu elements should be wrapped using the nav landmark.


This content originally appeared on DigitalA11Y and was authored by Raghavendra Satish Peri


Print Share Comment Cite Upload Translate Updates
APA

Raghavendra Satish Peri | Sciencx (2023-03-15T11:48:39+00:00) The H1 Conundrum: Understanding the Challenges of Heading Level One. Retrieved from https://www.scien.cx/2023/03/15/the-h1-conundrum-understanding-the-challenges-of-heading-level-one/

MLA
" » The H1 Conundrum: Understanding the Challenges of Heading Level One." Raghavendra Satish Peri | Sciencx - Wednesday March 15, 2023, https://www.scien.cx/2023/03/15/the-h1-conundrum-understanding-the-challenges-of-heading-level-one/
HARVARD
Raghavendra Satish Peri | Sciencx Wednesday March 15, 2023 » The H1 Conundrum: Understanding the Challenges of Heading Level One., viewed ,<https://www.scien.cx/2023/03/15/the-h1-conundrum-understanding-the-challenges-of-heading-level-one/>
VANCOUVER
Raghavendra Satish Peri | Sciencx - » The H1 Conundrum: Understanding the Challenges of Heading Level One. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/03/15/the-h1-conundrum-understanding-the-challenges-of-heading-level-one/
CHICAGO
" » The H1 Conundrum: Understanding the Challenges of Heading Level One." Raghavendra Satish Peri | Sciencx - Accessed . https://www.scien.cx/2023/03/15/the-h1-conundrum-understanding-the-challenges-of-heading-level-one/
IEEE
" » The H1 Conundrum: Understanding the Challenges of Heading Level One." Raghavendra Satish Peri | Sciencx [Online]. Available: https://www.scien.cx/2023/03/15/the-h1-conundrum-understanding-the-challenges-of-heading-level-one/. [Accessed: ]
rf:citation
» The H1 Conundrum: Understanding the Challenges of Heading Level One | Raghavendra Satish Peri | Sciencx | https://www.scien.cx/2023/03/15/the-h1-conundrum-understanding-the-challenges-of-heading-level-one/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.