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 Hide the WordPress Admin Bar and Restrict Page Access Based on User Roles

Add custom code to Fluent Community Portal

How to Increase GenerateBlocks Pro Global Styles Limit

A guide to customising email headers in FluentCRM

👋🏻 Weekly Tutorial Digest