Ecommerce product page with focus on a11y

What are you most proud of, and what would you do differently next time?

• I learned about different aria attributes which will make screen readers aware about the state changes within the app
• aria-live, role="alert", role="status" were helpful to let screen readers know what is happening when they click button or there is an error submitting a form
• another important thing I learned regarding the popup within the app is to trap focus within the opened dialog box, so that keyboard users and screen readers have an idea on where the current active element is
• using the calc method was really helpful to figure out how to place the on hover border on nav links
• I learned a lot about how to build image slider
• I learned how to duplicate first and last item in the image list to create infinite slider
• And building the lightbox using the clone of image gallery was really fun

What challenges did you encounter, and how did you overcome them?

There were many items , popups and image slider to be included in the app. Making this app with a11y concerns were bit challenging. So, I divided the app into smaller components and worked on them individually and applied a11y related features on smaller components first. Then applied those same to the image sliders, light box modals etc.

What specific areas of your project would you like help with?

• Any feedback specially regarding the a11y are welcome
• I am learning on how to make web apps accessible to all users, so feedbacks are welcome