FAQ accordion project where I used HTML, CSS and JS to complete

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  👋 Hi Laura!

  🎉 Congratulations on finishing your first challenge! Hopefully, you are having fun building it and learning something new! I have some feedback to help you improve this solution:

  • Accessibility
    • Create a custom :focus-visible styling to any interactive elements (button, links, input, textarea). This will make the users can navigate this website using keyboard (Tab) easily.
    • For any decorative images, each img tag should have empty alt="" and aria-hidden="true" attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all images are decorative only.
    • I would recommend using the native HTML tags (details and summary) to create the accordion. This will handle the accessibility and opening and closing of the accordion panel. For JavaScript, all you have to do is create a function that will close the accordion panel if the user opens another accordion. This will make the user experience much better.
    • Use rem or sometimes em unit instead of px. Using px will not allow the users to control the size of the page based on their needs.
  • Best Practice
    • Omit the type attribute from the script tag. Click here to see the reference.

  ---

  • Other
    • You are using the JSS tag, do you know that JSS is a framework?
    • Currently your solution is not responsive which means that it is not finished yet, so try to make it responsive.
    • I notice some lorem ipsum..., so my question is, why don't use the given text?

  One last thing, I would recommend doing the HTML and CSS newbie challenges. This will make you comfortable with the workflow first and after that, you can try harder challenges.

  That's it! Hopefully, this is helpful!

  1

  ---

  

  Laura Griffis•30

  @gastonavePosted almost 3 years ago

  @vanzasetia Thank you so much for all your help on this! These tips are the things I have a hard time finding in my research so I am super excited you provided some of the tips. And I forgot about the responsive portion of this so I will be going back to finish that.

  I also used some lorem ipsum text on a few of the drop downs because I did not see where the rest of that text is. I could only see the design image which only had one drop down showing. Is it somewhere else in the documents that I may have missed?

  I cant tell you how much I appreciate the help!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 years ago

  @gastonave Glad to know that you find it helpful! You can show your appreciation by marking my feedback as helpful.

  About the text, every time you start a challenge you will be downloaded the zip file and it should contain the index.html file. Inside the index.html file, it should contain all the text.

  Marked as helpful

  0

  

  Laura Griffis•30

  @gastonavePosted almost 3 years ago

  @vanzasetia Great, thanks, I saw the html file for the second one I started but not for the first one.

  0