Insure Landing page with Vanilla JS

Community feedback

• 

  Sebastian Luis Smuraglia•410

  @AngelGris76Posted about 3 years ago

  Hi @marvelousveronika.

  I just add a class to the body when button is "pressed". That class only contain one rule.... "overflow: hidden".

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great though you are missing the 3rd icon after the hero-section. The responsiveness is fine and the mobile layout, text are really big you might need to tone it down.

  Some other suggestions would be:

  • I wouldn't nest the website-logo inside the nav since it is not being treated as a link.
  • Website-logo img should be using the website's name as the alt like alt="insure". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • Also when using alt attribute, avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
  • Also looking at it, you don't need to create a separate navlinks for the mobile state, it would be better to reuse the primary navlinks so that your markup will be more cleaner.
  • Hero-image could use a more descriptive alt text rather than just alt="family".
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Each icon are just decorative so better hide it. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • When using heading tag, make sure you aren't skipping a level. If you use h3 make sure that h1, h2 are present "before" it.

  FOOTER

  • The nav should be wrapping the 4 list of links below and not the website-logo with the social media since those aren't your navigational links.
  • Same for logo, use proper alt like what I mentioned above.
  • Each a tag that wraps social media, it should have either aria-label attribute or screen-reader element inside it. The value for whatever method you will use should be the name of the social media like aria-label="facebook" on the facebook link a tag. This way, users will know where this link would take them.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Interactive components uses interactive elements. By using div you are making it not-accessible.

  SUPPOSING BUTTON IS USED

  • The button will be using the method I mentioned using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button and vice-versa. You will need to use .setAttribute method.

  Aside from those, great work again on this one.

  0