Skip to content
Submitted over 1 year ago

FAQ Accordion - Gulp, SASS/SCSS, Accessibility

accessibility, animation, sass/scss, gulp
Szeri•60
@Szeri323
A solution to the FAQ accordion challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello I'm Szeri 👋, This is my solution. What do you think about it?

Technology💻:

  • HTML, SASS/SCSS, JavaScript
  • Gulp
  • NPM

Adventages🏅:

  • minified CSS and JavaScript code
  • optimalized images

Conclusion💡:

It was a very simple and at the same time very difficult project. I had to choose between writing entirely my own code or using <details> and <summary> tags and losing full control of the code. What I mean is that if you use ready-made code, you have to read a lot and know exactly what it does. During my first session, I chose the predefined tags and everything was fine. I styled them and started animating them. I used CSS animation and JavaScript eventListener. At first glance, everything was fine. On the first click, all sections were animated and accessibility worked fine, but... when I opened the same section a second time, the animation didn't work. In my readme file you will find a link to a very useful article that I received from Klrfl in the discord group. I knew this could be problematic and I was right, so I decided to write my own code that animates and triggers the animation when the button is clicked. I will give myself time and come back stronger to complete the task based on predefined elements, for now the job has been done and all assumptions have been met.

If you have any tips regarding my code or problem, please let me know.

Code

Please log in to post a comment

Log in

Community feedback

  • Fluffy Kas•7,655
    @FluffyKas

    Heyo,

    First of all, your solution looks really nice and it works well. The animations you added are great. Maybe it would a nice addition if only one answer could be opened at a time, and all the other opened answers would close when you open a new one.

    Unfortunately, it looks like you forgot to upload your readme file which is a shame, I would've liked to take a look! It's also useful to upload the original version of your CSS and JS, not only the minified version so other developers can take a look at your actual code (minified code is not really for humans).

    From what little I can tell, I would suggest the following small changes:

    • Remove alt tags from your images, there is no need for them (in a sense that the text saying plus or minus icon is in no way helpful to any user to figure out the functionality of the button itself). Your question button already has a text, but maybe it's not quite clear what it does without the visual cue of the +/- icon so perhaps adding an aria-label to the button is a good idea. I'm guessing a bit here, probably someone more well-versed in accessibility could suggest a good solution for this.
    • There are a lot of places where using pixels isn't really great. Most importantly, font-size. You shouldn't make an assumption that your users will use the default browser size of 16px. Using rem here would make sure that your font size scales correctly when those default settings are changed.

    Without looking at the code, I can't really say more, but I think overall you did a great job, well done!

    Marked as helpful

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