[BUG]: Critical HTML5, ARIA & CSS Validation Errors Across Multiple Pages

[KAYO-ult]

Description

The project currently contains several critical frontend validation and accessibility issues affecting HTML5 compliance, ARIA implementation, and CSS validation standards. These issues may impact accessibility, semantic correctness, browser compatibility, and maintainability.

I would like to work on resolving these issues comprehensively.

Issues Identified

HTML5 Validation Errors

• Missing alt attributes on <img> elements
• Invalid custom-element attribute usage
• Invalid value used for async attribute
• <div> element used in invalid parent contexts
• Open elements detected before EOF
• Invalid text/data placement in HTML structure
• Text nodes not allowed in the current element context
• Obsolete align attribute used on <div>
• Obsolete frameborder attribute used on <iframe>

ARIA Accessibility Issues

• role="tab" elements missing corresponding role="tabpanel" associations

CSS Validation Issues

• Invalid CSS selectors
• Invalid CSS identifiers
• Invalid CSS property values
• General CSS validation failures

Expected Improvements

• Improved HTML5 semantic compliance
• Better accessibility support (WCAG/ARIA)
• Cleaner and standards-compliant CSS
• Enhanced maintainability and browser compatibility
• Reduction in validator and accessibility warnings/errors

Proposed Fixes

• Replace obsolete HTML attributes with modern CSS equivalents
• Refactor invalid DOM nesting structures
• Add proper alt text to image elements
• Correct ARIA tab-panel relationships
• Resolve invalid CSS syntax/selectors/properties
• Fix improper async attribute usage
• Validate markup using W3C HTML & CSS validators

Additional Notes

Some issues are repeated across multiple pages, so the fixes may require component-level refactoring to ensure consistency throughout the project.

I am contributing under GSSoC'26.

[github-actions]

Thanks for opening this issue! 🎉 We'll look into it as soon as possible, estimated time for response is 5–8 hrs.

Don't raise PR unless assigned to you.

In the meantime, please provide all necessary details and context to your issue — screenshots or videos of your changes help speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your issue goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Resources which can help you know more about Github 👇🏻

1. End to End GitHub Beginner Playlist: GitHub Playlist.

2. Build your GitHub Profile: GitHub Profile Optimisation.

3. GitHub Handbook for dummies: GitHub Blog for Beginners.

[sanjay-kv]

lets work on a indivitual page first then lets see if this affect other elements then lets do bulk change, which page you wanna go first @KAYO-ult

[KAYO-ult]

lets work on a indivitual page first then lets see if this affect other elements then lets do bulk change, which page you wanna go first @KAYO-ult

I’d like to start with the Home/Landing page first since it usually contains shared/global components like navbar, hero sections, tabs, images, iframes, and reusable layouts.

Fixing validation and accessibility issues there would help identify whether the same problems are propagated across other pages/components before making bulk changes.

I’ll begin with:

• Missing alt attributes
• Invalid HTML structure/nesting
• ARIA tab-panel issues
• Obsolete attributes (align, frameborder)
• CSS validation issues affecting shared components

[github-actions]

👤 Issue assigned to @KAYO-ult.