Add Accessiblity Classes

Add Accessibility Classes. `.hidden` hides element but allows screenreaders to read. Do not confuse with `.hide`. `.visible` reverses effect of `.hidden`. Less confusion with `.show`. See #3597 for some background information. Many thanks to @mmikitka for starting to improve accessibility and for defining the mixin used here. The rules within that mixin come from here: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
foundation · Apr 17, 2014 · db38232 · db38232
1 parent 2a5a361
commit db38232
Showing 1 changed file with 49 additions and 1 deletion.
diff --git a/scss/foundation/components/_visibility.scss b/scss/foundation/components/_visibility.scss
@@ -8,6 +8,7 @@
 // Foundation Visibility Classes
 //
 $include-html-visibility-classes: $include-html-classes !default;
+$include-accessibility-classes: true !default;
 $include-table-visibility-classes: true !default;
 $include-legacy-visibility-classes: true !default;
 
@@ -33,6 +34,9 @@ $visibility-breakpoint-queries:
   @each $current-visibility-breakpoint in $visibility-breakpoint-sizes {
     $visibility-inherit-list: ();
     $visibility-none-list: ();
+
+    $visibility-visible-list: ();
+    $visbility-hidden-list:();
 
     $visibility-table-list: ();
     $visibility-table-header-group-list: ();
@@ -50,6 +54,12 @@ $visibility-breakpoint-queries:
         $visibility-none-list: append($visibility-none-list, unquote(
           '.show-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
         ), comma);
+        $visibility-visible-list: append($visibility-visible-list, unquote(
+          '.hidden-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visbility-hidden-list: append($visbility-hidden-list, unquote(
+          '.visible-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
         $visibility-table-list: append($visibility-table-list, unquote(
           'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
         ), comma);
@@ -76,6 +86,12 @@ $visibility-breakpoint-queries:
           $visibility-none-list: append($visibility-none-list, unquote(
             '.show-for-#{$visibility-comparison-breakpoint}, .show-for-#{$visibility-comparison-breakpoint}-down'
           ), comma);
+          $visibility-visible-list: append($visibility-visible-list, unquote(
+            '.hidden-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visbility-hidden-list: append($visbility-hidden-list, unquote(
+            '.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
           $visibility-table-list: append($visibility-table-list, unquote(
             'table.hide-for-#{$visibility-comparison-breakpoint}, table.hide-for-#{$visibility-comparison-breakpoint}-down'
           ), comma);
@@ -102,6 +118,12 @@ $visibility-breakpoint-queries:
         $visibility-none-list: append($visibility-none-list, unquote(
           '.show-for-#{$visibility-comparison-breakpoint}-only, .show-for-#{$visibility-comparison-breakpoint}-up'
         ), comma);
+        $visibility-visible-list: append($visibility-visible-list, unquote(
+          '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visbility-hidden-list: append($visbility-hidden-list, unquote(
+          '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
         $visibility-table-list: append($visibility-table-list, unquote(
           'table.hide-for-#{$visibility-comparison-breakpoint}-only, table.hide-for-#{$visibility-comparison-breakpoint}-up'
         ), comma);
@@ -128,6 +150,12 @@ $visibility-breakpoint-queries:
           $visibility-none-list: append($visibility-none-list, unquote(
             '.show-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
           ), comma);
+          $visibility-visible-list: append($visibility-visible-list, unquote(
+            '.hidden-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-hidden-list: append($visibility-hidden-list, unquote(
+            '.visible-for-#{$visibility-comparison-breakpoint}, .hidden-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
           $visibility-table-list: append($visibility-table-list, unquote(
             'table.hide-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down'
           ), comma);
@@ -154,6 +182,12 @@ $visibility-breakpoint-queries:
         $visibility-none-list: append($visibility-none-list, unquote(
           '.hide-for-#{$visibility-comparison-breakpoint}-only, .hide-for-#{$visibility-comparison-breakpoint}-up'
         ), comma);
+        $visibility-visible-list: append($visibility-visible-list, unquote(
+          '.visible-for-#{$visibility-comparison-breakpoint}-only, .visible-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
+        $visibility-hidden-list: append($visibility-hidden-list, unquote(
+          '.hidden-for-#{$visibility-comparison-breakpoint}-only, .hidden-for-#{$visibility-comparison-breakpoint}-up'
+        ), comma);
         $visibility-table-list: append($visibility-table-list, unquote(
           'table.show-for-#{$visibility-comparison-breakpoint}-only, table.show-for-#{$visibility-comparison-breakpoint}-up'
         ), comma);
@@ -180,6 +214,12 @@ $visibility-breakpoint-queries:
           $visibility-none-list: append($visibility-none-list, unquote(
             '.hide-for-#{$visibility-comparison-breakpoint}, .hide-for-#{$visibility-comparison-breakpoint}-down'
           ), comma);
+          $visibility-visible-list: append($visibility-visible-list, unquote(
+            '.visible-for-#{$visibility-comparison-breakpoint}, .visible-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
+          $visibility-hidden-list: append($visibility-hidden-list, unquote(
+            '.hidden-for-#{$visibility-comparison-breakpoint}, .hiddne-for-#{$visibility-comparison-breakpoint}-down'
+          ), comma);
           $visibility-table-list: append($visibility-table-list, unquote(
             'table.show-for-#{$visibility-comparison-breakpoint}, table.show-for-#{$visibility-comparison-breakpoint}-down'
           ), comma);
@@ -207,6 +247,14 @@ $visibility-breakpoint-queries:
       #{$visibility-none-list} {
         display: none !important;
       }
+      @if $include-accessibility-classes != false {
+        #{$visibility-visible-list} {
+          @include element-invisible-off();
+        }
+        #{$visbility-hidden-list} {
+          @include element-invisible();
+        }
+      }
       @if $include-table-visibility-classes != false {
         #{$visibility-table-list} {
           display: table;
@@ -342,4 +390,4 @@ $visibility-breakpoint-queries:
   th.hide-for-touch { display: table-cell !important; }
   .touch th.show-for-touch { display: table-cell !important; }
 
-}
+}