diff --git a/STARTERKIT/sass/_base.scss b/STARTERKIT/sass/_base.scss
index 8f0f948..4dee523 100644
--- a/STARTERKIT/sass/_base.scss
+++ b/STARTERKIT/sass/_base.scss
@@ -120,3 +120,33 @@ $tabs-border: #bbb;
 
 // Define the custom mixins for your project here.
 // http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#defining_a_mixin
+
+// element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+@mixin element-invisible {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
+  }
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+// Turns off the element-invisible effect.
+@mixin element-invisible-off {
+  position: static !important;
+  clip: auto;
+  height: auto;
+  width: auto;
+  overflow: auto;
+}
+
+@mixin element-focusable {
+  @include element-invisible;
+
+  &:active,
+  &:focus {
+    @include element-invisible-off;
+  }
+}
diff --git a/STARTERKIT/sass/_modular-styles.scss b/STARTERKIT/sass/_modular-styles.scss
index 930750d..ec0875a 100644
--- a/STARTERKIT/sass/_modular-styles.scss
+++ b/STARTERKIT/sass/_modular-styles.scss
@@ -38,23 +38,12 @@
 /* element-invisible as defined by http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */
 .element-invisible,
 %element-invisible {
-  position: absolute !important;
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
-    clip: rect(1px 1px 1px 1px); // IE6 and IE7 use the wrong syntax.
-  }
-  clip: rect(1px, 1px, 1px, 1px);
+  @include element-invisible;
 }
 
 
 %element-invisible-off { /* Turns off the element-invisible effect. */
-  position: static !important;
-  clip: auto;
-  height: auto;
-  width: auto;
-  overflow: auto;
+  @include element-invisible-off;
 }
 
 .element-focusable,