Die Web Content Accessibility Guidelines (WCAG) sind ein globaler Standard, der vom World Wide Web Consortium (W3C) entwickelt wurde, um Teams bei der Erstellung digitaler Inhalte zu unterstützen, die für Menschen mit Behinderungen geeignet sind. Die WCAG beschreiben, wie Text, Medien, Navigation und interaktive Elemente strukturiert werden müssen, damit sie für Menschen mit visuellen, auditiven, kognitiven und motorischen Beeinträchtigungen nutzbar bleiben. Nach Angaben der WHO leben über 1,3 Milliarden Menschen mit irgendeiner Form von Behinderung, was bedeutet, dass die Zugänglichkeit einen direkten Einfluss darauf hat, wie ein großer Teil der Besucher Ihre Inhalte erlebt.
Barrierefreiheit bestimmt, wie Menschen Ihre Landing Page erleben. Sie beeinflusst die Art und Weise, wie sie Ihre Inhalte auf der Benutzeroberfläche lesen, sich bewegen und darauf reagieren. Die WCAG geben Ihnen ein praktisches Regelwerk an die Hand, mit dessen Hilfe Sie Seiten erstellen können, die für alle Benutzer geeignet sind. Außerdem helfen sie Ihnen, Reibungsverluste zu verringern, die Konversionsrate zu erhöhen und die Landing Page Leistung messbar zu verbessern.
Dieser Leitfaden erklärt, was die WCAG sind, warum sie für Landing Pages von Bedeutung sind und wie man ihre vier Grundprinzipien anwendet. Sie werden auch sehen, wie Sie diese Standards in Landingi erfüllen und barrierefreie Landing Pages sicherer erstellen können.
Was sind die WCAG (Web Content Accessibility Guidelines)?
WCAG ist ein globaler Standard, der erklärt, wie man digitale Inhalte erstellt, die für Menschen mit unterschiedlichen Fähigkeiten geeignet sind. Die Richtlinien helfen Entwicklern zu verstehen, wie Nutzer mit visuellen, auditiven, kognitiven oder motorischen Einschränkungen mit Online-Inhalten interagieren. Jede Regel konzentriert sich auf die Beseitigung von Zugänglichkeitsbarrieren, die Benutzer am Lesen, Navigieren oder Handeln auf einer Seite hindern.
Die WCAG schaffen auch eine gemeinsame Sprache für Barrierefreiheit in verschiedenen Teams. Designer, Entwickler, Redakteure und Marketingexperten können denselben Rahmen verwenden, um konsistente und integrative Erlebnisse zu schaffen. Auf diese Weise können Teams Inhalte erstellen, die eine Vielzahl von Benutzeranforderungen unterstützen. Außerdem werden dadurch Fehler reduziert und Ihre Landing Pages mit den gesetzlichen Erwartungen in vielen Regionen in Einklang gebracht, einschließlich der Interpretation durch verschiedene Benutzeragenten.
Die Leitlinien enthalten definierte Erfolgskriterien, die in die Stufen A, AA und AAA eingeteilt sind, die zeigen, wie weit Ihre Bemühungen um Barrierefreiheit gehen sollten. Diese Stufen helfen Ihnen, Fortschritte zu messen und Verbesserungen Schritt für Schritt zu planen.
Welche Bedeutung haben die WCAG für einen Landing Page?
WCAG ist wichtig, denn eine Landing Page sollte für jeden Besucher einfach zu bedienen sein. Einige Benutzer sind auf Bildschirmlesegeräte angewiesen, andere verwenden die Tastaturnavigation, und wieder andere benötigen einen stärkeren Kontrast oder klareren Text. Die WCAG stellen sicher, dass Ihre Seite diese Anforderungen erfüllt, ohne Ihre kreativen oder Marketingziele einzuschränken.
Die WCAG schützen auch Nutzer, die vorübergehend Probleme haben, wie z. B. Menschen, die bei schlechter Beleuchtung oder mit älteren Geräten surfen. Die gleichen Verbesserungen, die die Zugänglichkeit unterstützen, verbessern oft die Klarheit für alle Nutzer. Dies führt zu einem besseren Verständnis und einer schnelleren Entscheidungsfindung.
Schließlich tragen die WCAG dazu bei, rechtliche und betriebliche Risiken zu verringern. Viele Regionen erwarten, dass digitale Inhalte grundsätzlich diesen Richtlinien entsprechen, was die WCAG zu einer praktischen Grundlage für verantwortungsvolle Marketingpraktiken macht.
4 Hauptprinzipien der WCAG für ein Landing Page
Die WCAG basieren auf vier Grundprinzipien, die als POUR bekannt sind : Wahrnehmbar, Bedienbar, Verständlich und Robust. Diese Prinzipien leiten die praktischen Schritte an, die Sie bei der Erstellung barrierefreier Landing Pages unternehmen sollten, die für alle Benutzer funktionieren. Sie stehen auch in direktem Zusammenhang mit Landing Page Best Practices, denn Barrierefreiheit unterstützt Klarheit und Umsetzung.
In den folgenden Abschnitten wird jedes Prinzip in eine klare Maßnahme umgewandelt, die Sie in Landingi oder in jedem Landing Page Workflow, der auf barrierefreiem Webdesign basiert, anwenden können.
1. Wahrnehmbar: Machen Sie Ihren Inhalt mit verschiedenen Sinnen wahrnehmbar
Um Ihren Landing Page wahrnehmbar zu machen, müssen Sie die Inhalte so präsentieren, dass die Benutzer sie mit verschiedenen Methoden wahrnehmen und interpretieren können.
Die Nutzer müssen in der Lage sein, visuelle und akustische Inhalte sowie alle Seitenelemente durch Sehen, Hören oder unterstützende Technologien zu erfassen. Ihr Ziel ist es, den Nutzern verschiedene Möglichkeiten des Informationszugangs zu bieten und zu vermeiden, dass Nutzer, die sich nicht nur auf einen Sinn oder eine Art von visuellen Elementen verlassen können, blockiert werden.
Zu den wichtigsten Maßnahmen gehören:
- Fügen Sie beschreibenden Alt-Text zu Bildern, Symbolen und Nicht-Text-Elementen hinzu. Bieten Sie eine alternative Darstellung an, wenn ein einzelnes Format nicht für alle Nutzer zugänglich ist.
- Stellen Sie Untertitel für Videos und Transkripte für Audioinhalte bereit und berücksichtigen Sie bei Bedarf Audiobeschreibungen. Wenn Ihr Video Sprache oder aussagekräftigen Ton enthält, stellen Sie sicher, dass die Audiospur klar und verständlich ist, damit die Nutzer die Botschaft verstehen.
- Verwenden Sie einen starken Farbkontrast, um Nutzer mit Sehschwäche oder Farbenblindheit zu unterstützen.
- Erlauben Sie die Skalierung und Vergrößerung von Text, ohne den Inhalt auszublenden oder zu unterbrechen.
- Strukturieren Sie Ihre Seite mit klaren Überschriften und sinnvollen Inhaltsgruppen.
- Fügen Sie einen kurzen beschreibenden Text für komplexe Bilder hinzu, wenn der Alt-Text allein nicht ausreicht und der Nutzer möglicherweise weitere Erklärungen benötigt.
Was man in Landingi unternehmen kann:
Im Landingi Landing Page builder können Sie auf der Registerkarte Barrierefreiheit (WCAG) zu jedem Bild oder Symbol einen Alternativtext hinzufügen. Verwenden Sie Textalternativen, um sicherzustellen, dass Ihre Botschaft zugänglich bleibt, auch wenn Bilder nicht angezeigt werden können.
Mit Landingi können Sie auch die Textgröße in der Desktop- und Mobilansicht anpassen, um die Lesbarkeit zu gewährleisten. Wenn ein Bild mehr Kontext benötigt, platzieren Sie einen kurzen Textblock daneben. Wechseln Sie zur mobilen Ansicht, um die Layoutabstände für kleinere Bildschirme zu verfeinern.
2. Funktionsfähig: Sicherstellen, dass jede Interaktion ohne Maus bedienbar ist
Um Ihren Landing Page bedienbar zu machen, müssen Sie sicherstellen, dass die Benutzer mit jedem Element über verschiedene Eingabemethoden interagieren können, was eine vollständig über die Tastatur bedienbare Benutzeroberfläche unterstützt.
Ihr Landing Page sollte auf die Tastaturnavigation reagieren, da viele Benutzer keine Maus benutzen können oder wollen. Jedes interaktive Element muss erreichbar und leicht über die Tastatur oder andere Standardmethoden zu verlassen sein. Dazu gehört auch, dass Formular-Workflows sicherstellen, dass assistive Technologien die Testantworten der Benutzer ohne Unterbrechung übermitteln können, sowie alle Komponenten der Benutzeroberfläche, die die Besucher durch die Seite führen.
Zu den wichtigsten Maßnahmen gehören:
- Testen Sie Ihre Seite mit der Tabulatortaste und Umschalttaste + Tabulator, um Schaltflächen, Links und Formularelemente zu erreichen.
- Vermeiden Sie Tastaturfallen, indem Sie sicherstellen, dass die Benutzer immer mit der Tabulatortaste vor- und zurückblättern können.
- Stellen Sie sichtbare Fokusindikatoren bereit, damit die Benutzer wissen, welches Element aktiv ist.
- Begrenzen Sie blinkende oder sich schnell bewegende Bilder, um Unbehagen zu vermeiden.
- Geben Sie Schaltflächen und Links beschreibende Bezeichnungen, die ihren Zweck erklären.
- Stellen Sie sicher, dass die Elemente in einer logischen Tabulatorreihenfolge erscheinen, um eine reibungslose Navigation zu ermöglichen.
- Vermeiden Sie plötzliche Geräusche oder unerwartete Animationen, denn sie können die Aufmerksamkeit unterbrechen und es den Nutzern erschweren, sich auf Ihrer Seite zu orientieren.
Was man in Landingi unternehmen kann:
Landing Page Formulare, Schaltflächen, Links und Videos sind standardmäßig mit der Tastatur zugänglich. Um die Reihenfolge der Registerkarten zu verfeinern, öffnen Sie die Elementliste und ordnen Sie die Elemente mithilfe der Pfeile oder der automatischen Sortierung neu an.
Legen Sie auf der Registerkarte Zugänglichkeit (WCAG) globale oder abschnittsbasierte Fokusstile fest, um zu steuern, wie aktive Elemente umrandet werden. Aktivieren Sie den Fokus und wählen Sie die Rahmenfarbe für fokussierte Elemente.
Hinzufügen von ARIA-Beschriftungen zu Schaltflächen, wenn der sichtbare Text die Aktion nicht vollständig erklärt.
3. Verständlich: Inhalte und Aktionen leicht verständlich gestalten
Um Ihre Landing Page verständlich zu machen, sollten Sie sicherstellen, dass die Nutzer der Botschaft folgen und mit Ihrem Inhalt interagieren können, ohne verwirrt zu werden.
Ihr Inhalt und Ihre Schnittstelle sollten vorhersehbar und einfach zu bedienen sein. Unklare Beschriftungen oder uneinheitliche Muster können die Nutzer verwirren, insbesondere diejenigen, die auf Hilfsmittel angewiesen sind.
Die Erfüllung dieser Erwartungen hilft Ihnen auch, die Erfolgskriterien zu erfüllen, die Klarheit, Konsistenz und reibungslose Interaktion auf Ihrer Seite unterstützen. Die Benutzer sollten wissen, wo sie sich befinden, was sie als Nächstes tun sollen und wie sie Fehler korrigieren können. Sie sollten auch in der Lage sein, Prozesse ohne Verwirrung oder unnötige Wiederholungen abzuschließen. Dies gilt auch für die Verwaltung von Elementen wie der Lautstärke von Audio, wenn Medien vorhanden sind.
Zu den wichtigsten Maßnahmen gehören:
- Schreiben Sie in einer klaren, direkten Sprache, die ein schnelles Verständnis ermöglicht.
- Verwenden Sie ein einheitliches Layout für Menüs, Hilfelinks und Kontaktangaben.
- Beschriften Sie jedes Formularfeld deutlich und vermeiden Sie vage oder minimale Formulierungen.
- Geben Sie hilfreiche Fehlermeldungen aus, die erklären, was behoben werden muss.
- Stellen Sie die richtige Sprache für Ihre Seite ein, damit Bildschirmleser den Inhalt richtig anzeigen.
- Vermeiden Sie es, die Benutzer aufzufordern, Daten in mehrstufigen Formularen erneut einzugeben.
Was man in Landingi unternehmen kann:
Platzieren Sie Kontaktelemente an einer stabilen Stelle, z. B. in einem festen Menü oder in der Fußzeile. Wandeln Sie Telefonnummern und E-Mails in aktive Kontaktlinks um, damit Tastaturbenutzer sie mit Enter öffnen können.
Aktivieren Sie Autovervollständigung in Landing Page Formulareinstellungen, um die Eingabe von Wiederholungsfeldern zu reduzieren.
Legen Sie den Seitentitel und die Sprache über die Seiteneinstellungen fest, damit die Benutzer wissen, wo sie sich befinden.
4. Robust: Erstellen Sie eine Seite, die zuverlässig über alle Geräte und Hilfsmittel hinweg funktioniert
Um Ihren Landing Page robust zu machen, müssen Sie ihn so strukturieren, dass er auf allen Geräten, in allen Browsern und mit allen unterstützenden Technologien, einschließlich verschiedener Benutzeragenten, reibungslos funktioniert.
Ihre Inhalte müssen in allen Browsern, Bildschirmgrößen und unterstützenden Technologien funktionieren. Eine saubere Struktur hilft Tools wie Screenreadern, Ihre Inhalte richtig zu interpretieren.
Zu den wichtigsten Maßnahmen gehören:
- Verwenden Sie semantisches HTML, damit Hilfsprogramme Elemente wie Schaltflächen oder Formulare erkennen.
- Vermeiden Sie doppelte Attribute, fehlerhafte Verschachtelungen oder fehlende Tags.
- Testen Sie Ihre Seite mit Bildschirmleseprogrammen wie NVDA oder VoiceOver.
- Überprüfen Sie Ihre Seite in verschiedenen Browsern und auf mobilen Geräten.
- Gruppieren Sie sinnvolle Inhalte in übersichtlichen Abschnitten.
- Bieten Sie stabile strukturelle Anhaltspunkte wie Bereichsbezeichnungen und ein einheitliches Layout.
Was man in Landingi unternehmen kann:
Weisen Sie Landing Page Abschnitten Landmark-Rollen zu, um unterstützende Technologien über deren Zweck zu informieren. Um eine Rolle festzulegen, klicken Sie auf den Abschnitt, den Sie ändern möchten, und wählen Sie die entsprechende Rolle (Navigation, Region, Formular, ergänzend, Suche) aus der Liste der Landmark-Rollen auf der Registerkarte Barrierefreiheit (WCAG).
Fügen Sie ein ARIA-Label für Abschnitte mit sich wiederholenden Mustern oder einer weniger offensichtlichen Bedeutung hinzu.
Verwenden Sie das Symbol „Formen“ in der Elementliste, um Elemente innerhalb eines Abschnitts automatisch zu sortieren und eine saubere HTML-Reihenfolge beizubehalten. Oder verwenden Sie die Pfeile neben den einzelnen Elementen, um sie innerhalb der HTML-Struktur nach oben oder unten zu verschieben.
Passen Sie mobile Layouts sorgfältig an und testen Sie Ihre veröffentlichte Seite auf echten Geräten. Schränken Sie Autoplay-Elemente und blinkendes Bildmaterial in den Einstellungen des Video-Widgets ein.
Wie hoch ist das Niveau der Erfolgskriterien in den WCAG für den Landing Page?
Die WCAG gliedern ihre Erfolgskriterien in drei Konformitätsstufen: A, AA, und AAA. Diese Stufen zeigen, wie gründlich eine Landing Page die Erwartungen an die Barrierefreiheit erfüllt und wie viele Barrieren sie für verschiedene Benutzergruppen beseitigt. Sie dienen auch als Leitfaden für Vermarkter, die Landing Pages erstellen und eine klare Struktur für die Planung von Verbesserungen der Zugänglichkeit für verschiedene Arten von Webinhalten benötigen.
Die meisten Landing Pages streben die Stufe AA an, weil sie ein Gleichgewicht zwischen sinnvoller Zugänglichkeit und realistischer Produktionsarbeit schafft.
Die Stufe AA entspricht außerdem gängigen globalen Standards, was sie zu einem sicheren und zukunftssicheren Ziel für Marketingteams macht und dazu beiträgt, dass eine Webseite mit aktuellen und zukünftigen Benutzeragenten kompatibel bleibt.
Die drei WCAG-Stufen umfassen:
- Stufe A – Die grundlegende Stufe. Sie deckt die grundlegenden Anforderungen an die Zugänglichkeit ab und befasst sich mit den wichtigsten Hindernissen, die den Zugriff auf Inhalte verhindern. Diese Kriterien helfen bei der Beseitigung der dringendsten Hindernisse, wie z. B. fehlender Alt-Text, unzugängliche Steuerelemente oder Elemente, die keine Benutzereingaben verarbeiten können.
- Stufe AA – Die empfohlene Stufe für die meisten Landing Pages. Sie erweitert die Stufe A um zusätzliche Anforderungen, die die Benutzerfreundlichkeit über verschiedene Geräte und Hilfsmittel hinweg verbessern. Diese Stufe der Erfolgskriterien umfasst Erwartungen an Kontraste, klare Beschriftungen und vorhersehbare Interaktionen, die die klare Darstellung von Informationen auf Webseiten unterstützen.
- Stufe AAA – Die am weitesten fortgeschrittene Stufe. Sie umfasst die strengsten Kriterien und unterstützt das breiteste Spektrum an Anforderungen. Die meisten Marketingteams streben nicht die Stufe AAA an, da sie sehr spezifische Anpassungen erfordert, die möglicherweise nicht für jedes Design oder jede Botschaft geeignet sind.
Diese Stufen dienen als praktischer Maßstab für die Überprüfung jeder Webseite. Sie helfen Ihnen festzustellen, welche Verbesserungen bereits erfüllt sind und welche Aktualisierungen hinzugefügt werden sollten, um ein umfassenderes und zuverlässigeres Erlebnis für alle Besucher zu schaffen.
FAQ über WCAG für Landing Page
Das Verständnis der WCAG kann praktische Fragen aufwerfen, insbesondere für Vermarkter, die ihre Seiten für verschiedene Geräte und Regionen zugänglich machen müssen. Diese FAQ behandelt die häufigsten Fragen, damit Sie fundierte Entscheidungen treffen und barrierefreie Landing Pages erstellen können, egal ob Sie an einer einzelnen Webseite arbeiten oder Landing Pages in großem Umfang erstellen. Die WCAG tragen dazu bei, dass alle Benutzer unabhängig von ihren Hilfsmitteln oder Fähigkeiten auf dieselben Informationen zugreifen können.
Ist WCAG eine gesetzliche Vorschrift?
Die WCAG selbst sind kein Gesetz, aber viele Länder stützen ihre Vorschriften für den digitalen Zugang auf ihre Standards. Das bedeutet, dass die WCAG oft zum praktischen Maßstab für die Einhaltung der Vorschriften werden, wenn Nutzer durch Online-Inhalte navigieren. Einige Regionen erwarten sogar, dass Unternehmen (egal ob es sich um eine Marketing-Website, einen Blog oder einen Online-Shop handelt) aus Gründen der Konsistenz ähnliche Zugänglichkeitsmerkmale erfüllen.
Überprüfen Sie die Vorschriften Ihres Landes, um sich vor der Veröffentlichung einer Kampagne über Ihre Verpflichtungen zu informieren.
Ist ADA-Konformität dasselbe wie WCAG?
ADA-Konformität ist nicht dasselbe wie WCAG, denn ADA ist ein US-amerikanisches Bürgerrechtsgesetz und WCAG ein technischer Standard. Die WCAG werden weithin als Maßstab für den Nachweis der Zugänglichkeit im Rahmen des ADA verwendet, weshalb sich viele Teams auf sie verlassen. In vielen Fällen dienen die WCAG als Standardeinstellung für die Bewertung der Erwartungen an den digitalen Zugang.
Was passiert, wenn Sie nicht WCAG-konform sind?
Wenn Sie nicht WCAG-konform sind, können manche Nutzer Ihre Landing Page nicht lesen, navigieren oder Aktionen ausführen. Dies kann zu geringeren Konversionsraten führen und in einigen Regionen die Gefahr von Klagen oder Strafen im Zusammenhang mit Barrierefreiheit erhöhen.
