Advanced Accessibility: Fix contrast ratios and implement semantic HTML5 landmarks

[basantnema31]

Description

Several text elements over background images fail WCAG AA contrast ratio requirements, making them illegible for visually impaired users. Furthermore, the layout lacks proper <main>, <nav>, and <footer> semantic tags for screen readers.

Proposed Solution

I propose running a Lighthouse accessibility audit. I will add subtle text-shadows or background overlays to fix contrast issues, and refactor the <div> soup into proper semantic HTML5 landmarks.

I would love to work on this critical accessibility issue under the GSSoC '24 program! Could you please assign it to me?

[github-actions]

👋 Thanks for opening this issue! We appreciate your contribution. Please make sure you’ve provided all the necessary details and screenshots, and don't forget to follow our Guidelines and Code of Conduct. Happy coding! 🚀

[PranavAgarkar07]

Hi! I'd like to work on this issue under GSSoC 2026.

Approach: I will audit the current color palette using WCAG contrast checkers and adjust CSS color values to meet WCAG 2.2 AA standards (4.5:1 for normal text, 3:1 for large text) across all pages. Then I'll replace generic

containers with semantic HTML5 landmarks (, , ,

, , ) and add aria-label attributes to interactive elements like buttons, links, and form inputs, ensuring screen readers can navigate the page structure effectively.

I have experience with web development and accessibility best practices. Please assign me this issue.