[英]How can I add aria-label to selectize.js?
因此selectize.js只会忽略原始输入字段并创建自己的字段,因此原始标签现在不再与新输入相关联。
我想向屏幕阅读器的新selectize.js字段添加一个aria标签。
有人知道如何修改select输入的html属性吗?
谢谢,
为屏幕阅读器使用自定义插件和隐藏标签
您可以覆盖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 <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
对于选择小部件和可访问性以及Mozilla文档中的ARIA ListBox都有很好的参考
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.