@vanzasetia
Posted
Hi, @GregLyons! 👋
Awesome work on this challenge! Your solution is responsive even without any media queries, amazing! 👏 It's great that you've put some effort to explain the code that you've written! 👍
So, my recommendation is to try to fix all the accessibility issues that have been reported by Frontend Mentor and make the :focus and create the :focus-visible styling different than the :hover effect. The purpose of the :focus-visible styling on interactive elements is to make the users that navigate the site using keyboard know where they are on the page.
Keep up the great work!
Marked as helpful
@GregLyons
Posted
@vanzasetia Thank you!
The accessibility issues that Frontend Mentor reported on my end had to do with lacking an <h1> and a <main> (which I've fixed now). I do try to be very aware of making :focus visible, not just :hover, and I believe I had that before (I tabbed through to check).
However, I didn't know about :focus-visible before, and I think it'll be very handy for me going forward; it's been bothering me recently that if I put a :focus style on a <button>, the style will stay even after being clicked. It seems like :focus-visible is the way to fix this, so thanks for that!
@vanzasetia
Posted
@GregLyons You're welcome! 😄
It's great that you've fixed all the reported issues! 👏 Keep it up!
