Regular HTML, CSS, and JavaScript

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted almost 4 years ago

  Hey, awesome work on this one. Layout in desktop looks really great, the responsiveness could be better since at point 920px going down to the mobile breakpoint, horizontal scrollbar appears. The mobile layout is great as well.

  Some suggestions would be:

  • Avoid using height: 100vhon a large container especially the body tag as this limits the element's height based on the screen's height. Instead use min-height: 100vh this takes full height and will expand if needed. You can remove the width: 100vw on the body tag as well.
  • The decor image could have aria-hidden="true" so that it will be totally invisible for all tech.
  • The accordion works but it is not accessible right now. When creating interactive components, use interactive elements. Using div for the toggle is not great, use button on it. But if you were to use button on this one, you would need to set a aria-expanded attribute on it, which the value depends if the button is toggled or not, setting using javascript.
  • Another approach is to use details element for the accordion, this is much accessible and you don't need to configure its attribute or state.
  • The faq question should not a heading tag.
  • The dropdown-icon could use aria-hidden="true" as well.

  Aside from those , site looks great.

  10

  Marked as helpful