Barierefreiheit mit Autocomplete Suche

[Sven 2020]

Hallo,

ich soll eine kleine Anwendung bauen und diese soll möglichst barierefrei sein. Nun habe ich viel gelesen und leider keine eindeutigen Antworten zum Thema Autocomplete-Suche (via Ajax Request) gefunden (in meinem Fall nach Strassennamen).

Ist grundsätzlich von einer Autocomplete Suche abzuraten oder wäre das o.k. wenn die erzeugten Ergebnisliste auch mit der Tastatur bedienbar ist. Alternativ könnte ich die Suche über klassische Formular Requests ausführen lassen, wobei das Ergebnis in einer neuen Seite als HTML dargestellt wird.

Und nochwas: Habt ihr einen Tipp für einen guten kostenlosen Screenreader zum Testen?

Danke

Sven

[Auge]

Hallo

ich soll eine kleine Anwendung bauen und diese soll möglichst barierefrei sein. Nun habe ich viel gelesen und leider keine eindeutigen Antworten zum Thema Autocomplete-Suche (via Ajax Request) gefunden (in meinem Fall nach Strassennamen).

Nun denn.

Ist grundsätzlich von einer Autocomplete Suche abzuraten …

Nein, warum sollte es? Das Formular besteht ganz normal aus HTML-Elementen – für deinen Fall ist im Formular ein Input vom Typ „search“, eine Datalist für die per Ajax geladenen Suchvorschläge und der allfällige Absendebutton notwendig.

Das Suchfeld wird mit JavaScript überwacht. Bei einer Eingabe (mit einer Mindestlänge) wird diese Eingabe an den Server an ein Skript geschickt. Dort wird die Ajax-Anfrage mit einem serverseitigen Skript (PHP, Python, Perl etc.) verarbeitet und, wenn vorhanden, passende Suchvorschläge zurückgegeben. Diese werden vom JavaScript-Skript, das die Anfrage gestellt hat, entgegengenommen und in die Datalist eingefügt.

Zur Konstruktion und zum testen der Funktion reicht das. Du hast also drei Baustellen, das Eingabeformular und die Trefferausgabe in HTML, JavaScript für die Anfrage am Server und Generierung der Vorschlagsliste aus der Antwort und ein serverseitiges Skript, das sowohl die Ajax-Anfrage als auch die auf normalem Wege abgeschickte Formulareingabe entgegennimmt und verarbeitet.

… oder wäre das o.k. wenn die erzeugten Ergebnisliste auch mit der Tastatur bedienbar ist.

Da die Eingabe eines Straßennamens ja sowieso mit einer Tastatur erfolgt, wäre es schon sehr befremdlich, wenn ein ausgerechnet per Ajax geladener Suchvorschlag nicht mit der Tastatur erreichbar wäre.

Alternativ könnte ich die Suche über klassische Formular Requests ausführen lassen, wobei das Ergebnis in einer neuen Seite als HTML dargestellt wird.

Genau so. Ist JavaScript ausführbar und der Server zum laden von Vorschlägen für eine (teilweise) Eingabe kontaktierbar, werden diese in eine Datalist geladen. Ist das, aus welchen Gründen auch immer, nicht der Fall, werden die Suchergebnisse „normal“ durch das abschicken des Formulars vom Server geholt (wenn der dann erreichbar ist, das ist aber normales Risiko).

Tschö, Auge

[Sven 2020]

Mojn, vielen Dank für die Antwort, ich glaube aber meine Frage war etwas mißverständlich. Wie man ein Autocomplete baut weiß ich und habe ich bereits oft gebaut. Meine Frage zielte eher darauf ab, ob eine klassische Formularsuche einer Autocomplete Suche im Sinne der Barierrefreiheit vorzuziehen ist oder nicht. Sven

[Auge]

Hallo

Meine Frage zielte eher darauf ab, ob eine klassische Formularsuche einer Autocomplete Suche im Sinne der Barierrefreiheit vorzuziehen ist oder nicht.

Nein, ist sie nicht. Das hat auch nichts mit Barrieren zu tun. Es ist eine Zusatzfunktion und wenn das Formular auch ohne diese funktioniert, gibt es an dieser Stelle schlicht keine Barriere.

Wo siehst du eine (potentielle) Barriere?

Tschö, Auge

[Sven 2020]

Nein, ist sie nicht. Das hat auch nichts mit Barrieren zu tun. Es ist eine Zusatzfunktion und wenn das Formular auch ohne diese funktioniert, gibt es an dieser Stelle schlicht keine Barriere.

O.K. jetzt ist glaube ich der Groschen gefallen, da haste natürlich recht.

Wo siehst du eine (potentielle) Barriere?

Jetzt keine mehr😉, Damke! Sven

[Linuchs]

Hallo Auge,

ein serverseitiges Skript, das sowohl die Ajax-Anfrage als auch die auf normalem Wege abgeschickte Formulareingabe entgegennimmt und verarbeitet.

Ist das Standard? Für Ajax-Anfragen habe ich jeweils ein Mini-PHP-Programm. Kurzer Check des Suchbegriffs, Öffnen der Datenbank, lesen von max. 25 Vorschlägen, Erzeugen und Absenden eines CSV-Strings. Nach ein- bis zweihundertstel Sekunden ist der Server damit fertig.

Das Aufbereiten der Vorschlagsliste erfolgt beim Client per Javascript.

wäre es schon sehr befremdlich, wenn ein ausgerechnet per Ajax geladener Suchvorschlag nicht mit der Tastatur erreichbar wäre.

Dazu bitte ich um ein Code-Beispiel (Link). Bei Google steige ich nicht durch.

Gruß, Linuchs

[Auge]

Hallo

ein serverseitiges Skript, das sowohl die Ajax-Anfrage als auch die auf normalem Wege abgeschickte Formulareingabe entgegennimmt und verarbeitet.

Ist das Standard?

Naja, man kann dafür auch zwei Skripte vorhalten. In diesem Fall (Auslieferung von Suchvorschlägen anhand von Teileingaben (Ajax) versus Auslieferung von Suchergebnissen anhand als vollständig anzusehender Eingaben (Absenden des Formulars)) kann man das als zwei verschiedene Aufgaben sehen, die von zwei Skripten zu erledigen sind. Meiner Meinung nach sind die Aufgaben aber hinreichend ähnlich, so dass man sie auch mit einem serverseitigen Skript abfrühstücken kann.

In beiden Fällen wird eine Eingabe angeliefert. In beiden Fällen soll eine gleichartige Suche stattfinden. In einem Fall (Ajax) sollen mit der Eingabe übereinstimmende oder sie enthaltende Suchergebnisse als Rohdaten zurückgeliefert werden, die per JS in das Dokument/DOM eingebaut werden. Im anderen Fall (Response auf das „normal“ abgesendete Formular) sollen mit der Eingabe übereinstimmende oder sie enthaltende Suchergebnisse als Teil des auszuliefernden Dokuments zurückgeliefert werden.

Mit einer Unterscheidung der Art der Anfrage lässt sich das schon mit einem Skript erledigen, da die meisten Codeteile für beide Aufgaben gleich sein werden.

Für Ajax-Anfragen habe ich jeweils ein Mini-PHP-Programm. Kurzer Check des Suchbegriffs, Öffnen der Datenbank, lesen von max. 25 Vorschlägen, Erzeugen und Absenden eines CSV-Strings. Nach ein- bis zweihundertstel Sekunden ist der Server damit fertig.

Mache ich, abgesehen vom Datenformat der Antwort (ich benutze JSON), auch so.

Das Aufbereiten der Vorschlagsliste erfolgt beim Client per Javascript.

Man könnte auch fertigen HTML-Code als Antwort auf den Ajax-Request zurückgeben, der dann in Gänze an der passenden Stelle in das DOM eingehängt wird. Bei deinen maximal 25 Vorschlägen wird der Client aber wohl nicht übermäßig beansprucht, so dass man die Aufbereitung der Rohdaten für die HTML-Ausgabe getrost im Browser erledigen kann.

wäre es schon sehr befremdlich, wenn ein ausgerechnet per Ajax geladener Suchvorschlag nicht mit der Tastatur erreichbar wäre.

Dazu bitte ich um ein Code-Beispiel (Link). Bei Google steige ich nicht durch.

Ich weiß, dass du für deine Suchvorschläge eine eigene Lösung, die ich in ihren Einzelheiten nicht kenne, mit irgendwie fest positionierten Blöcken benutzt. Ich selbst würde das nicht so tun, sondern auf die von HTML bereitgestellte Datalist zurückgreifen. Mir fällt partout kein Grund ein, warum die nicht per Tastatur bedienbar sein sollte. Ein Codebeispiel erübrigt sich daher meiner Meinung nach.

Tschö, Auge

[Gunnar Bittersmann]

@@Sven 2020

Ist grundsätzlich von einer Autocomplete Suche abzuraten oder wäre das o.k. wenn die erzeugten Ergebnisliste auch mit der Tastatur bedienbar ist.

Denke, schon. Bei der Ergebnisliste müsste man vermutlich aria-live setzen, siehe MDN-Artikel auf englisch und auf deutsch.

Und nochwas: Habt ihr einen Tipp für einen guten kostenlosen Screenreader zum Testen?

VoiceOver ist auf iMacs, MacBooks, iPads und iPhones bereits mit dabei.

Für Windows gibt’s NVDA; für Android gibt’s Talkback.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!