Barrierefreie Formulare mit Angular erstellen

Bei der Suche nach Beispielen für Angular-Formulare und deren Einrichtung ist uns ein Trend aufgefallen, der möglicherweise von AngularJS-Beispielen übernommen wurde: ein vorgeschlagener Ansatz beim Entwerfen und Entwickeln von Formularen, um eine Inline-Validierung einzubeziehen und die Submit-Steuerung in einem deaktivierten Zustand zu reservieren bis gültige Daten eingegeben wurden. Obwohl dieses Paradigma moderner erscheinen mag und dem Benutzer helfen kann, das Formular erfolgreich auszufüllen, gibt es einige Probleme mit der Benutzerfreundlichkeit und Zugänglichkeit, die auftreten, wenn dieser Workflow implementiert wird.

Wir werden diese Konzepte eingehend untersuchen, diskutieren, warum sie möglicherweise nicht die beste Lösung für Ihre Benutzer sind, und praktische, umfassendere Lösungen anbieten, die in Ihren Angular-Formularen implementiert werden können.

Trendiger Arbeitsablauf

Bei der Überprüfung der bereitgestellten Beispielansätze sehen wir insbesondere zwei Trends: Förderung der Inline-Validierung jedes Formularsteuerelements, nachdem es „berührt“ wurde (im Wesentlichen, wenn sich der Benutzer von der input entfernt) und Belassen der Senden-Schaltfläche bis zum Ende in einem disabled Zustand Validierungstest wurde erfüllt.

Inline-Validierung

Wir empfehlen normalerweise, keine Inline-Validierung zu verwenden, da diese Methode den Benutzer manchmal verwirren oder frustrieren kann. Einige Beispiele, die dies veranschaulichen, sind:

• Wenn jemand, der einen Bildschirmleser verwendet, durch ein Formular navigiert, um einen Lay-of-the-Land zu erhalten, versucht, zu lesen, was jedes Feld ist und welche Daten erwartet werden
• Jemand, der vielleicht Felder in einer anderen Reihenfolge ausfüllen möchte
• Wenn jemand ein Feld verlässt, um etwas nachzuschlagen, um sicher zu sein, welche Daten in das Formularsteuerelement eingefügt werden sollen

Diese einfachen Aktionen lösen die Fehlermeldung aus und das Ergebnis kann ziemlich irritierend sein.

In unseren eigenen Usability-Studien schimpfen oder fluchen Menschen oft, wenn Fehlermeldungen erscheinen, bevor sie überhaupt mit dem Ausfüllen von Formularen begonnen haben!

Zusätzliche Zugänglichkeitsprobleme treten auf, wenn der Benutzer von einem Feld wegnavigiert; Die Fehlermeldung wird visuell angezeigt, jedoch nicht mit Hilfstechnologien. Um die Fehlermeldung zu hören, muss der Benutzer rückwärts durch das Formular navigieren. Dies wäre eine unerwartete erforderliche Aktion, um Fehlermeldungen zu hören.

Deaktivierter Zustand

Wenn die Schaltfläche „Senden“ standardmäßig disabled ist, steht die Schaltfläche „Senden“ erst zur Verfügung, nachdem alle Formularvalidierungsregeln erfüllt wurden. Wenn dies vorhanden ist, kann dies zu einer verwirrenden oder frustrierenden Benutzererfahrung führen. Es gibt keinen Hinweis darauf, warum der Senden-Button nach dem Ausfüllen des Formulars deaktiviert wird.

Folglich können disabled Schaltflächen zwei zusätzliche Herausforderungen für Einzelpersonen darstellen:

1. Menschen mit Sehbehinderung können den Schaltflächentext im gedimmten Zustand möglicherweise nicht wahrnehmen.
2. Einige Hilfstechnologien überspringen deaktivierte Elemente; Benutzer von Screenreadern erhalten möglicherweise kein vollständiges Bild davon, was auf der Benutzeroberfläche verfügbar ist, was zu Unsicherheit führt.

Beispielformular

In dem unten verlinkten Beispiel haben wir ein allgemeines Formular im „Kontakt“-Stil. Dieses Formular enthält den oben beschriebenen Workflow, einschließlich der Trends zum Testen der Eingabevalidität, nachdem mit dem Steuerelement interagiert wurde, und die standardmäßig deaktivierte Senden-Schaltfläche:

• Angular Forms Demo – Some Accessibility und das zugehörige Code-Repository zum Auschecken.

Hinter den Kulissen

Hier ist, was im Code passiert, damit dieser aktuelle Workflow stattfindet:

Für jedes Formulareingabesteuerelement, das eine Validierung erfordert, gibt es eine *ngIf input . Diese Richtlinie testet zwei Bedingungen:

1. Testen Sie die Validierungsbedingung mit der contactForm.controls[name].hasError()
2. Testen Sie den Status des Steuerelements mithilfe des contactForm.controls[name].touched

 < div *ngIf= "contactForm.controls['firstName'].hasError('required') && contactForm.controls['firstName'].touched" > You must include a First Name. </ div >

Da jede Bedingungsanweisung die „und“-Klausel verwendet, müssen beide Bedingungen erfüllt sein, um die Eingabefehlermeldung anzuzeigen. Grundsätzlich besagen diese Bedingungen: "Wenn der Benutzer sich von der input entfernt, überprüfen Sie die Gültigkeit der Daten. Wenn die Daten nicht gültig sind, zeigen Sie die Fehlermeldung an."

Die Senden-Schaltfläche verfügt über die Eigenschaftsbindung [disabled]="!contactForm.valid" . Diese Bindung hält die Schaltfläche in einem deaktivierten Zustand, bis die Formulardaten vollständig gültig sind. Nur dann kann der Benutzer die Schaltfläche finden und aktivieren.

 < button type = "submit" [ disabled ]= "!contactForm.valid" > Submit </ button >

Berücksichtigung der Barrierefreiheit mit diesem Workflow

Um einige dieser potenziellen Schmerzpunkte für Ihre Benutzer zu lindern, empfehlen wir einen ganz anderen Ansatz. Erwägen Sie, die folgenden Änderungen an Ihrem Formular-Workflow vorzunehmen:

1) Ermöglichen Sie die Validierung bei der erstmaligen Übermittlung des Formulars, indem Sie die button „Senden“ aktiviert lassen. Dadurch kann der Benutzer das Formular leicht erkunden und sich beim ersten Durchlauf mit der Formularstruktur vertraut machen. Auch wenn die Formularfelder Fehler enthalten, erlauben Sie den Benutzern, das Formular zu ihren Bedingungen zu senden, wenn sie sich dazu wohl fühlen. Dazu entfernen wir einfach die Property Binding [disabled] von der submit -Schaltfläche.

 < button type = "submit" > Submit </ button >

2) Fügen Sie eine neue Klasseneigenschaft, submitted , die als boolesches Flag dient. Standardmäßig ist sein Wert false . Wenn auf die Schaltfläche zum Absenden des Formulars geklickt wird, aktualisieren Sie ihren Wert auf true . Diese Eigenschaft wird innerhalb der Vorlage als Teil der *ngIf Direktive verwendet, wenn unsere Validierungsregeln überprüft werden und ob eine Fehlermeldung angezeigt werden soll.

 export class ContactFormComponent { submitted: boolean ; // … submitForm(value: any) { this .submitted = true ; // … } }

3) Wenn sich ein input in einem Fehlerzustand befindet, geben Sie den Text der Fehlermeldung innerhalb seines entsprechenden label aus . Dies dient als Erinnerung an den Fehler und den erwarteten Wert, wenn zu dem Steuerelement navigiert wird, sowie an alle anderen Steuerelemente in einem Fehlerzustand, wenn der Benutzer sich durch den Formularinhalt bewegt.

< label for = "firstName" > < input id= "firstName" type= "text" [formControl]= "contactForm.controls['firstName']" /> < div *ngIf= "contactForm.controls['firstName'].hasError('required') && submitted" > You must include a First Name. </div> </label>

Bonus: Dies hat auch den Vorteil, dass ein viel größerer Klick-/Tap-Bereich für Personen geschaffen wird, die eine Maus oder ein mobiles Gerät verwenden, da die Labels selbst Ziele sind!

Wir können überprüfen, ob sich die Eingabe in einem Fehlerzustand befindet, indem wir die Direktive *ngIf . Verwenden Sie weiterhin die Methode controls[name].hasError() “, um die Gültigkeit des Eingabewerts zu testen, aber entfernen Sie das Flag controls[name].touched , da wir diese Eigenschaft nicht mehr benötigen. Hier können wir die neu submitted Eigenschaft verwenden, um zu sehen, ob das Formular übermittelt wurde. Wenn der input ungültig ist und das submitted gesendet wurde, wird die Fehlermeldung angezeigt.

Optimieren Sie Ihre Formulare mit Barrierefreiheit der nächsten Stufe

Bisher haben wir die Flussprobleme mit diesem Ansatz behoben, indem wir den disabled Zustand der Senden- button standardmäßig entfernt und jede Eingabe nach der ersten Übermittlung validiert haben. Es gibt ein paar zusätzliche Schritte, die wir unternehmen können, um die allgemeine Zugänglichkeit großer/komplexer Formulare erheblich zu verbessern. Um Over-Engineering zu vermeiden, wären kurze Formulare wie ein Anmeldeformular von Folgendem ausgenommen:

1) Wenn Fehler anzuzeigen sind, geben Sie jede Fehlermeldung in einer ul -Liste oben im Formular über den Formularfeldern aus. Wenn diese Liste visuell dargestellt wird, verschieben Sie den Tastaturfokus programmgesteuert zum Anfang der Liste, vorzugsweise zu einem Überschriftenelement. Dadurch wird eine Benachrichtigung bereitgestellt, dass nach dem Klicken auf die button „Senden“ etwas passiert ist, dass Fehler behoben werden müssen, und die Gesamtzahl der Fehler (über die Anzahl der ul -Listenelemente). Das Implementieren jeder Fehlermeldung in einer Liste hilft Benutzern, die Fehler zu verstehen und dann zu navigieren, um sie zu beheben. Wählen Sie in der Methode submitForm() die Überschrift aus und wenden Sie focus() an, wenn das Formular ungültig zurückgibt.

< ul id = "error-list" > < li * ngIf = "contactForm.controls['firstName'].hasError('required')" > … </ li > … </ ul >

2) Implementieren Sie für jede Fehlermeldung in der ul -Liste den Text als Link, der auf das entsprechende input zeigt, indem Sie dessen id -Wert mit dem href -Attribut des Links abgleichen. Wenn dies eingerichtet ist, können Benutzer den Text der Fehlermeldung hören und haben eine Verknüpfung direkt zur betreffenden input , was für Benutzer mit Geschicklichkeitsproblemen hilfreich ist, die auf die Tastatur angewiesen sind.

< a href = "#firstName" > You must include a First Name </ a > <!-- … --> < input id = "firstName" type = "text" [ formControl ]= "contactForm.controls['firstName']" />

3) Stellen Sie sicher, dass alle erforderlichen Felder allen Benutzern übermittelt werden, indem Sie einen visuellen „*“ (erforderlich) Indikator mit einer Textalternative für Benutzer von Hilfstechnologien haben. Dies hilft allen Benutzern zu verstehen, welche Teile des Formulars ausgefüllt werden müssen und welche übersprungen werden können. Dies könnte sogar ein SVG-Bild mit alternativem Text sein!

 < span aria-hidden = "true" > * </ span > < span class = "visuallyhidden" > Required </ span >

Alles zusammenfügen

Hier nochmal unser Beispielformular, aber mit den oben beschriebenen Empfehlungen:

• Angular Forms Demo – Next-Level Accessibility und das zugehörige Code-Repository zum Ausprobieren.

Mit diesen Änderungen wird jeder, der sich auf Hilfstechnologien verlässt oder ein wenig mehr Anleitung beim Ausfüllen eines Formulars benötigt, ein klareres Verständnis dafür haben, wie das Formular strukturiert ist und den aktuellen Status des Formulars, wenn es Fehler gibt und wie es geht Adressieren sie. Wenn beim Senden Änderungen vorgenommen werden müssen, wird der Fokus auf die Fehlerliste gehoben. Von dort aus lenken Fehlerlinks den Fokus direkt auf die betreffende input . Ab diesem Zeitpunkt werden Fehlermeldungen beim Durchlaufen des Formulars angekündigt, und Änderungen an den Daten können vom Benutzer mit größerer Sicherheit leicht vorgenommen werden.

Denken Sie daran, dass dieser empfohlene Arbeitsablauf nicht spezifisch für Angular-Formulare ist. Die Techniken und Konzepte, die in diesem Beitrag untersucht werden, können auf jedes Formular angewendet werden, indem jedes JavaScript-Framework oder jede JavaScript-Bibliothek verwendet wird.

Angular ist in der Lage, Barrierefreiheitsfunktionen zu unterstützen, aber Entwickler müssen dennoch sicherstellen, dass die Implementierung die Bedürfnisse aller Benutzer erfüllt.

Das Wichtigste zum Mitnehmen ist sicherzustellen, dass Ihre Benutzer das Layout und die Eingaben des Formulars erkennen und ihre Aufgabe zum Ausfüllen des von Ihnen entworfenen Formulars erfüllen können. Sie haben das Vertrauen und die Gewissheit, dass sie das Richtige getan haben und Ihre beiden Ziele erreicht wurden!

Erwägen Sie, den Fluss Ihrer Angular-Formulare mit diesen Vorschlägen zu verbessern, um Ihre Benutzer beim erfolgreichen Ausfüllen von Formularen mit Leichtigkeit zu unterstützen.