add a utility class to visually hide content

so that we can add content necessary for
citizens who use screen readers, without showing it to all users.

see http://a11yproject.com/posts/how-to-hide-content/

part of issue #2210

1 files changed, 14 insertions, 0 deletions

diff --git a/app/assets/stylesheets/responsive/_utils.scss b/app/assets/stylesheets/responsive/_utils.scss
index 68884fa7a..6458cd61e 100644
--- a/app/assets/stylesheets/responsive/_utils.scss
+++ b/app/assets/stylesheets/responsive/_utils.scss
@@ -33,3 +33,17 @@ $lte-ie7: false !default;
         @content;
     }
 }
+
+// Hide content visually, but keep it available to screen readers
+// source: http://a11yproject.com/posts/how-to-hide-content/
+.visually-hidden { /*http://developer.yahoo.com/blogs/ydn/posts/2012/10/clip-your-hidden-content-for-better-accessibility/*/
+    position: absolute !important;
+    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+    clip: rect(1px, 1px, 1px, 1px);
+    padding:0 !important;
+    border:0 !important;
+    height: 1px !important;
+    width: 1px !important;
+    overflow: hidden;
+}
+body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; }