FAQ Accordion Card || Html && Pure Css

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks really great, it is responsive and the mobile state looks great as well.

  Carlos already gave feedback on this one, just going to add some suggestions as well:

  • Don't use overflow: hidden on the body tag, try to inspect the layout while the styling is active, you will notice that you can't scroll because of that style props.
  • Always have a main element to wrap the main content of your page. On this one, the .card should be using the main instead of article.
  • For those decorative images that are using alt="", add an extra aria-hidden="true" on it so that it will be totally hidden for screen-reader users.
  • For those accordion, using a tag is not really intended for those because you only use a tag for links and that is not a link at all. Instead , use the details element for the accordion as they are intended to be used that way and it is accessible right from the start so you won't have to manipulate attributes of the element.
  • The arrow-icon should be hidden since it is only decorative image. Only use descriptive alt for images that are meaningful and add content. Otherwise use alt="" and aria-hidden="true" on the img.

  Aside from those, great job again on this one.

  Marked as helpful

  2

  ---

  

  CyrusKabir•1,885

  @CyrusKabirPosted about 3 years ago

  @pikamart hello my dear friend . thanks for your great feedback the only reason for using <a> tag it was just for have open and close functionality with css you know using :target and this stuff Otherwise, I will follow all the points you said both in this project and in the next projects. Thank you again.

  1
• 

  Carlos•1,110

  @Carlos-A-PPosted about 3 years ago

  Hello, Style-wise, this looks great and responsive.

  • Something that I noticed was that the first accordion in mobile view is unclickable unless I tab to it. It looks like it was a height issue with your .card_visual-content div. Something I did differently was adding position relative to my card-wrapper div and added position absolute to my child icon div. This allowed me to move the child freely around the parent div. I also added padding-top and a background image of the shadow

  Marked as helpful

  1

  ---

  

  CyrusKabir•1,885

  @CyrusKabirPosted about 3 years ago

  @Carlos-A-P thanks for your feedback my dear friend I try to look to that and fix that. thanks again ♥

  0