So erstellen Sie zugängliche Web-Formulare

Sep 12, 2025

wie man

Formulare sind eine wesentliche Komponente des Webs, da sie Benutzer mit Ihrem Unternehmen anschließen und ihnen dabei helfen, zu erreichen, was sie auf Ihre Website oder die App kamen. Das heißt, Sie möchten sicherstellen, dass alle Ihre Benutzer Ihre Formulare verwenden können, ohne eine schreckliche Erfahrung zu erleben. Ziel ist es, diese wichtigen Benutzerinteraktionen so reibungslos wie möglich zu machen.

Es ist zwar wahr, dass Gebäudeformen manchmal eine schwierige Aufgabe sein können, wodurch sie mäßig zugänglich sind, nicht so kompliziert, wie Sie vielleicht denken (ein gutes Webseitenersteller wird es super einfach machen). Es gibt oft Ausreden, die herumgeworfen werden, wie "Wir haben keine Zeit, um sich um die Zugänglichkeit zu sorgen, oder" wir machen es später zugänglich ". Diese Entschuldigungen sind oft (falls nicht immer) ungültig und Sie können Ihrem Team helfen, diese Denkweise zu ändern.

Auf der Suche nach mehr Ratschlägen? Wir haben Sie mit Beiträgen zu Themen von Web-Hosting zu Cloud-Speicherung. .

13 Beste Stücke der Benutzer-Testsoftware

Hier sind einige Fragen, die Sie berücksichtigen sollten, wenn sie bildet:

Welche Schwierigkeiten könnten jemand mit visuellen Beeinträchtigungen mein Formular verwenden?
Hat der Benutzer einen klaren Hinweis darauf, welche Daten für die Eingabe erwartet werden?
Ist das Formular einfach zu bedienen - werden die Benutzer es schnell verstehen können?
Kann ich die Tastatur verwenden, um das Formular auszufüllen?

So erstellen Sie ein grundlegendes Abonnementformular

Ich habe Ihnen einen Startercode gegeben, um Ihnen beim Vorschein zu helfen. Gut Beginnen Sie damit und schließlich bekomme dazu .

Ich habe Sie mit einigen grundlegenden Styling und Elementen zur Verfügung gestellt, die ein einfaches Abonnementformular ausmachen würden, aber hier können wir hier tun, um dieses Formular nutzbarer zu machen. Mit allem, was Sie erstellen, wird Sie mit einem guten semantischen HTML einen langen Weg bekommen.

Beginnen wir mit dem Anschließen der & lt; input & gt; Elemente zu ihren jeweiligen & lt; label & gt; s. Wir machen das, indem wir das geben & lt; input & gt; eine ID und mit dem zum Attribut für das Attribut für das & lt; label & gt; . Wir können für diese "Name" und "E-Mail" verwenden, und wir haben bereits zwei Dinge getan:

Wir haben das Etikett programmgesteuert an die Eingabe zugeordnet. Der Vorteil ist, dass das Etikett an einem Bildschirmleser-Benutzer gelesen wird, wenn diese Eingabe fokussiert ist.
Der Benutzer kann jetzt auf das Etikett klicken, und der jeweilige Eingang wird fokussiert, sodass Benutzer jetzt eine größere Zielgröße haben.

Da unsere Ein- und Etiketten jetzt alle verdrahtet sind, können wir die HTML-Eingabetypen definieren. Diese sind wirklich nützlich und eine super einfache Möglichkeit, ein hervorragendes Benutzererfahrung zu erteilen. Hinzufügen des Art Das Attribut hilft dem Benutzer, Ihr Formular automatisch zu füllen, und bietet auch eine geeignetere Tastatur für mobile Benutzer. Für unseren Anwendungsfall können wir dies tun Typ = "Text" für den Nameneingang und Typ = "E-Mail" für den E-Mail-Eingang.

Wir möchten auch, dass unsere Benutzer eine gute Vorstellung davon haben, welche Art von Daten (und seiner Formatierung) von ihnen erwarten. Hier ist es ziemlich offensichtlich, aber das ist nicht immer der Fall. Es ist im Allgemeinen eine gute Praxis, ein Etikett bereitzustellen, das immer ein- und ein Platzhalter ist, der den erwarteten Einsatz kommuniziert. Dies bedeutet, dass das nicht verwendet wird Platzhalter Attribut als visuelles Etikett für Eingänge, an denen das Etikett nicht angezeigt wird, wenn ein Benutzer eingibt, wenn ein Benutzer eingibt. Dies war eine beliebte Praxis für viele Entwickler und muss wirklich einmal und für alle eingesetzt werden. Wir können einen Platzhalter von "Ex. Jane Doe" für den Namen und "Ex. [email protected]" für die E-Mail geben.

Jetzt können wir am Fokus arbeiten Zustand Styling. Das Standard-Styling der Fokuszustände unterscheidet sich zwischen den Browsern und wir können das Standard-Styling verbessern, um ihn benutzerfreundlicher zu gestalten. In unserem Fall möchten wir hier, dass die Eingaben eine dicke, farbige Gliederung aufweisen, die mit der Taste übereinstimmt.

14 einfache Möglichkeiten, um Ihre Website zugänglicher zu machen

Fügen Sie Fokus-Stile hinzu, um den Eingabewähler anzuzeigen

Schließlich müssen wir einige Fokus-Stile um das Button-Element hinzufügen. Dies wird oft übersehen, kann aber wirklich helfen, Keyboard zu helfen, nur Benutzer wissen, wo sie sind. Wir müssen das hinzufügen & amp; :: Moz-Focus-Innner Bit, um einiges Standard-Styling in Firefox loszuwerden (Möglicherweise möchten Sie dieses Snippet für den zukünftigen Gebrauch speichern).

So wie das, wir haben ein grundlegendes Abonnement-Formular, auf das Sie stolz sein können und verbessern können. Da wir gute Semantik verwendet haben, ist das Formular nur über Tastatur zugänglich (Versuchen Sie es mit der Registerkarte TAB und Leerzeichen / Eingabetasten). Die für den Schaltfläche verwendeten Farben sind ein Farbverhältnis von 11.51, das die AAA-Standards für WCAG erfüllt (Richtlinien der Webinfassung). Wir haben Etiketten sowohl für visuelle Benutzer als auch für Screen-Reader-Benutzer sowie für styled Focus-Zustände für unsere Keyboard-mithilfe von Freunden bereitgestellt. Beachten Sie schließlich, dass die Schriftart auf eingestellt ist 18px. im Körper. Dies macht unsere Form viel lesbarer (Sie sollten versuchen, über 14px zu bleiben).

Das Design und Gebäude mit Zugangszwecken erfordert die Praxis, aber Sie werden ein besserer Entwickler dafür sein und helfen, das Web einen besseren Ort zu machen.

generate, the award winning conference for web designers, returns to NYC on April 24-25! Click the image to book a ticket — Generieren Sie, die preisgekrönte Konferenz für Webdesigner, kehrt am 24. bis 25. April an NYC zurück! Klicken Sie auf das Bild, um ein Ticket zu buchen

Dieser Artikel wurde ursprünglich in Ausgabe 316 von veröffentlicht Netz Das weltweit meistverkaufte Magazin für Webdesigner und Entwickler. AUSGABE 316 Hier kaufen oder Abonnieren Sie hier .

Zum Thema passende Artikel:

Fix-Zugänglichkeit fehlschlägt mit diesem kostenlosen Werkzeug aus
50 Awesome neue Werkzeuge für Entwickler 2019
Wie zugänglich sind Ihre Entwürfe?

So erstellen Sie zugängliche Web-Formulare

So erstellen Sie ein grundlegendes Abonnementformular

Fügen Sie Fokus-Stile hinzu, um den Eingabewähler anzuzeigen

wie man - Die beliebtesten Artikel

Beginnen Sie mit der Adobe-Dimension CC

Master der Mischerbürste in Photoshop

Wie erstellt man einen Mandelbulb

Master-Verfahrensmodellierung

Machen Sie interaktive 3D-Typografie-Effekte

So erstellen Sie massive Explosionen mit V-Ray

vier Grundsätze der UX-Strategie

So erstellen Sie ein stilisiertes 3D-Zeichen für Spiele

Kategorien