This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: Solution URL
- Live Site URL: Live Site URL
- Semantic HTML5 markup
- Mobile-first workflow
During the challenge, I realized that screen readers couldn’t interpret the QR code on the website directly. So, my solution was to add a corresponding anchor that would take users to the same link when clicked on instead of relying solely on the QR code. Additionally, I added text within the paragraph that the user can use a QR code or link on the code to go to Frontend Mentor’s home page. Next, I made the link and additional text visually hidden by following CSS Tricks' visually hidden styling rule. While this challenge was simple, I was conscious of accessibility and what items I must implement to ensure the content makes sense to everyone.
-
CSS Tricks - Inclusively Hidden - This resource offers a quick overview of various methods to hide content and provides style rules for sr-only or visually-hidden classes.
-
Scott Hara - Inclusively Hidden - This resource delves deeper into the reasons developers hide content and provides solutions. It is the original source for the Inclusively Hidden article by CSS Tricks.
- GitHub - adriarodr
- Frontend Mentor - @adriarodr
I would like to express my gratitude to CSS Tricks and Scott Hara for their informative articles on visually hiding content. Their articles have been very helpful.