Fylo Data Storage solution using Grid Layout and Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop looks really great and the mobile layout as well.

  Some suggestions would be:

  • You don't really need to use a header on this one since the components itself is the main content. When using header tag as a primary landmark, you often want this to sit on its own row in the markup:

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

  You can use this as well as sectioning in an article. But for this one, main is enough to wrap all the things, you can just replace the header with a div.

  • I don't really know if the website-logo should act as a link on this kind of component, since it looks only an image and not a link for me.
  • Website-image needs to use alt="fylo". Avoid adding words that relates to "graphic" when using the alt value such as the "logo" word, it is already an image so no need to describe it as one.
  • Again, I don't know if those links after the logo should be a navlink or just button to control like a modal.
  • The a tag that wraps each icon should have either aria-label attribute or an sr-only element inside it. The text value should inform the user where this link would take them, like aria-label="cloud storage" for the cloud storage icon. But again, I don't know if they are links.
  • The img for each link should be hidden since they are just decoration so use alt="" and add an extra aria-hidden="true" attribute on the img.
  • Use p tag to wrap a text content and not just span. If you are going to use span then make sure that the span is inside a meaningful element like p tag.
  • An h1 is needed for a webpage, since there are no visible text that could be h1, the h1 would be an screen-reader only text. Meaning it will use like an sr-only class. You can search on that one.

  Aside from those, great work again on this one.

  Marked as helpful

  1

  ---

  

  João Guilherme Saporski•210

  @JSaporskiPosted about 3 years ago

  @pikamart thanks for the suggestions man. I really need to learn more about accessibility, it's definitely not my strong point hahaha. I appreciate your help :D

  0