Submitted about 1 year ago

FAQ Acording Card (CSS-JS) 💚

#accessibility#animation#jss#sass/scss#bem

Ezequiel Córdova Sotomayor• 870

@3eze3

Preview site View code

This is a solution for...

FAQ accordion card

HTML
CSS
JS

1newbie

View challenge

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• 940

@Tryt4n

Posted about 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

Please log in to post a comment

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