Presently, there is no standard for having an icon appear on an external link on your website for web accessibility purposes. What we mean by external link, a link that opens a new window or new tab.
No doubt, those using screen readers will be more interested in “what” the link’s alt property contains rather than “how” an icon specifying an external link looks.
For those interested in adding a quick and simple external link icon to all their external links, here is a CSS property for your consideration. This CSS property rule will apply to all links with a target equal to “_blank“.
So that this CSS rule isn’t applied to all your external links, you can add a class. In this case, any link which opens a new window or tab with a class of “external“.
Example HTML link: <a href=”https://endurtech.com” target=”_blank” class=”external”>Endurtech</a>
Actual link Example: Endurtech
I hope this article on creating a simple CSS external link notice has been helpful. I welcome your thoughts, questions or suggestions regarding this article.
Let me know if you found any errors within my article or if I may further assist you by answering any additional questions you may have.