faq-accodion-card-HTML-CSS-JS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop is smaller than the design but it's fine for now I guess, it is responsive and the mobile state looks great.

  Some suggestions would be:

  • Avoid using vh unit on height property on a large container like the main on this one , as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Also, don't use width: 100vw as this create an extra vertical scroll since this doesn't account the vertical scrollbar's size.
  • All the images used in here are just decorative since they are only vector. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • For every button it would be great to have a default attribute of aria-expanded="false" and when the button is toggled, this will be set to true and vice-versa. You will be needing to use .setAttribute. This way, users will know that is has expanded/shown something.

  Aside from those, great work again on this one.

  Marked as helpful

  0

  ---

  

  Amandeep715•80

  @Amandeep715Posted about 3 years ago

  @pikamart First of all thanks a lot for your feedback. It was very informative, actually this was my first time learning about ARIA and now look more information about it on MDN.

  1