Roc Tanweer• 2,500
@RocTanweer
Posted
Here you have the sr-only class
And one more thing aria-hidden="true" on icons to make sure the screen reader won't confuse why that icon is there
Good luck 😃
1
Design comparison
Solution retrospective
The challenge specs focused on two set widths. I tried to extend the layout to be fully responsive. I would appreciate the feedback on my solution, can it be called fully responsive? If not, what am I missing? Thanks for constructive responses.
Community feedback
Roc Tanweer• 2,500
@RocTanweer
Posted
Hello 👋 sir Great work 👌 on this project 😊
I would definitely call this fully responsive
I think content of stay productive...should be text-align:center; ?
You should have aria-label="email-field" on both email input for accessibility issues
You wanna put some description into the links and not just an icon...for accessibility issues as well
You can put a span with a class of sr-only before the icon in the link and can easily download the sr-only class from the internet...
You may put aria-hidden="true" on the icons as well
All these for accessibility issues Because disable people who use screen reader won't know if that is a fb link unless you write something into the link which you could not as only icon is desired so you put span with class sr-only and write description of the link into the span and hide it using sr-only class available on internet
Hope it helps and happy coding
1
Paweł Pikus• 100
@pawelpikus
Posted
Thanks for the feedback, it's true I didn't think of accessibility, which is a big mistake. I'm going to update the page as suggested. Thanks again for your help!
0
Roc Tanweer• 2,500
@RocTanweer
Posted
@pawelpikus My pleasure..!
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