Ich verwende jQuery Autocomplete für ein Div, aber diese zusätzliche Spanne wird automatisch von jquery hinzugefügt

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

Wie kann ich verhindern, dass diese Spanne erstellt wird?

23
user391986 9 Okt. 2012 im 06:17

7 Antworten

Beste Antwort

Aus Gründen der Barrierefreiheit können Blinde lesen, wie viele Ergebnisse gefunden werden. Wenn Sie dies wirklich löschen möchten, können Sie den Quellcode ändern:

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

Aber es wird nicht empfohlen.

6
toro2k 21 Mai 2013 im 15:12

Ich habe das gleiche Problem. So habe ich gelöst ... CSS-Regel hinzufügen:

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

43
user706420 14 Okt. 2012 im 14:24

Das Hinzufügen einer CSS-Datei hat bei mir funktioniert (und natürlich hat auch das Entfernen aller Span-Elemente funktioniert, aber das ist keine gute Lösung):

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" />
0
ognjenkl 16 Nov. 2016 im 07:30

Dies wird perfekt funktionieren:

$(document).ready(function(){ $("span").remove(); }); 
-3
Surya 27 Nov. 2014 im 08:09

Sie können es entfernen, indem Sie diesen Ereignishandler zu Ihrer automatischen Vervollständigung hinzufügen:

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

Es kann nicht schaden, es zu entfernen, es sei denn, Sie kümmern sich darum, dass Blinde auf unsere Seite zugreifen. Ich habe den Trick display: none ausprobiert, aber das hat bei mir nicht funktioniert.

2
Ziad 20 Juni 2014 im 13:22

Ich habe die CSS-Flexbox für das Layout mit n-ten untergeordneten Selektoren verwendet, daher hat diese Spanne mein Spaltenlayout verzerrt.

display: none oder position: absolute; top: -999999 lösen mein Problem nicht. Ich musste das Element vollständig aus dem DOM entfernen und schrieb daher das folgende create event Handler:

create: function (e)
{
    e.target.parentElement.removeChild(e.target.parentElement.querySelector(".ui-helper-hidden-accessible"));
}
1
Ashraf Sabry 25 Mai 2014 im 09:56

Sie sollten dies wirklich nicht entfernen (möchten Sie eine Webseite durchsuchen, die nur für Blinde gedacht ist und auf die Sie nicht zugreifen können?) ...

Es ist nicht einfach, eine Website ada-konform zu machen. Diese Zeitspanne ist nur ein sehr kleines Stück von all dem Zeug.

Das Ausblenden von Elementen mit oder ohne Anzeige ist eine schlechte Praxis in Bezug auf ada. Aus diesem Grund verbergen Seiten wie Facebook einige Elemente, indem sie an einer Stelle außerhalb des Bildschirms eingerückt werden:

Anzeige: keine vs Sichtbarkeit: versteckt vs Text-Einzug: 9999 Wie verhält sich Screenreader mit jedem?

Für ada verwandte Sachen könntest du hier anfangen: http://www.techrepublic.com/blog / Webdesigner / Erstellen einer ada-konformen Website /

Vielleicht ist es in diesem Fall hilfreich, die Höhe auf 0 zu setzen ...

0
Community 23 Mai 2017 im 10:30