Insure Landing Page using Flex

Community feedback

• 

  Matthew Pierce•495

  @shake88juntPosted about 3 years ago

  Very good suggestions for organization and sematics. I appreciate it so much. A lot of the alt tags and such I am quite lazy to fill in. Although, I should treat these products more seriously to form good practices. Great idea to include the links inside <a> tags and use button tag for buttons. I usually just wrap all my content inside <main>, but I guess I could put a header above.

  0
• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is good as well as for the mobile layout. The responsiveness is great.

  Some suggestions would be:

  • The .navbar selector could have used header element. In a typical website, the upper portion that holds the website logo as well as the navigational links are inside the header.
  • The website logo in the header should have used alt="insure" since the img already has the text on it. Avoid adding words that relates to "graphic" like "logo, image, icon, picture..." as a value for alt attribute. Assistive tech will handle those for you.
  • The list of links in the header should have been inside the nav element. These are the primary navigation links of your website, always have it inside nav element. Also, use a tags on them, they are links right, better use proper html elements, especially when they are links:
  • After the header, always have a main element that will wrap the whole content. main element is a landmark that helps users to properly navigate your website. On this one, it will wrap the hero-section, going down to the cta-section. A normal html structure would look like:

  <header />
  <main />
  <footer />
  

  • The view-plans on the hero-section should have been using a tag as well. Also, do not use div alone when using as an element, to an element which is interactive. Interactive element should use button or a tags.
  • The alt for the hero-section img could have use better alt on it. If the img adds content to the website, use a descriptive alt value on it.
  • Avoid using multiple usage of h1 element. Always have at least only 1 h1 element.
  • Also on the we're different text, it should not be inside a header element. Since you are not using section or article element.
  • The alt for the icons on the we're different part should have been left empty like alt="". A good rule of thumb, if an img adds content the website, use a descriptive alt on it, but if the img just acts purely decoration then use alt="" on it.
  • how we work should have been using a tag as well.

  FOOTER

  • Website logo should have been using alt="insure" as well.
  • The social media links should have been using a tags since those are links.
  • The list of links in should have all used a tags and needs to be inside nav element, since those are navigation links of your website.

  MOBILE

  • The hamburger dropdown should have been using button element and not just div or img. Those elements are not accessible and wrong on this kind of component.
  • The button for the hamburger dropdown also should use aria-label="menu dropdown toggler" so that users will know what this button should do.
  • The button for the hamburger dropdown also should have aria-expanded attribute on it. This will be changed via javascript, this informs a user that a dropdown has expanded.
  • Also, clicking the hamburger dropdown, it removes the img element and only shows the alt text on it.

  Aside from those, you still did a great job on this.

  0

  ---

  

  Matthew Pierce•495

  @shake88juntPosted about 3 years ago

  @pikamart I honestly don't like the <button> tags because of the base styling

  0

  

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  @shake88junt Even if you don't like it, those are the proper tag to use, because if you don't use it, then the component is not accessible, and it is our job to make web accessible to everyone.

  Also on the button yeah, you could add:

  button {
    border: none;
  }
  

  So that the default style will be removed

  0