huddle 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 and the mobile layout looks really great as well.

  Some suggestions would be:

  • Website img should use alt="huddle" a website image always uses the website's name as the alt value, since it is one of main content of your page. Also, avoid using words that relates to "graphic" such as "loco, icon, images.." img is already a graphic so no need to use those words to describe it.
  • Try it free should be using a tag or a button. Use interactive elements for interactive components.
  • if you remove the outline to an element, make sure to add another visual indicator on its :focus-visible state on the css. Indicator helps user to know where they are at when navigating your site, try using tab key on your keyboard to navigate your site, hard right because there are no indications. That is why always add, if you don't want to add, then don't remove the outline.
  • The img on the hero-section should be using alt="' and add extra aria-hidden="true" attribute on it. Since the image is just decorative , you must hide it at all times.
  • Avoid using multiple h1 on a page, use only at least 1 h1 per page.
  • These texts "1.4k+" and "2.7m+" should not be a heading tag. Making it a heading tag does not add any extra information or give information about the section. Use a p tag on them. Also, when a design text is bold, it doesn't always mean that they should be a heading tag.
  • Other images should be hidden as well using the above method. Vector images are just decoration.
  • Change other heading tags to use h2 and not h1.

  FOOTER

  • Website logo should be alt="huddle". Also, instead of creating an element to use Huddle word, you could use the svg code itself, embed it on the html and manipulate the fill attribute, that way, the word huddle on the svg you could change the color of it to white.
  • Social media links should be using their own a tags since they are links. Also it would be great to nest those inside a ul element, since those are "list" of links.
  • Each a tag that will wrap the social media should have aria-label attribute or an sr-only element inside it. The value of what approach you will use should be the name of the social media, example, on the facebook, the a tag will have aria-label="facebook", this way users will know where this link would take them. Using the sr-only approach is the preferred one, you can search it up on the net on how it is used.
  • It would be great to use form to nest the input.
  • input needs to have either an aria-label attribute or an label associated with is using an sr-only class. The value will describe what does the input does, a value could be "enter email to sign up for newletter".
  • Use button type="submit" instead of input.

  Aside from those ,great work again on this one.

  Marked as helpful

  2

  ---

  

  Anis•135

  @anisgoPosted about 3 years ago

  @pikamart thanks a lot man i appreciate your help :)

  0