Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  👋Hi Tawanda!

  I have some feedback on this solution:

  • The headings should have 700 font weight in order to make them look similar to the design.
  • For any meaningless or decorative images like illustration in this case, you should empty the alt="" attribute.
  • The first Get Started button should be an anchor tag in my opinion, since button with type of submit is used when it is a child element of form element.
  • The social media icons on mobile view is too small and the phone, email, and location icons is too big.
  • For the logo, the value for the alt attribute should be just the name of the company, which in this case Fylo, don't be verbose.
  • In my opinion, the alt for the profile image, you can fill it with the name of the person.
  • The input email should have padding, because right now the cursor start from the very edge.

  That's it! Hopefully this is helpful!

  Marked as helpful

  1

  ---

  

  Tawanda•125

  @TBanda27Posted over 3 years ago

  @vanzasetia thanks a lot.

  I however need clarification, one of the errors read "links must have discernible text" How do i rectify such an error?

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 3 years ago

  @TBanda27 Add aria-label property to all links that doesn't have any text, like this:

  <a
    href="https://www.twitter.com"
  aria-label="Twitter (open in new window)."
  target="_blank"
  rel="noopener">
    <img src="./path/to/twitter.svg" alt="" aria-hidden="true">
  </a>
  

  Please remember that you don't need to write Go to, just write name of the page same as images, you don't need to write image of. The screenreader is smart enough to know that it is a link or an image as long as you use to correct HTML markup.

  rel="noopener" for security and aria-hidden on decorative image to make sure the VoiceOver ignore that image.

  That's it! Hopefully this solve the issue!

  1