FAQ accordion card solution

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!