Looking to hire developers?
How can I make my a tags accessible? I'm using font awesome icons for the links.
UPDATE: I added aria-true and a title to the font awesome that was nested inside the a tags. Now it works!
@akshaymagrani
Posted
Great work, Cory! You managed to resolve the issue yourself. And thank you @GerbenDol, your advice was helpful. It prompted me to work out your suggestion in codepen.io and it worked. That should be helpful to me in the future.
@GerbenDol
Posted
@akshaymagrani Cool to hear you learned something from it! 😁
@mattstuddert
Posted
That's great to hear you resolved your issue, Cory. One really good next step would be to try resolving the accessibility issues with the social icons.
Great work on this challenge, keep it up! 👍
@CoryRunn
Posted
@mattstuddert Hm, I have my font awesome icons wrapped in span tags and nested inside the a tag. How can I make those a tags accessible but use an icon instead of text??? Can I add an alt somewhere?
@CoryRunn
Posted
@CoryRunn Never mind @mattstuddert, I believe I figured it out. alt was not the answer.
@mattstuddert
Posted
@CoryRunn great to see you've sorted it, Cory. Nice work!
@CoryRunn
Posted
@mattstuddert Thank you! Love this site. I learned so much with every project.
@mattstuddert
Posted
@CoryRunn that’s awesome to hear!
@akshaymagrani
Posted
Hey Cory,
Regarding making your media links clickable from the circle - You can nest the media within a button element, something like this -
<button name="button" class="button"><"Your media icon"></button>
Use CSS to make the button circular - width, height, and border-radius.
Hope this helps.
@GerbenDol
Posted
@akshaymagrani As these are links to other websites stick to using the anchor tags.
Just use the <li>-items for the spacing and add the styles for making the circles to the <a>!
@CoryRunn
Posted
@GerbenDol Not quite sure what you mean. Should I align-items on those specific anchor tags and then also style those anchor tags?
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
