Ecommerce page with card-preview

Community feedback

• 

  P

  Alan Ibarra•440

  @Ibarra11Posted about 2 years ago

  One thing I noticed is that the shopping cart button is not accessible via keyboard. It only works if you click on it, but it should also respond to the enter key that way someone that uses a keyboard can open it. When the modal is opened, it needs to trap focus in there meaning that a keyboard user wouldn't be able to interact with the things outside of it. And, when the modal is closed you should return focus back to the button that triggered the modal. For example, if the add to card button cart triggered the modal when the modal is closed the focus needs to be returned back the add to cart button. There is a lot of accessibility concerns that comes with modals, so in most cases people tend to use modals that other people have built and are reliable.

  Also, on the mobile navigation if you press tab to cycle through the interactive elements it takes about 6 tabs to reach the hamburger menu. I can still interact with the modal even thought you pushed it off the screen. One thing you can do is to use display: hidden when the user hasn't clicked the hamburger menu that way it is no longer on the screen and not interactive. However, I'm not sure how this will effect your animation. Another possible solution, would be to add tabindex="-1" on the links when the menu is not open and remove it when the menu opens. This is just an idea, I'm not sure that it will work.

  0