diff --git a/scss/mixins/_screen-reader.scss b/scss/mixins/_screen-reader.scss
index c208583249e2..a5fa51c5c888 100644
--- a/scss/mixins/_screen-reader.scss
+++ b/scss/mixins/_screen-reader.scss
@@ -1,15 +1,17 @@
 // Only display content to screen readers
 //
 // See: http://a11yproject.com/posts/how-to-hide-content
+// See: http://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
-  margin: -1px;
   overflow: hidden;
   clip: rect(0,0,0,0);
+  white-space: nowrap;
+  clip-path: inset(50%);
   border: 0;
 }
 
@@ -25,8 +27,9 @@
     position: static;
     width: auto;
     height: auto;
-    margin: 0;
     overflow: visible;
     clip: auto;
+    white-space: normal;
+    clip-path: none;
   }
 }