summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorJohnAlbin2009-08-12 20:36:06 (GMT)
committer JohnAlbin2009-08-12 20:36:06 (GMT)
commit389c3c1cce107750f64f3a2082555dd660f3fb90 (patch)
tree41f388839ac4e51d45e94d4ea7615bdf7a20dae0
parent773fbd0656836e0808cc9aa1349db6de050a7caa (diff)
#546862: Add D7's element-hidden and element-invisible for accessibility features
-rw-r--r--CHANGELOG.txt1
-rw-r--r--STARTERKIT/css/pages.css27
2 files changed, 28 insertions, 0 deletions
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 9b9611a..b01d7f9 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -2,6 +2,7 @@
Zen 6.x-2.x-dev, xxxx-xx-xx (development release)
------------------------
+- #546862: Add D7's element-hidden and element-invisible for accessibility features
- #547382: Rename Zen's reset stylesheet to html-reset.css from html-elements.css
- #527494: Follow Drupal's proposed CSS coding standards
- #480610 by kdebaas: css class .field-type-image does not exist anymore in 6.x version of the module
diff --git a/STARTERKIT/css/pages.css b/STARTERKIT/css/pages.css
index 4b9ec63..4352633 100644
--- a/STARTERKIT/css/pages.css
+++ b/STARTERKIT/css/pages.css
@@ -256,3 +256,30 @@ ul.links li {
clear: both;
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;
+}