The Pushkin State Museum of Fine Arts - Accessibility Showcase/Playground

This is an a11y playground/showcase sample website made during Accessibility Unity learning course. Tested with macOS VoiceOver, keyboard-friendly. Only the main functionality presented, the goal was to tackle frontend challenges such as modals, forms, tabs, carousel, language, and theme switching, keeping everything as much accessible, valid and user-friendly as possible.

🔗 Deployed version

On Vercel - The Pushkin State Museum of Fine Arts

🌟 General excellence checklist

• 4x 100% Google Lighthouse report

• w3c Nu HTML Checker - passed with no errors

• Unit/integration testing - TODO

✅ A11y checklist

• 100% keyboard-accessible
• macOS VoiceOver tested and friendly
• No issues found by axe DevTools

• No errors found by Wave - Web Accessibility Evaluation Tool
• 100% Accessibility score in Lighthouse Report
• Server-side rendering enabled => main info and styles accessible with JavaScript disabled
• Fine on 200% zoom, managable on 500% (looks a bit weird though)
• Dark/light theme support
• WCAG 2.0 level AA compliant colours (both themes), validated with WebAIM Contast Checker
• Mobile not first but friendly

In addition: The a11y Project Check Your WCAG Compliance Checklist was used to self-validate and access accessibility and performance.

🧰 Stack and tools

• Next.js with TypeScript integration: React web framework
• Prettier + eslint: formatting
• Husky + commitlint: auto-linting commits with Husky for meeting the conventional commit format
• styled-components: styling
• Vercel: deployment.

⚙️ Run locally

1. Clone this repo

2. Install all dependencies:

$ npm install
# or
$ yarn

3. Run the deployment server

$ npm run dev
# or
$ yarn dev

4. Your app is served at http://localhost:3000/