Interactive Pricing component with slider accessibility

Community feedback

• 

  eruj22•410

  @eruj22Posted about 2 years ago

  Hi Abdur,

  I have tested your little app using keyboard, screen reader and accessibility tool. The only issue that I have found is too low color-contrast and this issue is fault of the design that you were following. I also looked through your code and it looks clear with high level of effort in the direction of a11y. I am impressed by your code. Really good job with this project. In the end, thank you for learning me a new thing, that is prefers-reduced-motion inside media queries.

  Keep up the good work and enjoy

  Marked as helpful

  1

  ---

  

  Abdur Rahaman•350

  @arbaivPosted about 2 years ago

  @eruj22 Thanks so much for the feedback 🙏 I learned about reduce motion recently from Kevin Powell's YT.

  I took a day to learn and add the a11y to the interactive elements. This is something I want to improve further on 🙌

  0

  

  eruj22•410

  @eruj22Posted about 2 years ago

  @arbaiv Today I have stumbled upon really good article regarding a11y that can help you on your journey: https://www.smashingmagazine.com/2022/09/wai-aria-guide/

  Marked as helpful

  0
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello @arbaiv, Congratulations on completing this challenge!

  Nice solution and nice code! Here's one tip about acessibility:

  Its really nice that you’ve used some animation and effects! Something to improve the accessibility its to add a media query reducing the motion.The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of non-essential motion it uses. Here’s the code for that:

  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
  

  ✌️ I hope this helps you and happy coding!

  Marked as helpful

  0