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.