How to add aria-label for selectize.js?
This way selectize.js just ignores the original input field and creates its own, and so the original label is now not associated with the new input.
I would like to add a label aria to a new selectize.js field for screen reader.
Does anyone know how to modify the html attributes that selects puts on their inputs?
Thank,
source to share
Use your own plugin and hidden shortcut for screen readers
You can override most of the behavior in plugins for SelectizeJS, in which case one idea is to override the item (highlight) render option and methods to add ARIA role tags to support.
You can also use the "visually hidden" class to visually hide the label if you like, but it will still be visible to screen readers. In the plugin, you can also associate the label you created with the $ control_input (new input) that Selectize creates on initialization.
CSS
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
Html
<h4>SelectizeJS <small></smmall>Simple Aria Plugin</small></h4>
<hr />
<form id="select">
<div class="control-group">
<label class="visuallyhidden" id="selectizeLabel"><strong>Example: Roles and Labels</strong></label><br />
<label id="selectizeLabel"><strong>Example: Roles and Labels</strong></label><br />
<select id="wiki-select-property" class="form-control"></select>
</div>
</form>
JavaScript plugin
Selectize.define('simple_aria', function(options) {
options = $.extend({
append_to_option: options.append_to_option || true,
append_to_item: options.append_to_item || true
}, options);
var simpleListBoxAria = function(thisRef, options) {
var self = thisRef;
thisRef.setup = (function() {
var original = self.setup;
return function() {
// SET REFERENCE: original rendering methods
var render_item = self.settings.render.item;
var render_option = self.settings.render.option;
// OVERRIDE [selection] rendering-method
if (options.append_to_item) {
self.settings.render.item = function(data, escape) {
var item_html = '<span class="selectize-selection" aria-selected="true">';
item_html += render_item.apply(self, arguments);
item_html += '</span>';
return item_html;
};
}
// OVERRIDE [option] rendering-method
if (options.append_to_option) {
self.settings.render.option = function(data, escape) {
var option_html = "<div class='option' role='option'>";
option_html += escape(data.title);
option_html += "</div>";
return option_html;
};
}
original.apply(self, arguments);
// ADD AriaRole for Selectize Select
thisRef.$control_input.attr('role', 'listbox');
thisRef.$control_input.attr('aria-labelledby', 'selectizeLabel');
}
})();
}
simpleListBoxAria(this, options);
return;
}); // END aria plugin
Here's a Plnkr link to showcase everything together
And a good link for choosing widgets and accessibility, ARIA ListBox at Mozilla docs
source to share