Submitted almost 3 years ago

Order Summary Component | HTML CSS Sass

#accessibility#lighthouse#sass/scss#bem

Vanza Setia• 27,855

@vanzasetia

Preview site View code

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello Everyone! 👋

Newbie challenges are tricky challenges. 😬

Now for the questions:

I used button element for Change and use anchor tags for Proceed Payment and Cancel Order. Do you think it's true or not?
For the Order Summary words, do you think it can be a heading or other tag?
I tried to use TalkBack on my Android phone and I understood what it has spoken to me. Could you try it using your screen reader? I want to know that you understand what's going on.

Of course, other comments or any issues that you may find, feel free to write it down.

Also if you want me to give my feedback on your solution, feel free to give me the link on the community feedback! I will be glad to help you too!

Thanks!

Community feedback

Grace• 27,950

@grace-snow

Posted almost 3 years ago

I think this is a great solution! If it was a multi-step form, I'd be more tempted to use buttons for those elements, but it's fine as it is for an individual component. Those kinds of decisions you can only make once it is part of a larger journey so you know what they are doing.

The only thing I would change on this is the faint color on focus on the Change CTA and the Proceed button, particularly when focus-visible. I would keep the original color on focus-visible, as at the moment it is making it hard to read when I'm focused with keyboard

Marked as helpful

Vanza Setia• 27,855

@vanzasetia

Posted almost 3 years ago

@grace-snow Thanks for your feedback once again!

Hafizan Adli• 1,190

@hafizanadli

Posted almost 3 years ago

Wah keren, hampir perfect!!

Marked as helpful

Vanza Setia• 27,855

@vanzasetia

Posted almost 3 years ago

@hafizanadli Terima kasih!

Azka• 480

@Azkanorouzi

Posted almost 3 years ago

good job ✌️🙌 please take a look at my solution for this challenge and let me know if you have any feedback I would be appreciate 😊 your feedback has been helpful for me last time .

Marked as helpful

Vanza Setia• 27,855

@vanzasetia

Posted almost 3 years ago

@Azkanorouzi Thank you, I am happy to help you 🤗.

Chamu• 12,970

@ChamuMutezva

Posted almost 3 years ago

This is tricky indeed. The order summary i would make it a heading , an h2 in this case. My first heading an h1 would be visually hidden - would give a general idea of what the site is all about. The anchor and buttons here are really giving me a tough time. Do there open external pages? I will go for buttons for all of them.

Vanza Setia• 27,855

@vanzasetia

Posted almost 3 years ago

@ChamuMutezva I don't know, but I followed what Grace has said on this solution from other person

Chamu• 12,970

@ChamuMutezva

Posted almost 3 years ago

@vanzasetia, it makes sense to have the proceed as an anchor

Please log in to post a comment

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