Submitted 7 months ago

Ping coming soon page

Akash Banchhor•230

@akash02ab

Preview site View code

This is a solution for...Ping single column coming soon page

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What specific areas of your project would you like help with?

I was getting accessibility error [role='img'] elements must have an alternative text

For I which I need to add aria-label to ion-icon tag to get rid of the error. But it's parent element also requires an aria-label.

I think if we add aria-label on both the screen reader will read the same thing twice.

What would be ideal solution in this case?

Community feedback

markus•2,250

@markuslewinPosted 7 months ago

Buttons and links can get their accessible names from their content, so you only need to label either the link or the icon in this case. If you label both, the link will get its name from the label of the link!

Chrome has an "Accessibility" tab in the DevTools where you can check the calculated name if you're ever unsure.

Both of these should work:

<div class="socials">
  <a href="https://facebook.com" target="_blank">
    <ion-icon name="logo-facebook" aria-label="Ping on Facebook"></ion-icon>
  </a>
  <a href="https://twitter.com" target="_blank" aria-label="Ping on Twitter">
    <ion-icon name="logo-twitter" aria-hidden="true"></ion-icon>
  </a>
</div>

Marked as helpful

Please log in to post a comment

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