Ihre Website kann auf dem eigenen Bildschirm ordentlich aussehen und trotzdem Kunden am Anfragen hindern. Bei 150 Prozent Zoom liegt ein Text hinter dem Foto. Mit der Tastatur bleibt der Kalender unerreichbar. Nach einem Formularfehler sind alle Angaben weg. Barrierefreiheit beginnt für ein KMU deshalb mit einer konkreten Aufgabe: Kann eine Person Ihr Angebot verstehen, eine Frage stellen und den nächsten Schritt ohne fremde Hilfe abschliessen?
Dafür brauchen Sie zuerst keinen neuen Designstil. Sie brauchen einen prüfbaren Weg durch die bestehende Seite. Nehmen Sie Ihre wichtigste Anfrage oder Buchung und testen Sie diesen Ablauf vom Einstieg bis zur Bestätigung. Eine Sammlung schöner Screenshots sagt wenig darüber aus, ob dieser Weg mit Vergrösserung, Tastatur oder einer assistiven Technologie funktioniert.
Ein Auftrag statt einer allgemeinen Bewertung
Formulieren Sie eine Aufgabe wie: «Ich möchte einen Rückruf zur Reparatur und kenne die genaue Modellnummer noch nicht.» Dazu gehören Angebotsseite, Handlungsbutton, Formular, Datenschutzinformation, Fehlerzustand und Erfolgsmeldung. Wer nur die Startseite prüft, sieht vielleicht den problematischen Kalender oder die verpflichtende Modellnummer gar nicht.
Notieren Sie für jeden Schritt die benötigte Information und die mögliche Sackgasse. Ein Feld darf als optional markiert sein und beim Absenden trotzdem verpflichtend werden. Ein Chatfenster kann den letzten Formularbutton verdecken. Ein fremdes Buchungsmodul kann eine ansonsten brauchbare Seite an genau der entscheidenden Stelle unzugänglich machen. Prüfen Sie diese eingebetteten Bestandteile als Teil Ihres Kundenwegs.
Vergrössern darf den Inhalt umordnen
Beim Browserzoom wird der verfügbare Platz in CSS-Pixeln kleiner. Texte umbrechen anders, die Navigation wechselt möglicherweise in ihre mobile Form und Spalten müssen untereinander rutschen. Das ist erwartetes Verhalten. Problematisch wird es, wenn eine starre Höhe den längeren Text abschneidet oder ein absolut positioniertes Foto den nächsten Abschnitt überdeckt.
Die W3C-Erläuterung zu Reflow beschreibt als technische Referenz eine Darstellung bei 320 CSS-Pixeln Breite; das entspricht beispielsweise 400 Prozent Zoom bei einem Ausgangsfenster von 1280 Pixeln. Bestimmte Inhalte wie komplexe Tabellen haben Ausnahmen. Daraus folgt keine pauschale Rechtsbehauptung über jedes Schweizer KMU. Es ist aber ein konkreter Massstab für die Prüfung einer alltäglichen Anfrage.
Testen Sie zunächst 100, 110, 125, 150 und 200 Prozent im Browser und dann einen schmalen Bildschirm. Beginnen Sie jeweils oben auf der Seite. Kontrollieren Sie Überschriften, Bildgrenzen und den Übergang zum nächsten Abschnitt. Eine breite Datentabelle kann einen eigenen Scrollbereich brauchen; die ganze Seite sollte deshalb nicht seitlich ausweichen.
Mit der Tastatur bis zur Bestätigung
Legen Sie die Maus weg. Mit Tab wechseln Sie zwischen Bedienelementen, mit der entsprechenden Taste aktivieren Sie Links und Buttons. Dabei muss sichtbar bleiben, wo Sie gerade sind. Ein unterdrückter Fokusrahmen ist keine aufgeräumte Gestaltung, sondern eine verlorene Positionsanzeige. Die Reihenfolge sollte zur sichtbaren Reihenfolge und zum Arbeitsablauf passen.
Öffnen Sie Menü, Sprachauswahl, Datumsauswahl und Dialog. Prüfen Sie, ob Sie hinein- und wieder herauskommen. Ein geschlossener Dialog darf keine unsichtbaren Bedienelemente in der Tab-Reihenfolge behalten. Nach dem Schliessen sollte der Fokus an einen sinnvollen Ort zurückkehren. Wenn eine Komponente nur auf Mausbewegung reagiert, fehlt ein nutzbarer Zugang.
Das Formular muss seine Fragen erklären
«Name», «Telefon» und «Anliegen» brauchen erkennbare, programmatisch zugeordnete Beschriftungen. Ein Platzhalter allein verschwindet beim Tippen und ersetzt diese Beschriftung nicht. Erklären Sie Pflichtangaben vor dem Absenden. Wenn Sie ein bestimmtes Format benötigen, zeigen Sie ein verständliches Beispiel und akzeptieren Sie übliche Schreibweisen, soweit Ihr System sie verarbeiten kann.
Ein Fehler sollte beim betroffenen Feld stehen und verständlich erklären, wie er behoben wird. «Ungültig» hilft wenig. «Bitte eine Telefonnummer angeben, unter der wir Sie erreichen können» ist eine konkrete Aufgabe. Behalten Sie bereits richtige Eingaben. Prüfen Sie ausserdem, ob Fehlermeldung und Erfolgsmeldung für unterstützende Technologien erkennbar sind, ohne dass die Person sie zufällig suchen muss.
Kontrast ist eine Zustandsfrage
Prüfen Sie Text und Hintergrund in heller und dunkler Darstellung. Ein heller Button auf einer dunklen Fläche kann nach einem Themenwechsel weisse Schrift auf weissem Hintergrund behalten. Kontrollieren Sie auch Hover, Fokus, ausgewählte Filter und deaktivierte Felder. Entscheidend ist der tatsächlich gerenderte Zustand, nicht die Farbe in einer Design-Datei.
Nutzen Sie Kontrastmessungen mit den jeweiligen Vorder- und Hintergrundfarben. Informationen sollten zusätzlich zur Farbe erkennbar sein. Wenn ein Pflichtfeld nur rot umrandet wird, fehlt die Erklärung. Wenn ein aktiver Filter lediglich etwas dunkler aussieht, kann seine Auswahl unklar bleiben. Ein Label oder eine andere sichtbare Zustandsanzeige erleichtert die Bedienung allen Besuchern.
Eine kompakte Abnahme für Ihr Team
| Versuch | Erwartetes Ergebnis | Nachweis |
|---|---|---|
| Zoom und kleine Breite | Text, Bild und Folgebereich bleiben getrennt. | Browser, Breite, Zoom und betroffene URL. |
| Nur Tastatur | Anfrage lässt sich vollständig abschliessen. | Schrittfolge bis zur Bestätigung. |
| Fehlerhafte Eingabe | Fehler erklärt; andere Angaben bleiben erhalten. | Feld, Fehlermeldung und Korrektur. |
| Beide Themen | Buttons und Zustände bleiben lesbar. | Kontrastwert und sichtbarer Zustand. |
Ergänzen Sie die Prüfung mit einem Screenreader und, wenn möglich, mit Personen, die solche Hilfsmittel im Alltag nutzen. Automatische Prüfprogramme finden bestimmte technische Fehler. Sie beantworten nicht zuverlässig, ob die Beschriftung sinnvoll ist oder der gesamte Vorgang verständlich bleibt. Ein bestandener automatischer Scan ist daher keine vollständige Abnahme.
Prioritäten und Verantwortung
Reparieren Sie zuerst Blockaden im wichtigsten Kundenweg, dann weniger häufige Detailprobleme. Dokumentieren Sie jede gefundene Stelle mit reproduzierbaren Schritten und dem erwarteten Verhalten. «Auf meinem Laptop seltsam» ist schwer zu bearbeiten. «Firefox, 125 Prozent, Rückrufbutton wird vom Bild überlagert» ist ein brauchbarer Auftrag. Nach der Änderung prüfen Sie den ursprünglichen Fall und angrenzende Breiten erneut.
Die Hilfsmittel des EBGB zur barrierefreien digitalen Kommunikation bieten zusätzliche Orientierung. Für Ihren Betrieb sollte trotzdem jemand die konkrete Abnahme verantworten, auch wenn eine Agentur oder ein externer Buchungsdienst die Umsetzung übernimmt.
Was bei neuen Inhalten erneut geprüft wird
Auch nach einer Reparatur kann ein neuer Titel mehr Zeilen benötigen oder ein übersetzter Button breiter werden. Nehmen Sie deshalb die Prüfung des Kundenwegs in die Freigabe neuer Inhalte auf. Verwenden Sie echte längere Texte statt kurzer Platzhalter. Kontrollieren Sie nach dem Laden der Schrift, weil deren Breite den Umbruch verändern kann. Für ein neues Foto prüfen Sie den Ausschnitt auf schmalen Bildschirmen und seine Grenze zum Text. Speichern Sie die erfolgreichen Prüfschritte als kurze Liste im Projekt. Damit bleibt die Abnahme wiederholbar, wenn später jemand anderes einen Abschnitt veröffentlicht oder das Buchungsmodul aktualisiert.
Im Beitrag über Reibung auf der Website geht es um die weiteren Hindernisse bis zur Anfrage. Für Webdesign und Branding bringen Sie Ihren wichtigsten Kundenweg und einen reproduzierbaren Fehler mit. Damit lässt sich eine gezielte Verbesserung vereinbaren, ohne die ganze Seite auf Verdacht neu zu gestalten.
Die Plattformwahl beeinflusst auch laufende Inhaltsarbeit. Der Vergleich WordPress, Webflow und individuelle Website prüft reale Bearbeitungsaufgaben, mehrsprachige Veröffentlichung und eine nachvollziehbare Übergabe.
FAQ
Beweist ein automatischer Scan Barrierefreiheit?
Er prüft bestimmte technische Kriterien. Verständlichkeit und vollständige Bedienbarkeit brauchen zusätzlich manuelle Prüfungen und möglichst Rückmeldungen betroffener Nutzer.
Muss die Seite bei Zoom gleich aussehen?
Nein. Inhalte dürfen umbrechen und Spalten wechseln. Texte, Bedienelemente und der Abschluss der Aufgabe müssen erreichbar bleiben.
Wer prüft ein externes Buchungsmodul?
Der Anbieter liefert technische Informationen; Ihr Team prüft zusätzlich den tatsächlichen eingebetteten Kundenweg und verantwortet dessen Abnahme.