Accessibility new window warning

I came across a great plugin that adds a warning that a link goes to an external website.

You can see an example below with a link to the original plugin I forked the code from.

Plugin: Accessibility New Window Warnings

I wanted a simple way to add the functionality from the plugin, but as a code snippet so I didn’t need to add another plugin. The code below is a forked/modified version of the plugin with only the required code.

php
function tct_accessibilty_window_css() { ?> <style> .tct-external-link-icon:before { content: url("data:image/svg+xml, %3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%20stroke%3D%22currentColor%22%3E%3Cpath%20d%3D%22M256%2064C256%2046.33%20270.3%2032%20288%2032H415.1C415.1%2032%20415.1%2032%20415.1%2032C420.3%2032%20424.5%2032.86%20428.2%2034.43C431.1%2035.98%20435.5%2038.27%20438.6%2041.3C438.6%2041.35%20438.6%2041.4%20438.7%2041.44C444.9%2047.66%20447.1%2055.78%20448%2063.9C448%2063.94%20448%2063.97%20448%2064V192C448%20209.7%20433.7%20224%20416%20224C398.3%20224%20384%20209.7%20384%20192V141.3L214.6%20310.6C202.1%20323.1%20181.9%20323.1%20169.4%20310.6C156.9%20298.1%20156.9%20277.9%20169.4%20265.4L338.7%2096H288C270.3%2096%20256%2081.67%20256%2064V64zM0%20128C0%2092.65%2028.65%2064%2064%2064H160C177.7%2064%20192%2078.33%20192%2096C192%20113.7%20177.7%20128%20160%20128H64V416H352V320C352%20302.3%20366.3%20288%20384%20288C401.7%20288%20416%20302.3%20416%20320V416C416%20451.3%20387.3%20480%20352%20480H64C28.65%20480%200%20451.3%200%20416V128z%22%2F%3E%3C%2Fsvg%3E"); width: 15px; margin-left: 3px; display: inline-block; } </style> <?php } add_action('wp_head', 'tct_accessibilty_window_css');

The long URL encoded content is a font awesome external icon.

php
function tct_accessibilty_window_js() { ?> <script> (function ($) { "use strict"; $(window).on('load',function () { /** * Accessible _blank link tooltip */ var tct_link_tooltip = $('<div/>').css({ position: 'absolute', background: 'white', border: '1px solid black', padding: '5px 10px', zIndex: 999, display: 'none' }).appendTo('body'); /** * loop through each link with a target of _blank */ $("a[target=_blank]").each(function(){ // add icon to link if($(':header',this).length){ $(':header',this).append(' <i class="tct-external-link-icon" aria-hidden="true"></i>'); }else{ $(this).append(' <i class="tct-external-link-icon" aria-hidden="true"></i>'); } // add aria-label to link $(this).attr("aria-label", $(this).text()+", opens a new window"); // position and show link_tooltip on hover $(this).mousemove(function(e){ tct_link_tooltip.css({ top: e.pageY + 10 + 'px', left: e.pageX + 10 + 'px' }); }) .hover(function(){ tct_link_tooltip.show().html('opens a new window'); }, function(){ tct_link_tooltip.hide(); }); // position and show link_tooltip on focus $(this).on({ focusin: function () { var position = $(this).position(); tct_link_tooltip.css({ top: position.top + $(this).outerHeight() + 'px', left: position.left + 'px' }); tct_link_tooltip.show().html('opens a new window'); }, focusout: function () { tct_link_tooltip.hide(); } }); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'tct_accessibilty_window_js');

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.

🔒I won't send you spam, I promise