如何将咏叹号添加到selectize.js中？

Question

因此，selectize.js只是忽略了原始输入字段，并创建了自己的输入字段，因此原始标签现在与新输入不相关联。

我想为屏幕阅读器在新的selectize.js字段中添加一个aria标签。

有人知道如何修改html属性，选择它的输入吗？

谢谢,

Answer 1

为屏幕阅读器使用自定义插件和隐藏标签

您可以覆盖SelectizeJS插件中的大多数行为，在这种情况下，一个想法是重写选项和项(选择)呈现方法，以添加ARIA角色标记以提供支持。

如果你想要的话，你也可以使用一个“视觉隐藏”类来隐藏标签，但是在屏幕阅读器中它仍然是显而易见的。在插件中，您还可以将您创建的标签与$control_input (新输入)在初始化时创建。具体来说，将aria-labelledby属性设置为将输入与某些标签相关联。

CSS

.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>
      </div>
    </form>

插件JavaScript

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

这里有一个Plnkr链接来演示所有这些

和一个很好的参考选择小部件和可访问性，Mozilla文档中的ARIA ListBox