CSS Icon for Links that Open New Window for Web Accessibility
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“.
New Window Link CSS Icon
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
Conclusion
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.
You may support my work and future improvements by sending me a tip using your Brave browser or by sending me a one time donation using your credit card.
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.
Thanks so much for this. Took me a bit of fiddling (as a CSS advanced beginner) to get it right, but I did. Much appreciated!
Happy to hear my article on creating an icon for external links using CSS has helped you. Thanks for letting me know.
Very useful resource. Thanks for this.
Happy to hear Chris.
Super helpful! I’ve been searching for this icon for a while. I applied it in several classes on my website.
Happy to hear this article helped you Azriel. Thank you for sharing.