So machen Sie Ihre Post-Click-Erfahrungen für alle zugänglich, indem Sie die ADA- und WCAG-Compliance-Standards befolgen

Veröffentlicht: 2020-03-30

Wie viele Werbetreibende denken bei der Erstellung von Post-Click-Landingpages über Barrierefreiheit im Web nach?

Wenn dies das erste Mal ist , denken Sie über die Zugänglichkeit, stehen die Chancen haben Sie bereits Wandlungen zu verlieren. Tatsache ist, dass jeder fünfte Online-Nutzer eine Unterkunft benötigt, um eine Webseite zu nutzen. Diese Statistiken der CDC und der Epilepsy Foundation unterstreichen die Notwendigkeit, dass Post-Click-Landingpages für jeden zugänglich sind:

ADA-Compliance-Behinderungsstatistiken

Stellen Sie sicher, dass Ihre Post-Click-Seiten ADA- und WCAG-konform sind, um die Zugänglichkeit für alle zu gewährleisten.

Im heutigen Beitrag untersuchen wir, was die ADA- und WCAG-Compliance beinhaltet und warum es für Werbetreibende wichtig ist, diese Barrierefreiheitsstandards auf ihren Seiten zu implementieren.

Was beinhaltet die Online-ADA-Compliance?

Der Americans with Disabilities Act (ADA) wurde 1990 eingeführt, um die Diskriminierung aufgrund unterschiedlicher Fähigkeiten zu beenden. Die spezifischen Anforderungen zur Erfüllung der Compliance sind in der Regel etwas vage und verwirrend, da die ADA nicht explizit auf die Online-Compliance eingeht.

Als Orientierungshilfe können jedoch die umfassendsten Richtlinien für den Aufbau und die Pflege barrierefreier Websites herangezogen werden – die vom W3C veröffentlichten Web Content Accessibility Guidelines (WCAG).

Was ist die WCAG?

Die WCAG sind Richtlinien, die sicherstellen, dass jede Webseite für Menschen mit unterschiedlichen Hör-, Bewegungs-, Seh- und kognitiven Fähigkeiten zugänglich ist.

Die Barrierefreiheit im Internet umfasst die Erstellung von Websites, Tools und Technologien, damit Menschen mit Behinderungen diese nutzen können. Insbesondere können Besucher eine Seite wahrnehmen, verstehen, navigieren und mit ihr interagieren und zu der Seite beitragen.

Die WCAG hat drei Versionen:

  • WCAG 1.0 wurde 1999 entworfen
  • WCAG 2.0 wurde 2008 veröffentlicht
  • WCAG 2.1 wurde im Juni 2018 erstellt

Version 2.1 enthält 17 neue Erfolgskriterien (mehr dazu weiter unten), von denen Barrierefreiheitsprobleme gemäß den WCAG-Richtlinien in vier verschiedene Gruppen eingeteilt werden. Diese Probleme lassen sich mit dem Akronym POUR zusammenfassen:

  • Wahrnehmbar: Können alle Nutzer den Inhalt der Seite wahrnehmen?
  • Bedienbar: Können alle Benutzer mit der Seite interagieren?
  • Verständlich: Können alle Benutzer den Inhalt der Seite verstehen?
  • Robust: Können die Inhalte von einer Vielzahl von Programmen und Geräten, einschließlich Screenreadern, interpretiert werden?

Die WCAG-Richtlinien gliedern Barrierefreiheitsprobleme und Empfehlungen in drei Ebenen:

  • Stufe A: Dies ist die dringendste Stufe und umfasst Probleme, die die Fähigkeit eines behinderten Besuchers, auf der Seite zu navigieren oder zu verwenden, stark einschränken können.
  • Level AA: Das Level gilt als Standard für die meisten kommerziellen Websites. Es befasst sich mit Bereichen, in denen Verbesserungen erforderlich sind, um behinderten Benutzern das volle Erlebnis einer Webseite zu bieten.
  • Level AAA: Dies ist der höchste Standard, er beinhaltet die Feinabstimmung von Problemen, die sowohl Level A als auch AAA ansprechen. Die AAA-Konformität ist jedoch wahrscheinlich außerhalb der Reichweite der meisten Webseiten.

Wie können Sie Ihre Post-Click-Landingpages barrierefrei gestalten?

Hier sind neun Möglichkeiten, wie Sie sicherstellen können, dass Ihre Post-Click-Seiten die Barrierefreiheitsstandards erfüllen:

1. Gestalten Sie Ihre Seite tastaturfreundlich: Besucher sollten in der Lage sein, auf Ihrer Post-Click-Seite zu navigieren, auch wenn sie keine Maus haben, indem sie nur die 'Tabulatortaste' der Tastatur verwenden. Auf diese Weise können Zielgruppen, die unterstützende Technologien verwenden, durch die Seite navigieren und scrollen und auf die CTA-Schaltfläche klicken.

2. Machen Sie den gesamten Inhalt zugänglich: Viele Post-Klick-Seiten verwenden dynamische Inhalte – Inhalte, die sich basierend auf vordefinierten Tags ändern. Dies kann zu einem Problem werden, wenn die Seite die Hilfstools nicht über die Änderung informiert, da viele Screenreader den Seiteninhalt nur so „lesen“, wie er beim ersten Laden erscheint. Achten Sie bei der Verwendung dynamischer Inhalte darauf, dynamische Inhalte als Live-Region zu kennzeichnen, damit Screenreader und ähnliche Geräte den sich ändernden Inhalt verstehen können.

3. Fügen Sie Alt-Text in alle Bilder ein: Das Hinzufügen von alternativem Text zu Bildern garantiert, dass Text als Ersatz für das Bild angezeigt wird, wenn es nicht geladen werden kann, und beschreibt das Bild und gibt Kontext dazu.

4. Fügen Sie der Seite einen Kontrast hinzu: Dies ist ein notwendiger Schritt, um sicherzustellen, dass sich das Kopieren und alle Seitenelemente vom Hintergrund abheben und für Benutzer mit Sehbehinderungen sichtbar sind. Im Idealfall sollten Sie eine dunkle Farbe gegen eine helle setzen und darauf achten, dass sie nicht ineinander übergehen:

ADA-Compliance-Zugänglichkeit Farbkontrast

5. Verwenden Sie Kopfzeilen, um den Inhalt zu strukturieren: H1, H2 und H3 helfen, Ihre Kopie zu strukturieren und erleichtern die Interpretation durch die Benutzer.

6. Formularfelder beschriften : Bestätigen Sie, dass jedes Formularfeld auf Ihrer Seite eindeutig beschriftet ist, da dies einem Benutzer mit einem Screenreader ermöglicht, zu verstehen, wie er das Formular ausfüllen kann. Die Seite Amplitude enthält beschriftete Formularfelder:

Feldbezeichnungen des ADA-Compliance-Zugänglichkeitsformulars

7. Erstellen Sie responsive Seiten: Responsive Seiten formatieren und strukturieren auf jedem Gerät unabhängig von der Bildschirmgröße neu. Die Seiten lassen sich von den kleineren Bildschirmen von Mobiltelefonen, Tablets und kleinen Laptops über den Standard-Desktop-Bildschirm bis hin zu noch größeren Widescreen-Monitoren skalieren – und bieten gleichzeitig Flexibilität und hervorragende Benutzerfreundlichkeit für Benutzer auf allen Geräten.

8. Vermeiden Sie das automatische Abspielen von Medien und Schiebereglern: Das automatische Abspielen von Videos kann Benutzer, die Screenreader verwenden, frustrieren, da es schwierig sein kann, sie stummzuschalten oder anzuhalten. Ebenso können Schieberegler und Karussells zu Verständnisproblemen bei den Benutzern führen.

9. Erstellen Sie barrierefreie Kopien: Halten Sie sich von Akronymen und Fachjargon fern, damit alle Benutzer verstehen, was Sie anbieten.

Wie können Sie überprüfen, ob Ihre Seite ADA- und WCAG-konform ist?

Bei vielen Online-Ressourcen können Sie überprüfen, ob Ihre Seite konform ist. Sie müssen lediglich die URL und Ihre E-Mail-Adresse eingeben.

Büro für Internetzugang

Mit BOIA können Werbetreibende überprüfen, ob ihre Seiten den Barrierefreiheitsstandards entsprechen:

ADA-Konformität BoIA

AudioEye

AudioEye scannt Ihre Seite kostenlos und sieht, wie sie in Bezug auf Barrierefreiheit abschneidet:

ADA-Konformität AudioEye

Siteimprove

Siteimprove überprüft die Zugänglichkeit Ihrer Seite und bietet automatisierte Tests, die den WCAG-Standards entsprechen:

ADA-Konformität Siteimprove

Sie können auch die folgenden Chrome-Erweiterungen herunterladen, um die Barrierefreiheit zu überprüfen.

Tool zur Wellenauswertung

Das Wave-Bewertungstool bietet visuelles Feedback über die Zugänglichkeit Ihrer Webinhalte, indem es Symbole und Indikatoren in Ihre Seite einfügt. Es erleichtert die Bewertung durch den Menschen und klärt über Fragen der Zugänglichkeit auf. Das Tool bietet Details zu einer Reihe von Problemen, Strukturelementen, Kontrastfehlern, Warnungen und Alternativtext:

ADA-Compliance Wave-Bewertung

UserWay

Werbetreibende können das UserWay-Widget herunterladen, um Lösungen für die Barrierefreiheit von Seiten zu bewerten, ohne den vorhandenen Code umzugestalten – wodurch ein umfassendes rechtliches und regulatorisches Compliance-Framework sichergestellt wird, das ADA, Section 508 und WCAG 2.1 AA abdeckt.

Das Widget ist für alle führenden CMS-Plattformen sowie reine HTML/CSS/JS-Sites verfügbar. Das Tool bietet wichtige Barrierefreiheitsfunktionen und eine breite Auswahl an Funktionen, die Benutzer kombinieren und an ihre individuellen Barrierefreiheitsanforderungen anpassen können:

ADA-Compliance-Zugänglichkeit UserWay

Round Table Pizza verfügt über das UserWay-Widget, um die Zugänglichkeit zu gewährleisten. Zuerst mit der Leselinie, dann invertieren der Farben auf dem Bildschirm:

ADA-Compliance Runder Tisch Leseleitfaden

ADA-Konformität Round Table Farbkontrast

ChromeVox

ChromeVox ist ein Screenreader, der Benutzern mit Sehbehinderungen die Geschwindigkeit, Einfachheit und Sicherheit von Chromebooks bietet. ChromeVox ist auf Chromebooks vorinstalliert, kann aber als Erweiterung heruntergeladen werden.

Die Erweiterung hebt jeden Seitenabschnitt hervor und liest ihn dem Benutzer vor:

ADA-Compliance ChromeVox-Beispiel

Was Sie in Instapage tun können, um die Compliance einzuhalten

Instapage empfiehlt und erleichtert allen Benutzern, die Barrierefreiheitsstandards von Websites einzuhalten und Seiten zu erstellen, die auf alle Zielgruppen zugeschnitten sind. Das beinhaltet:

  • Bietet Benutzern eine einfache Möglichkeit, allen Seitenbildern alternative Bildtexte hinzuzufügen
  • Seitentastatur zugänglich machen
  • Bildschirmleseprogrammen ermöglichen, alle Formulareingaben und die Schaltfläche zum Senden zu erkennen
  • Hinzufügen geeigneter HTML-Tags
  • Hinzufügen des Sprachattributs zu Seiten durch Senden einer Anfrage an das Support-Team

Die Festlegung der Sprache einer Seite mit dem Attribut lang ist eine Anforderung der WCAG und kommt dem Benutzer dabei in zweierlei Hinsicht zugute:

  1. ermöglicht die korrekte Funktion von Übersetzungsdiensten wie Google Chrome
  2. das Attribut sagt Screenreadern, wie sie den Seiteninhalt richtig aussprechen

Machen Sie Ihre Post-Click-Seiten für alle zugänglich

Um zu gewährleisten, dass alle Benutzer, die Ihre Post-Click-Seiten besuchen, die gleichen Conversion-Möglichkeiten haben, ist es wichtig, dass die Seiten für alle zugänglich sind.

Fordern Sie noch heute eine Instapage Enterprise-Demo an, um mehr über das Erstellen barrierefreier, personalisierter Post-Click-Landingpages in großem Maßstab zu erfahren.