diff --git a/js/states-show.js b/js/states-show.js
new file mode 100644
index 0000000..ab8bef8
--- /dev/null
+++ b/js/states-show.js
@@ -0,0 +1,44 @@
+/**
+ * @file
+ * Custom state for handling visibility
+ */
+
+/**
+ * Add a new state to Drupal #states. We use this to toggle element-invisible
+ * to show/hidden #states elements. This allows elements to be visible to
+ * screen readers.
+ *
+ * To use:
+ * $form['my_form_field'] = array(
+ *   ..
+ *   // Only show this field if 'some_other_field' is checked.
+ *   '#states => array(
+ *     'show' => array(
+ *       'some-other-field' => array('checked' => TRUE),
+ *     ),
+ *   ),
+ *   ..
+ *   // Required to load the 'show' state handler.
+ *   '#attached' => array(
+ *     'js' => array(ctools_attach_js('states-show')),
+ *   ),
+ * );
+ */
+
+(function ($) {
+  'use strict';
+
+  Drupal.states.State.aliases.hidden = '!show';
+
+  // Show/hide form items by toggling the 'element-invisible' class. This is a
+  // more accessible option than the core 'visible' state.
+  $(document).bind('state:show', function(e) {
+    console.log(e.value);
+    if (e.trigger) {
+      var element = $(e.target).closest('.form-item, .form-submit, .form-wrapper');
+      element.toggle(e.value);
+      e.value === true ? element.removeClass('element-invisible') : element.addClass('element-invisible');
+    }
+  });
+
+})(jQuery);