Improved accessibility: added ARIA, keyboard support, better contrast

[Ishuuu1213]

🔧 What This PR Does
This pull request improves the accessibility and usability of the CodeClip project by addressing WCAG compliance and adding support for screen readers and keyboard navigation. Specifically, it solves Issue #19 – Accessibility Improvements.

✅ Changes Made
♿ 1. ARIA Labels for Screen Readers
Added appropriate aria-label, role, and landmark attributes to key interactive elements (e.g., buttons, nav, input fields) to improve screen reader compatibility.

⌨️ 2. Keyboard Navigation Support

• Ensured all interactive elements (navigation links, buttons) are reachable using the Tab key.
• Added tabindex where necessary to maintain logical focus order.
• Managed focus states for accessibility (via CSS and JS).

🌈 3. WCAG Color Contrast Compliance

• Updated background and text color combinations to meet minimum contrast ratios (4.5:1 for normal text, 3:1 for large text).
• Verified dark/light theme toggles maintain compliant contrast for all elements.

🎨 4. Semantic & Accessible HTML

• Ensured proper semantic tags (, , ) are used.
• Improved heading hierarchy for better screen reader interpretation.

🧪 Testing

• Tested on Chrome, Firefox, and using VoiceOver/NVDA screen reader.
• Manually checked keyboard-only navigation.
• Verified contrast using WebAIM Contrast Checker.

📌 Related Issue
Closes #19 – Accessibility Improvements

[github-actions]

🚀 PR Preview: https://opensource-society.github.io/CodeClip/pr-preview/pr-89/index.html

[adityai0]

@Ishuuu1213 resolve merge conflicts