Question

我在div上使用jQuery自动完成功能但是我得到了jquery自动添加的额外跨度

"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"

如何防止创建此范围？

Answer 1

我有同样的问题。这就是我解决的问题......添加css规则：

.ui-helper-hidden-accessible { display:none; }

Answer 2

出于无障碍原因，盲人可以“阅读”找到多少结果。如果您确实要删除它，可以修改源代码：

this.liveRegion = $( "<span>", {
                role: "status",
                "aria-live": "polite"
            })
            .addClass( "ui-helper-hidden-accessible" )
            .insertAfter( this.element );

但不推荐。

Answer 3

您可以通过将此事件处理程序添加到自动完成功能来摆脱它：

$(element).autocomplete({
    ...
    create: function (e) {
        $(this).prev('.ui-helper-hidden-accessible').remove();
    }
});

除非您关心盲人访问我们的网页，否则删除它是没有害处的。我尝试了display: none技巧，但这对我没用。

Answer 4

我正在使用CSS flex box进行布局，使用nth-child选择器，因此，这个范围扭曲了我的列布局。

display: none或position: absolute; top: -999999无法解决我的问题。我必须完全从DOM中删除元素，因此，我编写了以下create event处理程序：

create: function (e)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}

Answer 5

你真的不应该删除这个（你想浏览一个仅供盲人访问的网页而你无法访问内容吗？）...

要使网站符合ada并不容易。这个范围只是所有这些内容的一小部分。

隐藏显示无左右的元素是关于ada的不良做法。这就是为什么像facebook这样的页面通过将它们缩进到屏幕外的某个地方来隐藏一些元素：

display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?

你可以从这里开始ada相关的东西： http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/

在这种情况下，可能会将高度强制为0 ......

Answer 6

添加.css文件对我有效（当然也删除了所有span元素，但这不是一个好的解决方案）：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />

Answer 7

这将完美地运作：

$(document).ready(function(){ $("span").remove(); });

jquery ui自动完成添加跨度

7 个答案: