Skip to content
Submitted over 2 years ago

Responsive FAQ with Accordeon

Alejandro Hernández Rosa•180
@Alexuva
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

This is a temporal solution for the JS of the accordeon

Community feedback

  • Zineb Boutaa•750
    @zineb-BouPosted over 2 years ago

    Hi there, since this is a temporal solution I am dropping some comments that may help you to improve your solution next time.

    1. On mobile screens, the text is overlapping, I think setting an explicit height may cause this kind of problem, so let the container shrink according to the text size.

    2. Anything that is clickable or has a hover effect means it’s an interactive element, the toggle arrow actually it’s a button, so you can wrap the <img> inside a <button aria-label=” toggle arrow”>.

    3. Illustration images are for decoration purposes, there is no information to convey so it's better to hide them from the screen readers using aria-hidden=” true”.

    4. <body> is not taking the total height when scaling down to mobile screens, I would recommend using min-height:100vh instead of heigh:100vh to avoid this problem.

    Good luck

    Marked as helpful
    1
    Alejandro Hernández Rosa•180
    @AlexuvaPosted over 2 years ago

    Thank you @zineb-Boy for the comments, it really helps a lot! Im not that experienced in responsive and overall accessibility, I got to work harder on that! so I really appreciate your feedback.

    0
  • Shashree Samuel•9,260
    @shashreesamuelPosted over 2 years ago

    Hey good job completing this challenge.

    Keep up the good work

    Your solution looks great however I think your card is missing a subtle box-shadow

    In terms of accessibility issues simply wrap all your content between main tags

    I hope this helps

    Cheers Happy coding 👍

    Marked as helpful
    1
    Alejandro Hernández Rosa•180
    @AlexuvaPosted over 2 years ago

    @TheCoderGuru Thanks for the tip! :D

    Happy coding!

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord