Barrierefrei heißt: dein Funnel funktioniert auch für Menschen, die nicht sehen, nicht mit der Maus arbeiten oder eine Farbschwäche haben. Das meiste davon bringt jeder Funnel mit. Drei Dinge entscheidest du selbst.
Was jeder Funnel automatisch mitbringt
Du musst dafür nichts einschalten und nichts einstellen.
- Bedienung nur mit der Tastatur. Jede Antwort, jeder Knopf und jedes Feld ist mit der Tabulator-Taste erreichbar und mit Enter oder der Leertaste auslösbar.
- Sichtbarer Rahmen um das gewählte Element. Auch auf farbigen Abschnitten: auf dunklem Grund wird der Rahmen hell, sonst nimmt er deine Primärfarbe.
- Echte Bedienelemente statt anklickbarer Kästchen. Eine Einfachauswahl ist eine Radio-Gruppe, eine Mehrfachauswahl eine Checkbox-Gruppe. Vorleseprogramme kündigen dadurch an, wie viele Antworten es gibt und welche gewählt ist.
- Echte Beschriftungen an den Formularfeldern. Nicht nur ein grauer Platzhaltertext, der beim Tippen verschwindet.
- Fehler werden mit ihrem Feld verknüpft und sofort angesagt.
- Der Schrittwechsel wird angesagt, und der Lesepunkt springt auf die Überschrift des neuen Schritts.
- Weniger Bewegung, wenn das System es verlangt. Wer in seinem Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt Übergänge, Ladeanimation und Chips ruhig gestellt.
- Lesbar bis 200 Prozent Zoom, ohne dass Text abgeschnitten wird.
Was du selbst beachten musst
Alternativtexte an Bildern
Ein Vorleseprogramm sagt bei einem Bild ohne Beschreibung nur „Bild". Beschreib deshalb in einem Satz, was zu sehen ist.
- Klick das Bild im Aufbau an.
- Trag rechts unter Alternativtext ein, was auf dem Bild passiert.
Gut: „Ein Dachdecker verlegt Ziegel auf einem Steildach." Nicht gut: „Bild1", „Foto", „dachdecker.jpg".
Ist das Bild reine Verzierung und trägt keine Aussage, setz stattdessen den Haken Dekoratives Bild, braucht keinen Alt-Text. Dann wird es beim Vorlesen übersprungen, was hier richtig ist: eine Aufzählung leerer „Bild"-Ansagen hilft niemandem.
Dasselbe gilt für die Logo-Leiste. Trag dort je Logo den Namen des Unternehmens ein.
Farben, die man lesen kann
Text braucht genug Abstand zu seinem Hintergrund. Die Fachregel heißt WCAG AA und verlangt 4,5 zu 1 für normalen Text und 3 zu 1 für Flächen wie Knöpfe.
Das musst du nicht selbst nachrechnen. Im Bereich Design prüft Funnelizer deine Farben und sagt dir, wenn eine Kombination schwer lesbar ist. Der Hinweis nennt den gemessenen Wert und schlägt einen konkreten Ersatzton aus derselben Farbfamilie vor. Ein Klick auf Übernehmen setzt ihn ein.
Der Hinweis blockiert nichts. Du kannst deine Farbe behalten, wenn du sie bewusst so willst.
Ein blasser Ton auf Weiß sieht auf einem guten Bildschirm oft noch gut aus und ist auf einem Telefon in der Sonne unlesbar. Der gemessene Wert ist verlässlicher als der eigene Eindruck.
Verständliche Fragen
Das ist der Teil, den keine Software prüfen kann.
- Ein Gedanke pro Frage. „Wie groß ist dein Dach und wann soll es losgehen?" sind zwei Fragen.
- Kurze Antwortoptionen, die für sich stehen. „Zwei bis fünf" ist besser als „mittel".
- Keine Fachbegriffe ohne Erklärung.
- Sag am Formular, warum du eine Angabe brauchst.
- Verlass dich nicht auf Farbe allein. „Der grüne Knopf" hilft niemandem mit Farbschwäche, „Weiter" schon.
Auch Überschriften, die komplett in Großbuchstaben stehen, lesen sich schwer, sobald sie länger als ein paar Wörter sind: Großbuchstaben nehmen die Wortform, an der das Auge Wörter erkennt.
Der Check in den Einstellungen
Unter Einstellungen gibt es den Abschnitt Barrierefreiheit. Er listet genau das auf, was du selbst kaputt machen kannst:
- Bilder ohne Alternativtext
- Logos ohne Namen
- Farben, die zu schwach sind, im Theme oder an einem einzelnen Block
- lange Überschriften in Großbuchstaben
Steht dort nichts, ist nichts zu tun. Auch dieser Check ist ein Hinweis und kein Riegel: du kannst jederzeit veröffentlichen.
Selbst nachsehen, in zwei Minuten
Öffne deinen Funnel und leg die Maus zur Seite.
- Drück wiederholt die Tabulator-Taste. Du musst sehen können, wo du gerade bist.
- Wähl eine Antwort mit den Pfeiltasten und bestätige mit Enter.
- Füll das Kontaktformular nur mit Tabulator und Tippen aus.
Kommst du so bis zur Danke-Seite, funktioniert dein Funnel für sehr viele Menschen mehr als vorher.
Zum Gegenprüfen mit einem Vorleseprogramm brauchst du keine Zusatzsoftware: Windows bringt die Sprachausgabe mit (Windows-Taste plus Strg plus Enter), macOS VoiceOver (Cmd plus F5).
Häufige Fragen
Muss mein Funnel barrierefrei sein? Ob dein Angebot unter das Barrierefreiheitsstärkungsgesetz fällt, hängt an deinem Geschäft und an deiner Unternehmensgröße. Das können wir dir nicht beantworten, und diese Anleitung ist keine Rechtsberatung. Unabhängig davon gilt: jeder Besucher, der deinen Funnel nicht bedienen kann, ist eine Anfrage weniger.
Ändert sich das Aussehen meines Funnels dadurch? Nein. Alles oben Genannte ist seit jeher eingebaut und ändert an deinem Design nichts. Nur der Hinweis zu schwachen Farben ist neu, und der schlägt etwas vor, statt es zu setzen.
Ich habe eine Farbe bewusst so gewählt und will den Hinweis nicht. Dann lass ihn stehen. Er blockiert weder das Speichern noch das Veröffentlichen.
Zählt das Funnelizer-Zeichen unten mit? Es ist eine Herkunftsangabe, kein Bedienelement deines Funnels, und bewusst dezent gehalten. Ab dem Pro-Plan kannst du es abschalten.