FAQ accordion card using ReactJS and Sass

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi, Felipe Chaves! 👋

  Congratulations on finishing this challenge! 🎉

  I have some feedback on this solution.

  • Good job on using interactive elements to create the accordion. But, it is still not fully accessible because there's no way that the screenreaders know that the accordion is exapanded or not. You need some ARIA attributes and JavaScript. So, I would recommend using the summary and details tags to create the accordion. They are accessible by default and have open-and-close functionality.
  • The arrow icons are decorative images. So, I would recommend leaving the alt="" empty. This way, screenreader users can focus on the actual content of the page.
  • One useful tip about image. The image is probably decorative if it does not add further meaning to the content.

  That's it! I hope you find this useful! 😊

  Marked as helpful

  2

  ---

  

  Felipe Chaves•240

  @loopchavesPosted over 2 years ago

  @vanzasetia Thank you so much for the feedback.

  I improved my code using summary, details, JavaScript and removed the arrow images in the HTML by putting them in the CSS.

  If you want to check it out, it's in this repository:

  Repository

  New solution URL

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @loopchaves You're welcome! 👍

  Good job on using the native HTML elements to make the accordions! 👏

  But, I would recommend updating the existing project by making some changes. Then, commit, and lastly, do git push to update the site and the source code instead of creating a new repository. This is why Git exists. It helps you to update and keep track of the changes that you have made.

  Thank you for adding my name to the README. But, since you decided to use the native HTML elements to create the accordions, there is no need for the ARIA (Accessible Rich Internet Applications) attributes.

  Let me explain, the first point of my feedback. I am trying to say that if you want to keep using button element then you need to use ARIA attributes and write some JavaScript to make it fully accessible. But, I recommend using the summary and details tags to create the accordion because it is much easier to do.

  As a result, "Implementing Vanza Setia hints to use AIRA and JavaScript." is not 100% accurate.

  Marked as helpful

  1

  

  Felipe Chaves•240

  @loopchavesPosted over 2 years ago

  @vanzasetia I'm sorry my english skills are bad. I usually use the translator.

  Now I understand what you said. I corrected the README, the repository name and description.

  I made two repositories to keep two possible solutions, with and without JavaScript.

  Thanks again. Feel free to give feedback.

  FAQ accordion card using JavaScript

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @loopchaves Don't worry! I use Grammarly to improve my English. My grammar is not good either. 😅

  As far as the improvements, you had done a good job of using summary and details. This is an easy way to make an accessible accordion. So, I don't think there's anything to be improved. 😉

  1