Repository navigation
[Accessibility/SEO] Multiple H1 tags and improper heading hierarchy on homepage #227
Description
🐞 Issue: Multiple H1 tags and improper heading hierarchy
📍 Location
Homepage: aboutcode.org
❌ Problem
While auditing the site's DOM structure, I identified that the homepage contains two <h1> elements, which violates semantic HTML best practices and accessibility standards.
- WCAG Violation: This violates WCAG 2.1 Success Criterion 1.3.1 (Info and Relationships). Assistive technologies use the
<h1>as the primary landmark to define a page's purpose. Multiple<h1>tags create ambiguity for screen reader users. - SEO Impact: Search engines prioritize the
<h1>to understand page relevance. Having more than one can dilute keyword ranking and confuse crawlers. - Improper H2 Usage: There are nine
<h2>tags present, many of which appear to be used for visual font sizing rather than defining logical content sections.
🔁 Steps to Reproduce
- Navigate to the aboutcode.org homepage.
- Open the browser DevTools Console.
- Run the following command:
document.querySelectorAll('h1, h2').length. - Observe that it returns 11 total elements (2 for H1, 9 for H2).
- Check the specific H1s:
document.querySelectorAll('h1').forEach(el => console.log(el.innerText)).- Result: One is the main title, and the other is the animated typing headline.
✅ Expected Behavior
- There should be exactly one
<h1>on the page that defines the core value proposition. - The animated "typing" text should be a
<div>or<span>styled to look large but semantically neutral. <h2>and<h3>tags should follow a strict, descending logical order.
💡 Suggested Fix
- Keep the primary brand title as the sole
<h1>. - Demote the animated Elementor headline from an
<h1>to a<div>or<p>with a specific CSS class for styling. - Review the nine
<h2>tags and convert those used only for styling into standard text elements with CSS classes.
🌟 Impact
- Accessibility: Provides a single, clear landmark for users of screen readers.
- Maintainability: Cleans up the Elementor-generated heading clutter.
- SEO: Strengthens the primary keyword focus for the homepage.
Note: I am a BTech Computer Science student and open-source contributor. I am interested in improving web accessibility and would be happy to help locate the specific templates to submit a PR for this fix!
Activity
dhiraj-143r commentedon Dec 21, 2025
I am interested to work on this will u plz assign me this issue
A1shalia commentedon Dec 22, 2025
@anish-devgit I would be willing to submit a fix for this issue.
dhiraj-143r commentedon Dec 23, 2025
I am working on it.
pranav5105 commentedon Dec 24, 2025
does he assigned it to you
pranav5105 commentedon Dec 24, 2025
hey @anish-devgit i understood the issue.Recently i solved this issue in my college project.Using of many h1 tags in single page can make difficulties to understand speccialy for visually impaired persons.So i will be able to solve this problem in neat manner,please let me know if i can take it up
devprashant19 commentedon Dec 24, 2025
Hi There. I would like to work on this issue. Please assign it to me.
My approach is as follows-
<h1>–<h2>elements and map them to actual content sections versus purely visual headings.<h1>for the primary brand/value proposition and demote the animated typing headline to a<div>or with an appropriate CSS class.<h2>tags by preserving only those that introduce real sections and converting decorative ones into semantic-neutral elements styled via CSS.<h1> → <h2> → <h3>) to accurately reflect content structure.im-anishraj commentedon Dec 25, 2025
Thanks everyone for the interest 🙌
Since I opened this issue, I’ll be working on the fix and will submit a PR soon.
If maintainers prefer someone else to take this up, please let me know.
AnikeshAnilkumarLathe commentedon Jan 21, 2026
I would like to work on this issue.
gyanranjanpanda commentedon Feb 7, 2026
I've created a fix for this issue in the Docusaurus-based website repository (aboutcode-org/www.aboutcode.org).
PR: aboutcode-org/www.aboutcode.org#126
The fix ensures:
Note: This fixes the new Docusaurus site. The live WordPress site at aboutcode.org will need a separate fix via CMS admin access.
mjherzog commentedon Feb 26, 2026
Closing because the WordPress version of this website will be replaced by the content from https://aboutcode-org.github.io/www.aboutcode.org/ very soon.