#473396 by Everett Zufelt, annmcmeekin, jmburnz, sun, et al: Define system-wise classes for providing hidden elements for accessibility.

1 files changed, 27 insertions, 0 deletions

diff --git a/modules/system/system.css b/modules/system/system.css
index 202a620d3..1fe0eb55b 100644
--- a/modules/system/system.css
+++ b/modules/system/system.css
@@ -565,3 +565,30 @@ div.password-suggestions ul {
 div.password-confirm {
   visibility: hidden;
 }
+
+/**
+ * Hide elements from all users.
+ *
+ * Used for elements which should not be immediately displayed to any user. An
+ * example would be a collapsible fieldset that will be expanded with a click
+ * from a user. The effect of this class can be toggled with the jQuery show()
+ * and hide() functions.
+ */
+.element-hidden {
+  display: none;
+}
+
+/**
+ * Hide elements visually, but keep them available for screen-readers.
+ *
+ * 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.
+ */
+.element-invisible {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+}