Skip to main content

In Internet Explorer SVGs receive keyboard focus while tabbing through HTML content. This proves somewhat disorientating to both screen-reader and keyboard-only users.

- (incept: )

The vanilla JavaScript fix

The fix is only applied to Internet Explorer.

Language JavaScript
(function (window, document) {

  // Removing SVG keyboard focus in Internet Explorer
  // Mike Foskett - webSemantics.uk - August 2016
  // http://codepen.io/2kool2/pen/bZkVRx

  // is it IE and which version?
  // https://gist.github.com/padolsey/527683/#gistcomment-805422
  var ie = (function(){
    var undef;
    var rv = -1; // Return value assumes failure.
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf('MSIE ');
    var trident = ua.indexOf('Trident/');

    if (msie > 0) {
      // IE 10 or older => return version number
      rv = parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
    } else if (trident > 0) {
      // IE 11 (or newer) => return version number
      var rvNum = ua.indexOf('rv:');
      rv = parseInt(ua.substring(rvNum + 3, ua.indexOf('.', rvNum)), 10);
    }

    return ((rv > -1) ? rv : undef);
  }());


  function addAttrFocusable(bool) {
    var svgs = document.getElementsByTagName("svg");
    var i = svgs.length;
    while (i--) {
      svgs[i].setAttribute("focusable", bool);
    }
  }

  if (ie) {
    addAttrFocusable(!1);
  }

}(window, document));

Alternatively you can add focusable="false" to each SVG, but it does invalidate the HTML.

Language HTML5
<svg focusable="false" viewBox="0 0 30 30">
    <title>Close</title>
    <path d="M19 17.6l5.3-5.4 1.4 1.4-5.3 5.4 5.3 5.3-1.4 1.4-5.3-5.3-5.3 5.3-1.4-1.4 5.2-5.3-5.2-5.3 1.4-1.4 5.3 5.3z"/>
  </svg>

Google Closure Compiled

235 bytes gzipped (335 bytes uncompressed).

Language JavaScript
// Remove SVG focus in IE v1.0 17/08/2016
// 275 bytes gzipped (384 bytes uncompressed)
(function(e,c){function f(){for(var a=c.getElementsByTagName("svg"),b=a.length;b--;)a[b].setAttribute("focusable",!1)}(function(){var a=-1,b=e.navigator.userAgent,d=b.indexOf("MSIE "),c=b.indexOf("Trident/");0<d?a=parseInt(b.substring(d+5,b.indexOf(".",d)),10):0<c&&(a=b.indexOf("rv:"),a=parseInt(b.substring(a+3,b.indexOf(".",a)),10));return-1<a?a:void 0})()&&f()})(window,document);