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
0
