jquery ui autocomplete adding a span
I am using jQuery autocomplete on a div but I am getting this extra span added automatically by jquery
"<span role="status" aria-live="polite" class="ui-helper-hidden-accessible">search test</span>"
How can I prevent this span from being created?
I solved it by adding a CSS rule:
.ui-helper-hidden-accessible { display: none; }
It’s for accessibility reason, blind people can ‘read’ how much results are find. If you really want to delete this, you can modify the source code:
this.liveRegion = $( "<span>", {
role: "status",
"aria-live": "polite"
})
.addClass( "ui-helper-hidden-accessible" )
.insertAfter( this.element );
But it’s not recommended.
I was using CSS flex box for layout with nth-child selectors, so, this span distorted my column layout.
display: none or position: absolute; top: -999999 won’t resolve my problem. I had to remove the element from the DOM altogether, so, I wrote the following create event handler:
create: function (e)
{
e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}
You can get rid of it by adding this event handler to your autocomplete:
$(element).autocomplete({
...
create: function (e) {
$(this).prev('.ui-helper-hidden-accessible').remove();
}
});
There’s no harm in removing it unless you care about blind people accessing our page. I tried the display: none trick but that didn’t work for me.
you really shouldn’t remove this (do you want to browse a web page which is only for blind people and you can’t access the content?)…
it is not easy to make a website ada compliant.
this span is just a very little piece of all that stuff.
hiding elements with display none or so is a bad practice regarding ada.
that’s why pages like facebook hide some elements by indenting them to somewhere off-screen:
display:none vs visibility:hidden vs text-indent:9999 How screen reader behave with each one?
for ada related stuff you could start here:
http://www.techrepublic.com/blog/web-designer/creating-an-ada-compliant-website/
maybe forcing the height to 0 might be of use in this case…
Adding .css file worked for me (and of course removing all span elements worked too, but that is not a good solution):
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
This will Work Perfectly:
$(document).ready(function(){ $("span").remove(); });
