如何使jQuery DataTable的搜索框使搜索框可访问

Question

使用jQuery DataTables(包括DOM中的搜索(过滤(框(时，我会在3.3.2输入字段中获得一个可访问性错误。

如何使用jQuery将ARIA标签添加到搜索框中？

这是DataTables渲染的代码：

<label> <input type="search" class="form-control input-sm" placeholder="" aria-controls="data-table" style="z-index: 2147483646; position: relative;"> </label>

Answer 1

edit 虽然下面我的原始答案解决了一个可访问性错误，但它留下了另一个相关错误：表单控制标签缺少文本。

由于某种原因，DataTables将搜索框包装在空标签中。

以下两行将解决这两个可访问性错误：

$('input[type="search"]').unwrap(); //removes the empty parent label tag that surrounds this $('input[type="search"]').attr('aria-label', 'search');

导致此HTML，没有错误： <input type="search" class="form-control input-sm" placeholder="" aria-controls="data-table" aria-label="search">

---

以下将清除该错误：

$('input[type="search"]').attr('aria-label', 'search');

导致此HTML：

<label><input type="search" class="form-control input-sm" placeholder="" aria-controls="data-table" aria-label="search" style=""></label>

以下链接对我有帮助：

• 按类型选择器的目标输入
• 如何使用jQuery
将ARIA-LABEL添加到NAB中