Easybank landing page with Html, css and vanilla Javascript

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop is good, and the mobile state seems fine. Though resizing, some elements are being too squished, especially the articles on the bottom part. You might want to adjust them, you could make a 2x2 layout for those in the responsive part before going in mobile layout, that would make the layout feel more great.

  Some suggestions would be:

  • The website logo in the header should have alt="easybank". The image itself already has the text, better using it. Also, avoid adding words that relates to "graphic" such as "logo, image, icon, picture".. as a alt value. Assistive tech will handle those for you.
  • The header links should be inside a nav and inside a ul element:

  <nav>
    <ul>
    { each link inside their own li element }   
    </ul>
  </nav>
  

  • request invite should be a link a tag and not button since it doesn't control anything in there. It would be button if it is modal, but it is more likely to be link.
  • The other request invite should be a tag as well.
  • On the articles section, it would be really great to make each article use an article tag and it should be inside a a tag:

  <a>
    <article>
     { element being wrapped by article }
    </article>
  </a>
  

  FOOTER

  • Website logo img tag should use alt="easybank".
  • The social media links should be wrapped inside their own a tag, because those are links. Each a tag should have aria-label pointing to what link it will go, like on the a that will wrap the facebook, it should have aria-label="facebook". They should be all inside a ul element as well, since they are list of social media links.
  • The other links should be inside a tag as well, but within the nav and ul like I mentioned above.

  MOBILE STATE

  • The hamburger menu should be using button element. Using img alone is not accessible.
  • The hamburger menu as well should have aria-label="hamburger dropdown toggler" like that, so that users will know what this button will do. It also should have aria-expanded attribute, changing the value of that in the javascript. That will inform the user that a dropdown has expanded.
  • The ordering of your hamburger dropdown toggler and the navbar links is wrong. The toggler should be before the navbar links in your html.

  Aside from those, great work.

  Marked as helpful

  1

  ---

  

  Nguyen Duy•245

  @koalalikecodePosted about 3 years ago

  @pikamart Thank you for all your advice, I appreciate it very much! There are some attributes you mentioned that I haven't heard before such as 'aria label' and 'aria expanded'. Thanks for your suggestions, I will improve my skills more.Happy coding!

  0