Flyo_landing Page

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great job on this one. Desktop layout is kind of shorter than the design right now but it's fine for now I guess? The site is responsive and the mobile state looks great.

  Some suggestions would be:

  • I see lots of html element sitting on its own with being nested in landmark. A typical structure of a site looks like this:

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

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

  • The website-logo-link a tag lacks extra information on where it would take the user. You would 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, since website-logo typically points to homepage, you can use "homepage" as the text-content or value.
  • Website-logo svg should have a title element inside it which is referenced by the svg's aria-describedBy you will use fylo as the value since the svg is the website's logo. Take a look at this link on what I said
  • 3 links could be inside nav since those are you website's navigational links.
  • I just noticed it by now, do not include the css inside the html make a separate file for it so that it will be easier to maintain and manage.
  • Always have an h1 on a page. Use h1 on the hero-section's heading text.
  • Nest the input inside a form so that markup could be clearer.
  • Your input's aria-describedBy right now is wrong. What you should have done is that have a form validation right, then have a error-message. That error-message will have an id which is referenced by the input aria-describedBy when the input is wrong.

  if ( input is wrong )
    input.setAttribute("aria-invalid", "true");
    input.setAttribute("aria-describedBy", id of the error-message);
  else 
    input.removeAttribute("aria-invalid");
    input.removeAttribute("aria-describedBy");
  

  • The get started should be a button with a type="submit" and not an a tag since it is not a link, it should be a button to submit the form.
  • Have a look at this simple snippet of mine about accessible form. You will the usage of the aria as well as an extra aria-live element that announces if the form submission is not a success, you can tweak it to add like a success message as well.
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden alongside with the alt=""
  • The See how Fylo works should be a link a tag and not being inside a span.
  • The svg inside the See how Fylo works link should use aria-hidden="true" so that it will be hidden properly.
  • 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.
  • Person's name could use a heading tag since the section is all about the person, better highlight them properly.
  • Same goes for the cta section form, use the suggested way I mentioned above.

  FOOTER

  • Website-logo-img should have alt="fylo".
  • Those 7 links should be inside a single ul element since those are related links and by creating their own ul, instead of users being given a proper length of list, they would get 2 separate.
  • Also if you used the ul on it, nest it inside a nav since it is still your website's navigation links.
  • Social media links could be inside ul since those are "list" of links.
  • 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.

  Aside from those, great job again on this one.

  0