Responsive Faq accordion secion made with CSS grid and CSS flexbox

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted about 3 years ago

  Hey, nice work on this one. For desktop layout, I think it looks fine, just needed for the proper font-weight to be used and also the svg's outline is overflowing, on the original, the outline should be cut. The mobile state looks fine as well.

  On your questions:

  1. Yep, working with images sometimes is hard specially when you need to position: absolute something but I think that you did great on this one!
  2. For the breakpoints, it depends sometimes on the design of the project that you are creating, sometimes it doesn't need to use breakpoints especially when you created the component really responsive. For me, when I use breakpoint, I typically go with 768px for the tablet and 1000px on desktop state, I always start now with mobile first approach. Sometimes this changes because like I said, it depends on the layout.
  3. You can if you want and there's nothing wrong with that. I use that when there is only a single component of the page and I want the whole body to occupy the full height.

  Here are some other suggestions for the site:

  • When including images on your site that acts only as decorative images, you should always use an empty value for the alt attribute and adding an extra aria-hidden="true" attribute on the img would be nice. On this one, the lady illustration should be using those attributes I mentioned since it is only decorative.
  • Just a remined, only use descriptive alt values for images that are really meaningful on the site and when adding the text, the text should not include words that relates to graphic such as illustration, image, icon since the img tag is already a graphic and no need to describe it as one.
  • Change those FAQ question from using h2 into using button or maybe just use a details element on this one. When creating applications or websites, if a component is interactive, always use interactive elements like button. I saw that you are using the div as a toggle for the content which should not be the case.
  • Those arrow-images should be hidden as well since it is only a decorative image. Use the above method I mentioned to hide it.
  • For each question's answer, those are only being hidden visually by the overflow and max-height but a user can still traverse those. If you need to hide an element, adding the visibility: hidden should be done and visibility: visible if it needs to be shown.

  Aside from those, great job again on this one. Let me know if you need any help.

  01