FAQ-Accordion Card

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Ugm the layout is very much different, when submitting or just creating website in general, try to make the layout same as the design as much as you can:>.

  Some other suggestions would be:

  • Avoid using height: 100vh on a large container especially the body tag, as this limits the element's height based on the remaining screen's height. Use min-height: 100vh instead, this takes full height but lets the element to expand if needed.
  • Always have a main element to wrap the main content of your page. This is landmark element that helps user to properly navigate your site. On this, use main on your .container instead of div.
  • Avoid using vh unit on css properties especially the height since this is not consistent, use rem instead.
  • Both img should be using alt="" and extra aria-hidden="true" attribute on the img. A decorative image needs to be hidden at all times by using the method I mentioned.
  • Using button alone to use on accordion is not accessible, you would need to add aria-expanded attribute on it as well. But if you don't want, use details element. This is a native element that is intended for accordions. It is much accessible and you don't need to configure anything else on it.
  • The img inside the button should have alt. Always remember to include the alt attribute on the img tag, otherwise assistive tech will read the source path of the image.
  • The question per accordion should not use a heading tag, just use regular p tag on it.
  • Lastly, just a quick tip, you can use ::before or ::after pseudo selector instead of using img element to show something.

  Aside from those, great again on this one.

  Marked as helpful

  0

  ---

  

  Mahnoor Khan•455

  @mahnoork18Posted about 3 years ago

  @pikamart thank you for such detailed feedback, much appreciated! i would definitely fix the issues and will keep them in mind in the future.

  0