Skip to content
Submitted almost 3 years ago

Ecommerce Product Page w/ SvelteKit, Tailwind & Typescript.

accessibility, svelte, tailwind-css, typescript
Antoine C•1,240
@mattari97
A solution to the E-commerce product page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hello everyone.

This was a very nice project where i took the time to think about accessibility.

I tried to give to the user the possibility so navigate with keyboard only. Using Shift, Shift+Tab, Enter & Escape keys.

Please test it yourself and and let me know if i missed something.

One thing i wonder is how does it feels to use a screen reader. It would be an amazing experience if i could try one but i have no idea how it works, or how to setup one and if there is an open-source screen reader.

Anyway, feel free to share you thoughts on my design/code.

Have a nice day/night. Peace

Code

Please log in to post a comment

Log in

Community feedback

  • Clarence Onumajulu•400
    @clarencejulu

    Hi Antoine, Your project is really impressive and looks so good to say the least. It's clear you put in a lot of time and effort. I really like what you did with the accessibility and it makes me want to add that to my future projects.

    Can I know how you added those sliding lines to your menu items by the way :)

    Keep up the good work man!

    Marked as helpful
  • Elaine•11,360
    @elaineleung

    Hi Antoine, this looks really well done, and I'm glad you built with this accessibility in mind, as that is also something I've been doing. I can see you put a lot of work and thought into this!

    I did test it out, and like you, I also wish there's a screen reader I can use to test out code; I tried with my OS but I don't think I know how to operate it well yet. Anyway, here are some things I noted when testing this out with the tab key:

    1. It works well in going between the thumbnails, which is good!
    2. When I hit back tab on the first thumbnail, I got taken to the main full size image; the problem was, I couldn't tab out of it, so I was stuck there 😅
    3. When tabbing to the number input for adding quantities, it would help if the focus style could be right on the buttons. Right now I can only see a blue line, which was a bit confusing to me at first
    4. Adding quantities to the cart worked well with the tab key, which is important

    I had to build a slider recently for a challenge, and here are some links that I found in my research that might be of use to you:

    How to build a more accessible carousel or slider, by Jason Webb

    If you must use a carousel, make it accessible, by Alison Walden

    Well done, and keep building! 🙂

    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord