Frontend Mentor | Responsive QR code component using React coding challenge solution

Solution retrospective

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

I'm proud that I could finish it in a day

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

I encountered issues with horizontal overflow and using figma

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

I would want help with the semantic markup of the solution.

Community feedback

@0xabdulkhaliq

Posted 4 months ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

QR iMAGE ALT TEXT 📸:

The QR Code Component involves scanning the QR code, the image is not a decoration, so it must have an alt attribute which should explain the purpose of the image.

The alt with qr_code_to_visit_frontendmentor may cause the accessibility devices to read out text with breaks caused by "_" character. For example it will announce as "QR underscore Code underscore..."

So update the alt with proper formatted text which explains like QR code to frontendmentor.io

Example: <img src="/images/image-qr-code.png" alt="QR code to frontendmentor.io">

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

@Achigyus

Posted 4 months ago

Thank you so much for the kind words and contribution @0xabdulkhalid. I have implemented the changes to the alt property of the img tag

Responsive QR code component using React