Easybank landing page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, it is responsive though you can made some section better like on the article section, going from desktop to mobile breakpoint in dev tools, each article image are really huge, you could have made like a 2x2 column so that the image is properly contained, same with the 4 icons below it, you could use 2x2. Mobile layout however looks great.

  Some suggestions would be:

  • Those decorative images that you used could have used an extra aria-hidden="true" attribute so that they will be completely hidden for screen-reader user.s
  • Now, there are lots of element that are not inside a landmark element. A typical layout of a site looks like:

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

  This way, all element that has content are inside their respective landmark elements.

  • Website-logo- link a tag should either use aria-label or screen-reader only text inside it, that defines where this link would take the user. Since typically a website-logo links to homepage, use "homepage" as the value for what ever method you will use.
  • Website-logo img should be using the website's name as the alt like alt="pod". Remember that a website's logo is meaningful so always make sure it uses the proper alt value.
  • On the article section, you could have used article tag for each of those cards since it makes sense right.
  • When wrapping a text-content do not just use span to wrap it, use meaningful element like a p tag if it just a regular text or heading tag if it is an heading.
  • I would use heading tag on the person's name since they are the ones that each article is all about.

  FOOTER

  • Same goes for the website-logo-link, use the method I mentioned above.
  • The website-logo svg should have a title element inside it:

  <title id="footer-web-logo">easybank</title>
  

  then your svg should have aria-describedBy and the value for that attribute will be the id of the title element.

  • 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.
  • Each svg inside the social media link should be hidden since they are only decoration so use aria-hidden="true" attribute on them.
  • Same for the website-logo it should use the website name as the alt value.
  • Those 6 links could have used a single ul since those are related links. Also you can wrapped the single ul inside a nav since those are still your website's navigational links.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Again, 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.
  • The placement of the toggle and the dropdown is incorrect. The toggle should be placed "before" the dropdown, so that the focus will be next to the dropdown if the button has been toggled. Swap them up.

  Aside from those, great job again on this one.

  Marked as helpful

  1

  ---

  

  Stephen•140

  @TechieStephenPosted about 3 years ago

  @pikamart fixed it. Thanks for taking your time to do this.

  1
• 

  soransh singh•1,025

  @soransh-singhPosted about 3 years ago

  This looks great you have done great job.

  Just before the breakpoint in desktop design, In footer the social media icons are overlapping the list next to them. Other than that everything is great.

  Marked as helpful

  1

  ---

  

  Stephen•140

  @TechieStephenPosted about 3 years ago

  @soransh-singh oooh thanks will work on that.

  0