Simeon Udohā¢ 535
@simeon4real
Posted
I added before pseudo-elements to with contents like content: "facebook"; etc for all 3. and then hid it using visibility or opacity. still, the report still says I have to fix it. what else can I do?
0
Submitted
Fylo Landing Page Using š CSS GRID, FLEXBOX , SASS AND BEM
Simeon Udohā¢ 535
@simeon4real
Design comparison
Solution retrospective
Done with the challenge. will appreciate comments and recommendations, thanks! š
Community feedback
P
Matt Studdertā¢ 13,611
@mattstuddert
Posted
Awesome work on this challenge, Simeon! You've done a really good job on this challenge and your solution matches up really well to the design! Here are a couple of small pointers after taking a look at your solution:
- There are a couple of areas where your fonts are slightly off, like the nav, the "See how Fylo works" call-to-action and some of the footer text. This is one area where you could make some refinements.
- You have a few accessibility errors. It would be great to resolve these so that your social icons are accessible to screen reader users.
You've done a really good job on this. Keep up the great work! š
0
Simeon Udohā¢ 535
@simeon4real
Posted
@mattstuddert Thanks Sir. For fixing the accessibility issues, Since there's nothing to use in between the hyperlink tag, can I use a space like this: <a href="linktofacebook.com" >Ā & nbsp ;<svg></svg> just before the svg icon?
0
P
Matt Studdertā¢ 13,611
@mattstuddert
Posted
@simeon4real you can either add text inside of the anchor tag and then hide it but making sure it's still accessible for screen reader users. Or you can add the aria-label attribute on the anchor tag itself to describe what it's for e.g. <a aria-label="Follow us on Facebook" href="...">...</a>.
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