Website pattern library

Accessibility

Accessible icons

Provide a text alternative for icons by inserting a hidden <span> element. Use the Screen reader only class to visually hide the element while keeping it accessible to assisitive technologies.

<a href="https://example.com" target="_blank">Visit this website
<span class="sr-only">External link opens in a new window</span>
<i class="fas fa-external-link-alt">
</a>