Responsive FAQ Accordion Card Using CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job again on this new challenge. Site looks great in desktop, it is responsive as well and the mobile state looks great.

  Again, some suggestions would be:

  • You don't need to display: none the .attribution since that is a meaningful content of the page, instead what you want to do is that, on the body tag just add flex-direction: column and make the .attribute display: block again.
  • Decorative images on this challenge could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • On this challenge, you can use the FAQ as an h1 for now. But if you think it is not suited to be an h1 then make sure to add an h1 to the page as it is a requirement. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element.
  • Now, you don't want to wrap the FAQ inside with the dropdown, it should be sitting on its own row:

  <div class="body_container">
    <h2>FAQ</h2>  # own row
    The containers in here
  </div>
  

  • Using p tag or div to trigger the accordion is not accessible. Interactive components uses interactive elements. By using div you are making it not-accessible.
  • Instead on this, to avoid extra manipulation, you could use details tag. This is suited for accordions and it is accessible right away so you don't have to create extra things to make it accessible.
  • The dropdown svg should be using as well the aria-hidden="true" since it is decorative only.

  Aside from those, the site looks great.

  Marked as helpful

  1
• 

  Nikesh•90

  @NikeshGamalPosted about 3 years ago

  Thank you @pikamart for your detailed feedback. Your feedbacks are so detailed and helpful. Helped me a lot adapting better approaches . Appreciated a lot.

  1