diff --git a/coffee/chosen.jquery.coffee b/coffee/chosen.jquery.coffee
index 2efa5c79c1d..97a7f0204a1 100644
--- a/coffee/chosen.jquery.coffee
+++ b/coffee/chosen.jquery.coffee
@@ -34,6 +34,7 @@ class Chosen extends AbstractChosen
'class': container_classes.join ' '
'style': "width: #{this.container_width()};"
'title': @form_field.title
+ 'aria-hidden': true
container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chosen" if @form_field.id.length
@@ -44,7 +45,7 @@ class Chosen extends AbstractChosen
else
@container.html '' + @default_text + '
'
- @form_field_jq.hide().after @container
+ @form_field_jq.addClass('chosen-sr-only').after @container
@dropdown = @container.find('div.chosen-drop').first()
@search_field = @container.find('input').first()
diff --git a/coffee/chosen.proto.coffee b/coffee/chosen.proto.coffee
index 1450144c84f..8580b92bdc8 100644
--- a/coffee/chosen.proto.coffee
+++ b/coffee/chosen.proto.coffee
@@ -22,12 +22,13 @@ class @Chosen extends AbstractChosen
'class': container_classes.join ' '
'style': "width: #{this.container_width()};"
'title': @form_field.title
+ 'aria-hidden': true
container_props.id = @form_field.id.replace(/[^\w]/g, '_') + "_chosen" if @form_field.id.length
@container = if @is_multiple then new Element('div', container_props).update( @multi_temp.evaluate({ "default": @default_text}) ) else new Element('div', container_props).update( @single_temp.evaluate({ "default":@default_text }) )
- @form_field.hide().insert({ after: @container })
+ @form_field.addClassName('chosen-sr-only').insert({ after: @container })
@dropdown = @container.down('div.chosen-drop')
@search_field = @container.down('input')
diff --git a/sass/chosen.scss b/sass/chosen.scss
index b2f78e2d7bc..fb261fd3d0f 100644
--- a/sass/chosen.scss
+++ b/sass/chosen.scss
@@ -417,3 +417,15 @@ $chosen-sprite-retina: image-url('chosen-sprite@2x.png') !default;
}
}
/* @end */
+
+/* @group Accessibility helpers */
+.chosen-sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ border: 0;
+}