Easybank landing page just HTML, CSS, JS.

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Desktop layout looks great, it is responsive and mobile state looks great as well.

  Some suggestions would be:

  • The primary nav should be inside a header. That is why having this below markup would be really great:

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

  This way, all content of your page will be inside their own respective landmark element.

  • Remember that a website-logo is one of the meaningful images on a site so use proper alt for it. Use the website's name as the value like alt="easybank".
  • Those 4 icons could be hidden since they only act as decoration. Decorative images should be hidden for screen-reader at all times by using alt="" and aria-hidden="true" to the img tag or only aria-hidden="true" if the image is using svg.
  • You could use article tag for each of the article-card since it makes sense.
  • For each of the article links, the h3 should be the one nesting the a tag inside it and not the other way around.

  FOOTER

  • For the logo, since you are using svg you should add something like this on it to be readable by other screen-readers:

  <svg role="img">
     <title>easybank</title>
  ....
  </svg>
  

  • Each a tag that wraps the social-media icon should have either aria-label attribute or sr-only text inside it, defining where the link would take them. For example, you should use facebook as the value if the link would take the user to facebook.
  • Each of the social-media icon are decorative so use the method I mentioned above to hide them.
  • Those 6 links should have been inside a nav element since those are still your website's navigational links and also you should have used only 1 ul since they are all related. Use grid to place each item properly.
  • The .attribution could be placed inside the footer so that it will be inside a landmark element.

  MOBILE Hamburger menu should be using a button since it is an interactive component.

  SUPPOSING BUTTON IS USED

  • The button should have a default attribute of aria-expanded="false" and it will be set to true when the users toggles it and vice-versa.
  • The hamburger button should have either aria-label attribute or sr-only text inside it which defines what the button does. You could use aria-label="navigation dropdown menu"
  • The img inside the hamburger-menu should have been hidden since it is only a decorative image.
  • Lastly, the placement of the hamburger toggle and the dropdown is wrong. The dropdown should be placed after the toggle in the markup so that after toggling the button, the focus will be set next to the dropdown if navigated. Swap them up.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Jesús Alarcón•215

  @AlarconJesusPosted about 3 years ago

  @pikamart Hey! 👋, Thank you very much!, I appreciate your feedback, and I will take into account the suggestions to apply them in the project. Thanks.

  1