Responsive React app with THREE.js and animations

Community feedback

• 

  Raymart Pamplona•16,040

  @pikapikamart

  Posted over 3 years ago

  Hey, really really awesome work on this one. The site looks really great in desktop, though it is laggy on my end hehe (slow laptop). The site is responsive as well and the mobile state looks great as well.

  I might not review the whole page since it is a lot, but here are some for the homepage:

  • Website-logo is being treated as an interactive element with a cursor: pointer, hence it is better to nest it inside a tag with an aria-label or screen-reader element that points to where the link would take the user.
  • Website-logo-img should only use alt="audiophile". Avoid using words that relates to "graphic" such as "logo" and others. An img is already an image/graphic so no need to describe it as one.
  • Your navlinks could use a ul tag since those are "list" of links and it is helpful for users since screen-reader will announce how many items are there.
  • Use aria-current="page" to whatever link the user is at, for example when the user is on earphones use a aria-current="page" on the a tag for the earphones.
  • Do not directly type the wordings as uppercase on the markup, if you do this, screen-reader will read the text letter-by-letter and not by the wordings. Use only the lowercase version to write in the markup and instead use text-transform: uppercase on it.
  • Element usage on the cart is not accessible. Interactive components uses interactive elements. By using div you are making it not-accessible. You should have use a button on it with an aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="user shopping cart dropdown".
  • The cart-button as well should be using a default of aria-expanded="false" which will be set to true if the user toggles the button and vice-versa.
  • cart-svg should be using aria-hidden="true' since it is decoration only.
  • I don't know why this happens but when toggling the cart and using keyboard tab I am navigating a hidden links or button and I can't seem to find where is that. Try doing that, toggle the cart and use tab on the keyboard, there are invisible links or button.
  • remove-all on the cart should be button.
  • Also on the cart, it would be great when the cart is toggled, you are making a focus-trap inside the modal along with the cart-toggle so that user won't be navigation on other element when the cart is open, this will really help a lot. Remember including the cart-toggle in the focus-trap.
  • Always have a main element to wrap the main content of the page.
  • see product should be a link a tag and not button since it redirects a user to another page to see the product.
  • shop now should be a link as well, a tag.
  • svg inside the shop now should be hidden using aria-hidden="true". Always hide decorative images.
  • Avoid using multiple h1 on a page, use only at least 1 per page so change those into other heading tags.
  • Avoid using id attribute as a selector in css because it is a bad practice due to css specificity. Use class to target elements.

  FOOTER

  • Same with navlinks, it could use ul tag on it.
  • 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.

  MOBILE

  • Hamburger menu should be using a button element since it is a control. Again, interactive components uses interactive elements. By using div you are making it not-accessible.
  • Audiophile logo img is acting like a link but not using a tag. Use a tag to it to make it clearer for users. Interactive component remember.

  SUPPOSING BUTTON IS USED

  • The button will be using the method I mentioned using aria-label attribute or screen-reader element inside. The value will describe what does the button do. The value could be aria-label="navigational dropdown menu".
  • The button should have a default aria-expanded="false" attribute on it. It will be set to true if the user toggles the button.
  • The svg inside the button should be hidden, use mentioned method above.

  Those only, but seeing those lots of misused elements, not semantic , markup is really a problem on this one and I am hoping that when others tackle such libraries, those fundamentals of html must be solid, because the last thing you want to create is an application that is not accessible.

  But still, great job on this one.

  00

  Marked as helpful