Veraltete Browser? Veraltete assistive Technologien? JavaScript schafft Abhilfe! Im letzten Teil unserer Reihe über barrierefreie Formularvalidierung und Verbesserungen der Benutzerfreundlichkeit fügen wir das jQuery-Validation-Plugin hinzu, um sicherzustellen, dass unser Formular auf allen Geräten, die JavaScript unterstützen – einschließlich des gefürchteten IE6 –, universell barrierefrei ist.
Demo-Formular mit HTML5, WAI-ARIA und jQuery -Validierung (Standardeinstellungen)
Demo-Formular mit HTML5, WAI-ARIA und jQuery -Validierung (angepasste Einstellungen)
HTML5 und ARIA haben Einschränkungen – JavaScript hingegen nicht!
Sicher, JavaScript hat einige Einschränkungen, aber eigentlich gibt es keine, wenn man es unter Berücksichtigung der Barrierefreiheit programmiert. Es funktioniert auf so gut wie allen Browsern und Mobilgeräten. Niemand deaktiviert JavaScript wirklich, es sei denn, man ist ein Sicherheitsfreak. Wenn man für den Fall gewappnet sein möchte, dass JavaScript deaktiviert ist, und die Datenbank vor SQL-Injection-Angriffen schützen will, muss man die Formulareingaben auch serverseitig validieren . Die serverseitige Validierung kann als die unterste Ebene der barrierefreien Formularvalidierung betrachtet werden und funktioniert in jedem Browser, einschließlich Feature-Phones.
Das jQuery-Validierungs-Plugin hinzufügen
jQuery ist das führende JavaScript-Framework im Web und kann als Sieger des „JS-Framework-Kriegs“ der letzten Jahre bezeichnet werden. Das Motto von jQuery lautet: „Weniger schreiben, mehr erreichen“. Minimalismus und Barrierefreiheit lassen sich sehr gut miteinander vereinbaren!
It’s very simple to add jQuery Validation to any HTML form. Link to jQuery, we’re using a content delivery network here so we don’t have to download the JavaScript file. Then link to the validation plugin. Then tell jQuery to run the validation plugin on your form with the id attribute you want to validate. This will happen after the document is finished loading. Add this code to the <head>.
Das Plugin erkennt unsere Eingaben anhand des HTML5-Attributs „required“ und führt standardmäßig stattdessen eine eigene JavaScript-Validierung durch, anstatt HTML5 zu verwenden. Das ist ein Problem. Wir möchten die HTML5-Validierung in Browsern durchführen, die diese unterstützen, und nur in Browsern, die HTML5 nicht unterstützen, die JavaScript-Validierung ausführen.
Standard-Einstellungen für die jQuery-Validierung
There are some issues with the default settings. It stops the native HTML5 validation. The other big accessibility issue is that by default the error messages are placed in a second <label>. So there are two labels pointing to one input. This is a problem for some screen readers. VoiceOver will not announce the second label when the user tabs through the form. Steve Faulkner (@stevefaulkner) wrote a recent blog post titled, Notes on applying multiple labels for a control using the label element, and created a test case, multiple labels for a control using the label element, where you can see where multiple labels fail in certain AT. aria-labelled by is a better solution than using multiple labels.
Bisher haben wir also zwei Probleme mit den Standardeinstellungen. Die HTML5-Validierung ist deaktiviert, und zwei Beschriftungen verweisen auf ein Eingabefeld. Das dritte Problem besteht darin, dass die Fehlermeldung unterhalb des Eingabefelds angezeigt wird. Wir müssen sie also in die ursprüngliche Beschriftung verschieben und mithilfe von CSS an der gewünschten Stelle positionieren.
Anpassung der jQuery-Validierung
Optionen für die Methode „validate()“
Es gibt zahlreiche Möglichkeiten, die Standardeinstellungen des Validierungs-Plugins zu ändern. Wir möchten die Parameter „errorPlacement“ und „errorElement“ anpassen. Außerdem möchten wir das Attribut „novalidate“ entfernen, das standardmäßig auf unser Formular angewendet wird.
Change the code in the <head> to this:
To change the errorPlacement I found some code on Stack Overflow to select the associated label element of an input field and append the error message to that. Then I changed the errorElement to be an <em> rather than another <label>. And then used jQuery to select the form on the page and remove the novalidate attribute.
Genau dieses Verhalten wollen wir erreichen. Moderne Browser wie Chrome und Firefox führen zunächst eine HTML5-Validierung durch, während andere Browser mit geringerer HTML5-Unterstützung wie Safari auf Mac und iOS die jQuery-Validierung nutzen.
Es funktioniert sogar im IE6! Schauen Sie sich die beiden Demo-Links in verschiedenen Browsern an, um die Unterschiede zu sehen.
Demo-Formular mit HTML5, WAI-ARIA und jQuery -Validierung (Standardeinstellungen)
Demo-Formular mit HTML5, WAI-ARIA und jQuery -Validierung (angepasste Einstellungen)
Formulare können mühsam und schwer zugänglich sein!
Lasst uns dieses Problem bei der Dateneingabe im Internet lösen!
Diese drei Beiträge basieren auf einem Vortrag, den ich auf der CSUN 2012 gehalten habe. Ich hoffe, euch hat die Serie gefallen!
Links zu allen drei Beiträgen dieser Reihe:
- Barrierefreie clientseitige Formularvalidierung mit HTML5
- Barrierefreie clientseitige Formularvalidierung mit HTML5 und WAI-ARIA
- Barrierefreie clientseitige Formularvalidierung mit HTML5, WAI-ARIA und dem jQuery-Validierungs-Plugin
Anmerkungen? Fragen?
Was haltet ihr also von diesen drei Ebenen der Barrierefreiheit, die wir unserem Formular hinzugefügt haben? Bei meinem Vortrag auf der AccessU 2012 erhielt ich einen Kommentar, dass die Erstellung eines barrierefreien Formulars offenbar mit viel zusätzlichem Aufwand verbunden sei. Ich bin der Meinung, dass es sich absolut lohnt, ein sehr benutzerfreundliches Formular zu erstellen, das auf allen Geräten, die Barrierefreiheit unterstützen, universell zugänglich ist.
Bitte lass mich wissen, wenn du Verbesserungsvorschläge hast oder Fehler findest.
