Accessible bar chart, mobile-first, pixel-perfect w/ HTML & CSS & JS

What are you most proud of, and what would you do differently next time?

Hello 👋👋👋

Thanks to fronendmentor team, this challenge gave me an opportunity to learn more about accessibility when building custom component and it is fun! 😁😁😁

🚀 Built with

• Semantic HTML
• Pure CSS
• Vanilla JavaScript
• ARIA APG Guides

🐲 What i have done

• Built an accessible bar chart component with keyboard support using ARIA APG patterns, tested on desktop with NDVA, there will be an instruction for the first time navigating the bar chart.
• Used my own judgement to get 98% similar to the design without figma files.
• Overridden default focus outline visual (you can focus on each bar in the chart).

🐦 Things to improve next time

• Figure out a system to handle CSS font custom variables accross all components.

What challenges did you encounter, and how did you overcome them?

None 🐱

What specific areas of your project would you like help with?

Any feedback is appreciated 🙏