Audiophile e-commerce website (NextJs + StyledComponents + Formik)

Community feedback

• 

  

  Alex•2,010

  @AlexKMarshall

  Posted almost 3 years ago

  From a visual perspective, this does look very good. The site responds very well to different screen sizes, and zoom.

  However, there are some very serious accessibility problems that make this completely unusable for anyone using a keyboard or assistive technology like a screen-reader

  • Never add onClick handlers to things that aren't a <button> - your quantity inputs, the +/- spinners and the cart button itself are all unusable
  • The cart modal is missing all elements that make a modal work. It doesn't trap focus, prevent scrolling behind, or make the rest of the site inert. I'd suggest using a 3rd party tool for dialogs to avoid these problems. Reach UI, HeadlessUI and RadixUI all have good ones
  • The checkout button, arguably the most important button on an eCommerce site doesn't have a visible focus indicator
  • You have motion animations all over the place, but you don't switch them off for people with prefers-reduced-motion - this is a serious problem for people who can be made dizzy or to feel sick from these kind of animations. Also for people who just want to switch them off because they find them annoying
  • Your images seem to all be set as background images. Particularly for a product image, it's critical that they have suitable alt text, so these must be real images in the dom, not just CSS backgrounds. They're not just for decoration

  00

  Marked as helpful