diff --git a/modules/system/system.base.css b/modules/system/system.base.css
index 785acf47c35d20e649ff8ed8b7d96a7ea5d7afbb..a6daadd2ca68a08ae241570010219b6b41f6e140 100644
--- a/modules/system/system.base.css
+++ b/modules/system/system.base.css
@@ -223,10 +223,8 @@ html.js .js-hide {
  *
  * Used for information required for screen-reader users to understand and use
  * the site where visual display is undesirable. Information provided in this
- * manner should be kept concise, to avoid unnecessary burden on the user. Must
- * not be used for focusable elements (such as links and form elements) as this
- * causes issues for keyboard only or voice recognition users. "!important" is
- * used to prevent unintentional overrides.
+ * manner should be kept concise, to avoid unnecessary burden on the user.
+ * "!important" is used to prevent unintentional overrides.
  */
 .element-invisible {
   position: absolute !important;
@@ -234,6 +232,16 @@ html.js .js-hide {
   clip: rect(1px, 1px, 1px, 1px);
 }
 
+/**
+ * The .element-focusable class extends the .element-invisible class to allow
+ * the element to be focusable when navigated to via the keyboard.
+ */
+.element-invisible.element-focusable:active,
+.element-invisible.element-focusable:focus {
+  position: static !important;
+  clip: auto;
+}
+
 /**
  * Markup free clearing.
  *