FAQ accordion card solution

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  Hi, Cas! 👋

  Congratulations on finishing this challenge! 👏

  It's possible to style everything with CSS. For me, the most challenging part is to position the box and the illustration. 😅

  Here are some suggestions for improvements.

  • I recommend using native HTML elements to create the accordions, details and summary. By default, they are accessible. Also, they have open-and-close functionality. The current accordion is not accessible by keyboard and screen reader.
  • Then, add custom :focus-visible styling to those accordions. This will let people who use a keyboard to navigate the site know where they are currently on the page.
  • If the image is a decorative image, then there should not be any alternative text (alt="").
  • Use the em unit for media queries. It adapts when the users change their font size setting. Here are some references.
    • @media - CSS: Cascading Style Sheets | MDN #accessibility_concerns
    • PX, EM or REM Media Queries?

  I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

  • Manuel Matuzović - Lost in Translation - YouTube
  • Andy Bell – Be the browser’s mentor, not its micromanager - YouTube
  • Stephanie Eeckles - Scaling CSS Layout Beyond Pixels - YouTube

  I hope this helps! Happy coding!

  Marked as helpful

  3

  ---

  

  Cas•220

  @iguanasplitPosted about 2 years ago

  @vanzasetia

  Hi, Vanza!

  Thank you very much for the detailed explanation and the resources, i will try to solve it using <details> and <summary> i had no idea there was an element that does this. Ive found it pretty surprising how at first glance HTML seems simple but it isnt, i'll definitely watch the videos! its been very fun and interesting.

  Thanks again for the advice, its been really helpful!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 2 years ago

  @iguanasplit Happy to hear that was helpful! 😊

  0