Skip to content
Submitted over 1 year ago

FAQ Acording Card (CSS-JS) 💚

ezecoder•870
@3eze3
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

Hello community, this project was complicated in the Js part because I feel that the code is not quite right, but the functionality is correct, and as for the design, if you can give me suggestions of what I can improve in my Css, I would appreciate it very much, and also my Js code, and html, I think it is correct and semantic, I did not use the details or summary tags, because I wanted a more personal design. And well as always you can tell me anything about my project and Happy coding. 🧡

Community feedback

  • Tryt4n•960
    @Tryt4nPosted over 1 year ago

    For accessibility you can add role="region for every accordion__box because all elements inside are related to each other. Then add aria-expanded="false" for every accordion__head and handle change state with JS when it's expanded/collapsed. Also for every <p class="accordion__description"> add id and then for corresponding <div class="accordion__head"> add attribute aria-controls="your_id".

    In your case user cannot use keyboard to navigate so there are two options:

    • change div class="accordion-head" for button
    • add role=button and tabindex="0" to <div class="accordion__head">
    Marked as helpful
    1

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