[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!