Skip to content
Submitted over 2 years ago

Four Card Feature Section

Sara Dunlop•430
@Risclover
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

My 1 accessibility issue is a warning that says "Links must have discernible text". The link in question is actually an icon (with an <i> tag), which is wrapped by an anchor tag. Is there any way to satisfy this requirement while not really changing the whole "Icon link" thing, or do I need to add some text or something? Thank you for any insight or solutions you can offer!

Other than that, this project was easy peasy for me. It feels good to stretch my brain and practice basic HTML/CSS every now and then! 😊

Community feedback

  • Ahmed Bayoumi•6,740
    @Bayoumi-devPosted over 2 years ago

    Hey Sara,

    Set the attribute aria-label to describe the link.

    <a href="https://github.com/Risclover" target="_blank" aria-label`="Github Profile"><i class="devicon-github-original"></i></a>

    I hope this is helpful to you... Keep coding👍

    Marked as helpful
    0
    Sara Dunlop•430
    @RiscloverPosted over 2 years ago

    @Bayoumi-dev Thank you!

    0
  • Marge C.•440
    @msunjiPosted over 2 years ago

    Heya!

    You can add the aria-label attribute (and a value) to your <a> tag and that should sort things out. So it'd probably be something like: <a href="https://github.com/Risclover" target="_blank" aria-label="Github"><i class="devicon-github-original"></i></a>.

    Everything else looks pretty great, well done! ✨

    Marked as helpful
    0
    Sara Dunlop•430
    @RiscloverPosted over 2 years ago

    @msunji Thank you very much!

    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