FAQ Responsive layout accordion

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is responsive and the mobile state looks really great as well.

  Some suggestions would be:

  • Avoid using height: 100vh on a large container like the body tag 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.
  • All images used in here are just vector and just purely decoration. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • Right now, the accordion works fine when using mouse only but is limited to that. When creating interactive components, use interactive elements. By using div you are making it not-accessible.
  • Instead of div use button instead, but you will need to manipulate the aria-expanded attribute of the button if you don't wan this, you could just use details element. This is suited for accordions and it is already accessible so you don't need to manipulate an element.
  • Dropdown-icon should be hidden as well using the method I mentioned.

  Aside from those, site looks great.

  Marked as helpful

  1