Question

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

我想在屏幕阅读器的新selectize.js字段中添加aria-label。

任何人都知道如何修改html属性选择放置输入吗？

谢谢，

Answer 1

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

您可以覆盖SelectizeJS插件中的大多数行为，在这种情况下，一个想法是覆盖选项和项目（选择）呈现方法，以添加ARIA角色标签以获得支持。

如果您愿意，还可以使用“ visuallyhidden”类在视觉上隐藏标签，但对于屏幕阅读器来说仍然很明显。在插件中，您还可以将您创建的标签与Selectize在初始化时创建的$ 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;
}

HTML

<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

Here's a Plnkr link to demonstrate all together

ARIA ListBox in Mozilla docs

是“选择”小部件和可访问性的很好参考。

如何在selectize.js中添加aria-label？

1 个答案: