Fylo Landing Page - Mobile First

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks great, just that some components like the hero-section's content are much smaller. The site is responsive and for the mobile state it is great though there is an extra horizontal scrollbar.

  Some suggestions would be:

  • Website-logo-link should need to use aria-label attribute or screen-reader element inside it. The value for whatever method you pick will be the place where this link would take them like aria-label="homepage" on the a tag.
  • Website-logo img should be using the website's name as the alt like alt="fylo". 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.
  • Right now, just an idea to practice more js, make a custom validation. I got this simple snippet of an accessible form you might see some new attributes being used but that is needed when making form elements or in general, making element more accessible. So if you have questions about this, you can just always leave a reply on this okay^^
  • Hero-section img is just decorative so hide it. Decorative image must be hidden at all times by using alt="" and extra aria-hidden="true" attribute on the img tag.
  • img inside the See how Fylo works should be hidden using the method I mentioned above.
  • Quotation image is also decoration as well as the right-side image.
  • Person's img should be using the person's name as the alt like alt="Kyle Burton". A component like this when a person's name and image are both present, use the person's name as the value as it is a meaningful image.
  • Also I forgot to mention earlier, in an input it needs to have a label to it. In my sample snippet you can see usage of screen-reader only label which you use if a label is not supposed to be visible visually.

  FOOTER

  • Website-image needs to use a proper alt like what I said earlier.
  • 2 icons for the website-information should be hidden.
  • The 7 links should be wrapped inside a single ul element since those are related to one another. Use grid to properly place them and also you can nest the ul inside a nav since those are still your navigational links.
  • list-style: none; for the social media ul.
  • 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.

  Aside from those, great work again on this one.

  Marked as helpful

  1
• 

  Vimukthi Rajakaruna•325

  @VimuPosted about 3 years ago

  @pikamart Thank You for your feedback,

  1