时间戳

首页 > 解决方案 > 如何使 jquery 数据表呈现的搜索框可访问？

jquery - 如何使 jquery 数据表呈现的搜索框可访问？

问题描述

使用 jquery 数据表时，包括 dom 中的搜索（过滤器）框，我得到一个可访问性错误，引用 3.3.2 Input field has no description。

如何使用 jquery 向搜索框添加 aria-label？

这是数据表呈现的代码：

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

标签： jquerydatatablesaccessibilitywai-aria

解决方案

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

出于某种原因，数据表将搜索框包装在一个空标签标签中。

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

$('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>

以下链接帮助了我：

推荐阅读