responsive solution with html css js

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Hi

  You need to make this accessible. It's really hard to use at the moment because you've only made a tiny image a click target, and you've not used any interactive elements. So keyboard users, for example, would not be able to open faqs.

  Instead, I suggest keeping your h2s on each question, but place a button inside. You can use all: inherit to inherit the styles of the h2. Place the question text and the icon inside that button (or make the icon a background img or pseudo element so it's not in the html)

  This would then become easily interactive for keyboard and assistive tech users, and it would be easier to click for everyone else ☺

  You would obviously need to change your js after changing the html structure. Instead of targeting next/previous element siblings, just place one class on the buttons .closest('. questions-container'). You can use the presence of that class to do all the rest in css.

  2

  ---

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Also, your solution breaks on mobile once you have questions open. Its really obvious on landscape but happens on portrait too.

  At first I thought it was just the woman image that's cut off at the top, but the questions get cut off at the bottom too as there is no overflow (scroll)

  If you've used height: 100vh; anywhere, thats probably the culprit. Change it to min-height so elements can grow

  1

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  Last thing - take the section off thats wrapping the two images at the start of your html. Section content is for larger chunks of meaningful content, whereas this is images that aren't even important enough to have alt descriptions. If it was a section, there would need to be a heading followed by meaningful text elements and/or images.

  I hope all these tips are helpful to you.

  Overall, your html structure is pretty good and it looks like you've done well to get the solution looking so close to the design. Just a few changes needed 👍

  1

  

  llennairek•145

  @llennairekPosted almost 4 years ago

  Waow ty for the great feedback Seems like I have a lot to do now :)

  Thanks again, for a beginner like me your feedback is greatly appreciated

  See you!

  0

  

  llennairek•145

  @llennairekPosted almost 4 years ago

  @grace-snow

  Thanks again for your feedback I did not know anything about keyboard accessibility so I learnt something today. I add tabindex to do it, this is what I found on MDN Seems working now

  thank you for the tip for the min-height instead of height, now my element can grow

  and I put a div in place of the section for semantics purpose!

  tanks a lot I learned today ;)

  my solution : https://faq-accordion-main-mocha.vercel.app/

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 4 years ago

  @llennairek tabindex isn't enough I'm afraid 😔 . Unless you use natively interactive elements (or add lots of extra attributes for roles and aria) , they still won't be accessible to all assistive technology users. The other option is switching to disclosure summary html elements and getting rid of all the js

  1

  

  llennairek•145

  @llennairekPosted almost 4 years ago

  @grace-snow ok ! Seems that I have a lot to learn in accessibility yet! changed it to buttons!

  0
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hello, llennairek! 👋

  Congratulations on completing your first Frontend Mentor challenge! 🎉 Great effort on this one! 👍

  One or two design tips I'd like to suggest are,

  • Adding overflow-x: hidden to the body to prevent any horizontal scroll bars from appearing along the bottom of the screen (which seems to happen when multiple FAQs are opened, for some reason).
  • Adding a little margin or padding between the edge of the screen and the top of the card so that it isn't touching the top of the screen when multiple FAQs are opened in the desktop layout. 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  llennairek•145

  @llennairekPosted almost 4 years ago

  @ApplePieGiraffe

  Hello and ty for your feedback much appreciated

  I like to check the details so your comment is important to me

  see you

  1