Skip to content
Submitted 4 months ago

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

haquanq ®️•1,585
@haquanq
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Expenses chart component
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

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 🙏

Community feedback

  • Osiel Hernández•190
    @xXOsielXxPosted 4 months ago

    @haquanq Hi buddy. How's it going?

    I was looking your projects and all of them are pixel perfect. That's awesome! Do you use any tool for doing that?

    One thing... Your solution titles... I think the idea is write something descriptive like this: "Responsive landing page using CSS Grid". That communicates the type of page you made and tells us something about the technologies you used. Correct me if I'm wrong. Anyway, keep that detail in mind.

    Take care and... Happy coding!

    0
    haquanq ®️•1,585
    @haquanqPosted 4 months ago

    @xXOsielXx

    Hi, i am good :D.

    I was using Figma along coding. Thanks for your advices.

    Happy coding!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord