Auto Suggestion

Auto Suggestion

Auto Suggestion – Wenn die Anzahl der verfügbaren Sätze Screenreader-Benutzern nicht angesagt wird, wissen sie nicht, dass sie da sind. (Bild: Google)

Automatisiertes Bieten ist heutzutage allgegenwärtig, von sozialen Netzwerken wie Twitter und Facebook bis hin zu Shopping-Sites wie eBay und Amazon. Mit Plugins, die für die neuesten Frameworks und Bibliotheken verfügbar sind, ist das Hinzufügen automatischer Gebote zu Ihrer Website relativ einfach.

Auto Suggestion

Auto Suggestion

Aber was ist mit der Erschwinglichkeit? Ich habe mir Autosuggestion-Komponenten aus vielen wichtigen Frameworks angesehen, und die meisten von ihnen haben eines gemeinsam: Sie sind nicht richtig zugänglich.

Zsh Auto Suggestions

Google startete AutoSuggest (auch bekannt als Google Suggest) als ein Google Labs-Projekt im Jahr 2004 und sagte, es “… gibt Ihnen während der Eingabe Suchvorschläge in Echtzeit.”

Automatisiertes Bieten ist heutzutage allgegenwärtig, von sozialen Netzwerken wie Twitter und Facebook über Einkaufsseiten wie eBay und Amazon bis hin zu Kreditkartenanträgen.

Mit Plugins, die für die neuesten Frameworks und Bibliotheken verfügbar sind, ist das Hinzufügen automatischer Gebote zu Ihrer Website relativ einfach.

Einige gehen noch weiter und stellen sicher, dass die Vorschläge auf der Tastatur verwendet werden können, aber die meisten brechen ab, wenn eine Auswahl getroffen wird, weil der Fokus an einer zufälligen Stelle auf der Seite landet. Dies führt zu Verwirrung und Frustration bei Tastaturbenutzern und Bildschirmlesern.

Ways To Use Autosuggestion

Screenreader sind ein weiterer Bereich, in dem diese Autosuggestionen oft versagen. Wenn die Anzahl der verfügbaren Sätze Screenreader-Benutzern nicht angesagt wird, wissen sie nicht, dass sie da sind. Für Screenreader-Benutzer sind diese automatisch vorgeschlagenen Komponenten also nur Eingabefelder.

Dies sind meine Anforderungen, um die automatische Gebotseinstellung zu aktivieren. Ich habe Codeausschnitte und Links zu funktionierendem Code am Ende des Beitrags eingefügt.

Ein sichtbarer Fokusindikator (z. B. gepunktete Linie, blinkender Cursor) lässt Tastaturbenutzer wissen, wo sich der Fokus der Tastatur befindet. Focus Visible ist auch eine Anforderung der Web Content Accessibility Guidelines 2.0 (WCAG) (Erfolgskriterien 2.4.7).

Auto Suggestion

Hinweis: Wenn Sie für ein Eingabefeld verwenden und die von Browsern bereitgestellten Fokusumrisse nicht entfernen, sollte der sichtbare Fokus bereits funktionieren. Sie müssen einen sichtbaren Fokus hinzufügen, um die Listenoptionen mit der Tastatur nach oben und unten zu verschieben (wie im Code gezeigt).

Creating New Item Should Auto Suggest Your Email Address As Username — 1password Support Community

Für unseren Autosuggest bedeutet dies, ein

Die Liste soll nur angezeigt werden, wenn es Vorschläge mit Benutzereingaben gibt. Wenn es keine Angebote gibt, zeigen Sie die Liste nicht an.

Wenn wir Vorschläge zum Eingabefeld haben, ist es sinnvoll, diese Vorschläge in der Nähe des Eingabefelds anzuzeigen. Es ist gängige Praxis, Sätze direkt unter dem Eingabefeld anzuzeigen, daher unsere Anforderung.

Aber warte! Diese “Listenpositions”-Abfrage bezieht sich auf die Position der Liste auf dem Bildschirm und die Position des Listencodes in der Seitenquelle. Es ist sinnvoll, die Vorschlagsliste auf dem Bildschirm in der Nähe des Eingabefelds zu platzieren, aber es ist ebenso wichtig, die Vorschlagsliste in der Nähe des Eingabefelds im Code zu platzieren, damit Benutzer von Screenreadern leicht darauf zugreifen können.

Schematic Of Auto Suggestion Scenario. In A Session (e.g. Time Interval…

Das Platzieren der Vorschlagsliste direkt unter den Eingabefeldern auf dem Bildschirm und im Code funktioniert für alle am besten.

Dies ist entscheidend für Personen, die keine Maus verwenden können, z. B. Personen mit Sehbehinderungen, Handzittern oder Verletzungen durch wiederholte Bewegungen (RSI). Tastaturkompatibilität ist auch eine Voraussetzung für WCAG 2.0 Level A (Keyboard Success Criteria 2.1.1).

Der Nutzer sollte nicht durch die Vorschlagsliste scrollen, da dies vom Eingabefeld ablenkt. Kein Eingabefokus bedeutet, dass Benutzer nicht weiter tippen können, um Vorschläge zu verfeinern. Pfeiltasten zur Rettung!

Auto Suggestion

Die Eingabetaste sollte die Liste schließen und das Eingabefeld mit dem ausgewählten Angebotslisteneintrag füllen. Der Fokus bleibt im Eingabefeld.

Tars Feature Update]

Wenn keiner der Vorschläge zutrifft, können Tastaturbenutzer die Esc-Taste drücken, um die Liste zu schließen, ohne den Inhalt des Eingabefelds zu ändern. Der Fokus bleibt im Eingabefeld.

Wir müssen Screenreader-Benutzern mitteilen, dass das Eingabefeld ein Autosuggestion ist und dass basierend auf ihrer Eingabe möglicherweise Vorschläge verfügbar sind.

Dazu verwenden wir Accessible Rich Internet Applications (ARIA), eine technische Spezifikation des W3C. Es definiert HTML-Attribute, um die Semantik des Webseitencodes zu verbessern und unterstützende Technologien (z. B. Screenreader) mit Informationen über nicht-native HTML-Komponenten wie unsere automatischen Vorschläge zu versorgen.

ARIA ist leistungsstark und kann Ihnen helfen, Ihre Websites und Webanwendungen zugänglicher zu machen. Dies ist jedoch nicht die Lösung für alle Ihre Zugänglichkeitsprobleme.

Faith Is A State Of Mind Which May Be Induced, Or Created, By Affirmation Or Repeated Instructions To The Subconscious Mind, Through The Principle Of Auto Suggestion .

Wenn Sie ein natives HTML-Element oder -Attribut mit bereits integrierter Semantik und Verhalten verwenden können, anstatt das Element wiederzuverwenden und eine ARIA-Rolle, einen Status oder eine Eigenschaft hinzuzufügen, um es verfügbar zu machen, dann tun Sie dies. – Verwendung von ARIA, W3C (https://www.w3.org/TR/aria-in-html/)

ARIA ist wie ein Lückenfüller, es hilft, die Dinge ein wenig zu glätten. Aber es gibt Ihnen nicht alle Extras wie natives HTML.

Im Gegensatz zu