Wie man ein ADA-freundliches Anmeldeformular erstellt

Geschätzt 6 Lesedauer in Minuten
|
Aktualisiert 24. Okt. 2024, 15:56 EST
Du wirst lernen

Du wirst lernen

Lerne, wie du den Zugänglichkeitsassistenten auf der Registerkarte Formularwarnungen im Anmeldeformular-Editor nutzen kannst, um einige der häufigsten Probleme bei der Einhaltung der Zugänglichkeitsrichtlinien für Web-Inhalte (WCAG) zu vermeiden. Unternehmen, die ihre Websites ADA-freundlich gestalten wollen, sollten sich auf die WCAG-Standards beziehen und diese befolgen. Der Assistent für Barrierefreiheit hilft dir dabei, Anmeldeformulare zu erstellen, die für alle Besucher deiner Website zugänglich sind. 

Die WCAG-Standards zielen darauf ab, Webinhalte für alle zugänglicher zu machen, auch für Menschen mit Behinderungen. Die Zugänglichkeit von Websites ist in vielen Ländern gesetzlich vorgeschrieben, und die Umsetzung der WCAG-Standards kann dazu beitragen, viele dieser Anforderungen zu erfüllen. Bitte beachte, dass der Zugänglichkeitsassistent zwar dabei helfen soll, Zugänglichkeitsprobleme gemäß den WCAG 2.0 AA-Standards, wie sie für das Anmeldeformular gelten, zu erkennen, dass er aber aufgrund bekannter Einschränkungen der vorhandenen Technologie oder anderer technologieunabhängiger Faktoren möglicherweise nicht in der Lage ist, alle Zugänglichkeitsanforderungen zu erkennen. Die Verwendung des Zugänglichkeitsassistenten kann bei der Erfüllung der Anforderungen an die Barrierefreiheit im Internet helfen, garantiert aber nicht die Einhaltung der geltenden Gesetze. Um die rechtlichen Auswirkungen und Anforderungen der Barrierefreiheit im Internet zu klären, wird empfohlen, einen qualifizierten Anwalt zu Rate zu ziehen.

Bevor du beginnst

Bevor du beginnst

Im Folgenden findest du eine Liste von Problemen, die der Zugänglichkeitsassistent überprüft. Bitte beachte, dass die unten aufgelisteten Fehlertypen so sind, wie sie der Eingabehilfen-Assistent von Klaviyo identifiziert, und nicht die spezifischen Eingabefeldnamen im Form Builder. Wenn ein Fehler entdeckt wird, erscheint eine Warnung mit einer Beschreibung und einer Aufforderung zur Fehlerbehebung auf der Registerkarte Formularwarnungen.

Fehlerart

Beschreibung

Button-Name

Stellt sicher, dass die Schaltflächen einen erkennbaren Text haben.

Image-alt

Stellt sicher, dass das Bildelement einen alternativen Text (alt text) oder eine HTML-Rolle von "none" oder "presentation" hat.

Farbkontrast

Stellt sicher, dass der Kontrast zwischen Vorder- und Hintergrundfarben den Schwellenwerten für das Kontrastverhältnis nach WCAG 2 AA entspricht.

Link-in-Text-Block

Achte darauf, dass die Links vom umgebenden Text unterscheidbar sind, ohne dass die Farbe eine Rolle spielt.

Link-Name

Stellt sicher, dass die Links einen erkennbaren Text haben.

Etikett

Stellt sicher, dass jedes Formularelement eine Beschriftung hat.

Erstelle ein ADA-freundliches Anmeldeformular

Erstelle ein ADA-freundliches Anmeldeformular

Egal, ob du dein erstes Anmeldeformular erstellst oder ein Formular aktualisierst, der Zugänglichkeitsassistent hilft dir, Probleme mit der Zugänglichkeit zu erkennen und zu beheben.

So erstellst du ein Formular, das den oben genannten WCAG-Standards entspricht:

  1. Erstelle ein neues Anmeldeformular oder öffne den Formulareditor für eines deiner bestehenden Anmeldeformulare.
  2. Verwende den Editor, um Inhalte hinzuzufügen und das Formular so zu gestalten, dass es zu deiner Marke passt.

    Der Eingabehilfen-Assistent sucht nach Formularelementen, die nicht den WCAG-Standards entsprechen, während du dein Formular erstellst, und protokolliert sie als aktive Warnmeldungen. Bei einem bestehenden Formular werden alle Probleme im Abschnitt " Aktive Warnungen"protokolliert.

  3. Klicke auf die Formularwarnungen unten links, um die festgestellten Probleme mit der Barrierefreiheit zu sehen.
    Die Registerkarte Formularwarnungen wird in der unteren linken Ecke des Anmeldeformular-Editors hervorgehoben und zeigt 2 aktive Warnmeldungen an.
    Unter Aktive Warnungen siehst du verschiedene Karten, die die Elemente beschreiben, die nicht den WCAG-Standards entsprechen und die der Zugänglichkeitsassistent in deinem Formular identifiziert hat, zusätzlich zu anderen inhaltlichen oder gestalterischen Problemen. Jede Karte enthält eine Beschreibung des Problems und eine Aufforderung, es entweder zu beheben oder zu verwerfen. Wenn du zum Beispiel ein Bild zu deinem Anmeldeformular hinzufügst, weist dich der Zugänglichkeitsassistent darauf hin, dass du dem Bild einen Alt-Text hinzufügen sollst. Der Alt-Text enthält eine Beschreibung des Bildes, damit Kunden, die deine Website mit einem Bildschirmlesegerät besuchen, den Inhalt von digital aufrufen können.
    Die Registerkarte Formularwarnungen ist geöffnet und zeigt 3 identifizierte Zugänglichkeitsprobleme in einem Anmeldeformular an.
  4. Um ein Problem zu beheben, folge den Vorschlägen auf der Karte und löse oder ergänze das fehlende Element. Wenn du mit deinen Änderungen zufrieden bist, klicke auf Reparieren.

    Bei einigen Problemen wirst du aufgefordert, sie in den Einstellungen des jeweiligen Blocks (z. B. eines Schaltflächenblocks) oder im Abschnitt "Stile" zu beheben, anstatt direkt auf der Registerkarte " Formularwarnungen". Um diese Probleme zu lösen, notiere dir die Problembeschreibung auf der Warnkarte und klicke dann auf Block bearbeiten (oder Stile bearbeiten), um die vorgeschlagenen Änderungen vorzunehmen. Navigiere zurück zur Registerkarte Formularwarnungen , sobald du das Problem behoben hast.

    Ein Beispiel für ein Zugänglichkeitsproblem auf der Registerkarte Formularwarnungen mit der Aufforderung, den Block zu bearbeiten, um das Problem zu beheben.
  5. Wenn du einen oder mehrere der Vorschläge zur Barrierefreiheit ignorieren möchtest, klicke auf Ablehnen. Wenn du ein Problem verwirfst, erscheint ein modales Fenster, in dem du gefragt wirst, ob du deine Wahl abbrechen oder bestätigen möchtest.
    Das Benachrichtigungsfenster, das erscheint, wenn du ein Problem mit der Barrierefreiheit auf der Registerkarte Gorm-Benachrichtigungen verwirfst.

    Du kannst zu einem späteren Zeitpunkt zu den ignorierten Problemen zurückkehren, indem du den Assistenten öffnest und deine zuvor abgelehnten Benachrichtigungen ansiehst. Es wird empfohlen, dass du alle Probleme behebst, die im Zugänglichkeitsassistenten angezeigt werden. Die Nichteinhaltung der WCAG-Standards kann dein Unternehmen einem rechtlichen Risiko aussetzen.

    Wenn du alle erkannten Probleme erfolgreich behoben oder verworfen hast, wird auf der Registerkarte Formularwarnungen die Meldung "Keine aktiven Warnmeldungen" angezeigt.
    Der Umschalter in der Registerkarte Formularwarnungen, mit dem du zwischen aktiven und abgelehnten Warnmeldungen wechseln kannst.
  6. Klicke auf " Veröffentlichen", um dein Anmeldeformular auf deiner Website mit deinem Accessibility Update live zu schalten.

    Wenn du auf Veröffentlichen klickst, wirst du aufgefordert, alle aktiven Formularwarnungen zu korrigieren. Du kannst wählen, ob du die Fehler auf der Registerkarte Formularwarnungen beheben oder trotzdem veröffentlichen willst.

JAWS Berichte zur Barrierefreiheit

JAWS Berichte zur Barrierefreiheit

Bitte beachte, dass JAWS, ein Bildschirmleseprogramm für Microsoft Windows, Anmeldeformulare auf deiner Website, die in Klaviyo erstellt wurden, möglicherweise nicht erkennt. Damit Website-Besucher, die JAWS verwenden, trotzdem mit dem Anmeldeformular auf deiner Website interagieren können, empfehlen wir, einen zusätzlichen Codeschnipsel in deine Website einzufügen, der sie für JAWS zugänglicher macht. 

Kopiere das folgende Code-Fragment und füge es in die Hauptthemen-Datei deiner Website ein, damit JAWS dein Klaviyo Anmeldeformular erkennt und liest:



Nächste Schritte

Nächste Schritte

Es ist wichtig, dass du die WCAG-Standards in allen deinen Klaviyo Anmeldeformularen einhältst. Bereits veröffentlichte Anmeldeformulare können noch Probleme mit der Barrierefreiheit enthalten, die du beheben kannst. Beachte jedoch, dass Klaviyo nicht automatisch alle nicht WCAG-konformen Probleme behebt. 

Navigiere zur Registerkarte Formularwarnungen im Editor für jedes deiner bestehenden Formulare, um alle Probleme mit der Barrierefreiheit zu beheben und die WCAG-Konformität deiner Website zu gewährleisten.

Zusätzliche Ressourcen

Zusätzliche Ressourcen

War dieser Artikel hilfreich?
Nutze dieses Formular nur für Feedback zu Artikeln. So kontaktierst du den Support.

Mehr von Klaviyo entdecken

Community
Vernetze dich mit Kolleg*innen, Partner*innen und Klaviyo-Expert*innen, um dich inspirieren zu lassen, Erkenntnisse auszutauschen und Antworten auf deine Fragen zu erhalten.
Live-Schulung (EN) ↗
Nimm an einer Live-Sitzung mit Klaviyo-Expert*innen teil, um mehr über Best Practices, die Einrichtung wichtiger Funktionen und mehr zu erfahren.
Support

Kontaktiere den Support über dein Konto.

Support per E-Mail (kostenlose Testversion und kostenpflichtige Konten) Verfügbar 24/7

Chat- / virtuelle Unterstützung
Verfügbarkeit abhängig von Standort und Abonnementtyp