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


        <?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');
      Copy

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

PHP


        <?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');
      Copy

Tags

Related Posts

How to Increase GenerateBlocks Pro Global Styles Limit

A guide to customising email headers in FluentCRM

Remove GeneratePress Layout Metabox

How to dynamically set the Fluent Form Weekly Summary email address

👋🏻 Weekly Tutorial Digest