Skip to content

Commit

Permalink
Add Accessiblity Classes
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@winghouchan
winghouchan committed Apr 18, 2014
1 parent 1c612e9 commit 57c3c1d
Showing 1 changed file with 49 additions and 1 deletion.
50 changes: 49 additions & 1 deletion scss/foundation/components/_visibility.scss
View file
Expand Up @@ -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;

Expand All @@ -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: ();
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -342,4 +390,4 @@ $visibility-breakpoint-queries:
th.hide-for-touch { display: table-cell !important; }
.touch th.show-for-touch { display: table-cell !important; }

}
}

0 comments on commit 57c3c1d

Please sign in to comment.