🐞 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!
🐞 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.<h1>as the primary landmark to define a page's purpose. Multiple<h1>tags create ambiguity for screen reader users.<h1>to understand page relevance. Having more than one can dilute keyword ranking and confuse crawlers.<h2>tags present, many of which appear to be used for visual font sizing rather than defining logical content sections.🔁 Steps to Reproduce
document.querySelectorAll('h1, h2').length.document.querySelectorAll('h1').forEach(el => console.log(el.innerText)).✅ Expected Behavior
<h1>on the page that defines the core value proposition.<div>or<span>styled to look large but semantically neutral.<h2>and<h3>tags should follow a strict, descending logical order.💡 Suggested Fix
<h1>.<h1>to a<div>or<p>with a specific CSS class for styling.<h2>tags and convert those used only for styling into standard text elements with CSS classes.🌟 Impact