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?



source to share

1 answer

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.


.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;



<h4>SelectizeJS&nbsp;&nbsp;<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>


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);
}); // 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



All Articles