Cluncky, needs remake

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in desktop seems fine, needed a little bit of more padding though. It is responsive and the mobile layout seems fine.

  Some suggestions would be: DESKTOP

  • The alt text for the header img should have been only alt="bookmark". Do not include any words that relates to "graphic" to the value of the alt attribute.
  • The alt text for the hero-section could have been left empty since it is just a vector and it doesn't really add content, like at the tabbed section, the images are almost the same, that is why adding a alt is not that useful on these ones.
  • On the features section, the tabs, adding a cursor: pointer would be great.
  • Since you are using button on the features section, it would be great to have a aria-live element that will announce the changes if a user selects a tag. Since button only is not really helpful at all. Also, if you want, this feature section is a tabbed interface content, this is a really accessible feature especially for assistive tech users. You can look at my implementation of tabbed interface in this challenge. Javascript as well is used to properly make the controls.
  • alt for the feature section images could have been left empty alt="".
  • more info on the feature section would need to be inside a a tag instead of button, since this will act a link that will put user in a site to view more about it.
  • On the extension section, the images of the browser could have used their names as the alt value like alt="google chrome".
  • The alt of the dots on the extension should been left empty alt="". One good rule of thumb when using alt attribute. If the image adds any content, make a descriptive alt text, if the image is just for decorative purpose only, leave it blank alt="".
  • On the faq section, using p tag as the dropdown toggler is not really accessible at all. You could have used a button element with aria-expanded attribute. Better yet, you could use the native details element. This is a really great html element, it is primarily used for dropdowns like this, it also have the native accessibility feature.
  • The svg on the arrow-icon on the faq should have been using aria-hidden because you don't want assistive tech to reach it since it is just decoration.
  • more info in faq should used a tag as well.
  • On the cta section, you used again h1 element. Avoid using multiple h1, it is best practice to only use 1 h1 per page.
  • On the form the error-icon svg should have use aria-hidden="true" since it not really adding content, visually only.
  • Also, to make it more great, it would be great to have an element with aria-live attribute so that when a user submitted a wrong email, the aria-live will announce that there is an error that the user made.
  • When a user submitted a wrong email, visually an error appears right, but users using screen readers won't know that, to be more accessible, what you could do is that, when there is an error the input element should get a aria-invalid="true" and aria-describedBy="id of the error message". Example pseudo code:

  const  p = query the error message;
  const email = query the email input;
  if ( email has any error) {
    email.setAttribute("aria-invalid", "true")l
    email.setAttribute("aria-describedBy", "id of the error message");
    p.classList.add("add the classlist to show the error message");
  } else {
    revert the arias
    email.removeAttribute("aria-invalid");
    email.removeAttribute("aria-describedBy");
  }
  

  This will create a bridge between the screen reader user and the browser if there are any errors. Also, it would be great that if the submission is good, the aria-live will announce that "form submission success" something like that.

  • On the footer section, since you are adding cursor: pointer to the bookmark logo, you are treating it as a link, nest it inside an a tag with aria-label="homepage". The alt of the img will be alt="bookmark".
  • The social media links in the footer should be inside ul element since it is a list of links of social medias.
  • Social media links should be inside a tag since it is a link, along with its respective aria-label like aria-label="facebook".
  • title on the svg for the social media, lose the word "logo" leave it only by the name of the social media.

  MOBILE

  • On the hamburger menu toggler, the aria-label on the element inside the button should be aria-label="hamburger menu toggler" something like that, to be more descriptive.
  • Adding aria-expanded attribute on the button for the hamburger dropdown as well, so that it informs users that the dropdown has appeared.
  • I saw a lot of usage of overflow: hidden on the html element. Do not style the html element, also you don't need to use the overflow on this one. You just need to find the element that is overflowing so that you could fix it. There are also lots of element that are not centered properly, I tried centering them, but I can't properly because of the overflow. You might want to check those ones out.
  • The close on the hamburger dropdown as well should have used button element, right now I can't close it using just keyboard or with screen reader. You need to check that one out.

  It might be a lot, but lots of my suggestions points to accessibility features which is really needed for every website. You might want to implement them or not, but making those will really help as a frontend developer.

  Still, you did a great job on this one. Well done.

  Marked as helpful

  1

  ---

  

  Džiugas Balčiūnas•190

  @DziugisLTPosted about 3 years ago

  @pikamart Thanks for all of this. I'll remake the entire page because I kinda lost it somewhere in the middle and just wanted to finish it then. I had a lot of bugs with overflow, and a very dumb implementation of container. I need to remake this from start to finish with a good structure. I'll get the pro version for figma files, so it would be easier to track all the padding and margin correctly. Nevertheless thank you for your comprehensive review and suggestions. I'll implement them :)

  1