Accessibility (a11y) improvements and image optimization

**Is your feature request related to a problem? Please describe.**
Some complex and interactive UI components (for example, `ChapterMap` and chart-based views) currently have accessibility gaps. These include limited keyboard navigation, missing or insufficient screen reader support, and focus handling issues.
Additionally, some parts of the UI use raw `` tags, which miss out on built-in image optimization.

---

**Describe the solution you'd like**
- Run an accessibility audit using tools like Lighthouse or axe
- Fix low-hanging accessibility issues such as:
- Missing labels or ARIA attributes
- Keyboard navigation and focus traps
- Contrast issues where applicable
- Replace eligible `` tags with Next.js `` to enable lazy loading and responsive image sizing

All changes would be UI-focused, with no core logic or behavioral changes.

---

**Describe alternatives you've considered**
- Leaving accessibility improvements for a larger UI refactor
- Addressing issues only when reported individually

However, a small, scoped audit allows multiple issues to be fixed incrementally with minimal risk.

---

**Are you going to work on implementing this?**

- [x] Yes
- [ ] No

---

**Additional context**
This proposal focuses on incremental, low-risk improvements to accessibility, UI quality, and performance.
Happy to keep the scope limited to clearly identified issues from automated audits and manual checks.