Design comparison
Solution retrospective
any feedback is appreciated. Thank you!
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi there! 👋
A few suggestions for improvements.
- Use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
- For your information, anchor tags are for navigation. The
<button>element is for an action like opening a modal, submitting a form, toggling an element, etc. It is essential to use the correct elements. - Alternative text for images should not contain any words related to "image" (such as picture, photo, logo, icon, graphic, avatar). It is already an image element (
<img>) so the screen reader will pronounce it as an image. - The alternative text for the avatar should be the creator's name.
- Don't change the
<html>or the:rootfont size. It can cause huge accessibility implications for those users with different font sizes or zoom requirements. Grace Snow explains the issue clearly—Should I change the default HTML font-size to 62.5%?—and Joshua Comeau also does not recommend that approach—The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?.
I recommend creating the overlay of the Equilibrium with a pseudo-element. In other words, use pure CSS to show the cyan color and the eye icon.
You can see @IlnaraAckermann's solution for this challenge for your reference.
Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution
I hope this helps. Happy coding! 😄
Marked as helpful1@amrajatPosted over 1 year ago@vanzasetia thank you so much for the valuable feedback and suggestions, I'll refactor this code accordingly, could you please elaborate on your first point about interactive elements? :)
0@vanzasetiaPosted over 1 year ago@amrajat
You are welcome!
Sure! I was trying to say that the
<h1>and the Equilibrium image have interactivity or hover effects. That means you should wrap the text content and the image with an interactive element. Then, the interactive element can be a button or a link.What do you think the interactive element is going to be for "Equilibrium #3429"? Also, what is the interactive element for the Equilibrium image?
Marked as helpful0@amrajatPosted over 1 year ago@vanzasetia Thank you so much for your reply. I'll refactor its code.
0
Please log in to post a comment
Log in with GitHub
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