Digitale Barrierefreiheit für Marketer Teil 2: User Experience & Websites
Veröffentlicht: 2022-06-16Im ersten Beitrag dieser Serie über digitale Barrierefreiheit haben wir das „Was und Warum“ der Barrierefreiheit für Marketer angesprochen. Jetzt ist es Zeit für das „Wie“.
Beachten Sie, dass wir unsere Empfehlungen bewusst auf die Elemente beschränkt haben, die recht einfach zu implementieren und für Vermarkter relevant sind. Diese Reihe ist keinesfalls eine umfassende Liste aller Standards, die Unternehmen in Bezug auf barrierefreie Inhalte beachten müssen. Wenn Sie mehr über die Einzelheiten der Zugänglichkeitsrichtlinien und WCAG-Kriterien erfahren möchten, sehen Sie sich das TGPi-E-Learning-Programm an. Es ist eine Option zum Selbststudium, die Sie verwenden können, um Ihre Fähigkeiten auf dem neuesten Stand zu halten oder sich mit Barrierefreiheitstechniken und Best Practices vertraut zu machen.
Kommen wir zu den Empfehlungen!
Zugänglichkeit und Benutzererfahrung
Eine reibungslose, mühelose Benutzererfahrung ist der Nordstern für jeden Vermarkter. Die Leichtigkeit, mit der eine Person eine kritische Aufgabe erledigen kann und wie gut der Inhalt die Erwartungen erfüllt, hat einen großen Einfluss darauf und wird Ihre Marketingbemühungen beeinflussen oder beeinträchtigen.
Macht Sinn, oder? Wenn Sie etwas online kaufen möchten und bei der Eingabe Ihrer Kreditkarteninformationen auf ein Problem stoßen oder der gewünschte Artikel nicht vorrätig ist, wird die Qualität Ihrer Benutzererfahrung sinken. Erstens, weil Sie nicht in der Lage waren, das zu erreichen, was Sie sich vorgenommen hatten, und zweitens, weil Sie erwartet hatten, es schaffen zu können, aber das war nicht in den Karten. Dieser doppelte Schlag würde mit ziemlicher Sicherheit sicherstellen, dass Sie nicht zu dieser bestimmten Website zurückkehren werden!
Als Vermarkter wissen Sie genau, wie wichtig eine hervorragende Benutzererfahrung ist. Möglicherweise testen Sie es sogar (gut für Sie!) oder verfügen über Analysen, um es zu messen. Diese Maßnahmen sind entscheidend für die Optimierung Ihres Marketing-Funnels. Was Sie jedoch möglicherweise nicht tun, ist, die Benutzererfahrung auf Zugänglichkeit zu testen. (Wenn nicht, keine Wertung! Das soll diese Beitragsserie ändern.)
Benutzerreisen
Eine User Journey (auch bekannt als User Flow oder User Path) ist eine Abfolge von Aktionen, die ein Benutzer auf Ihrer Website durchführt. Eine kritische User Journey ist auf das primäre Ziel Ihrer Website ausgerichtet, z. B. das Abschließen eines Kaufs, das Absenden eines Formulars, das Ansehen eines Videos, das Lesen eines Beitrags usw.
Aus mehreren Gründen sollten Sie der Korrektur der Barrierefreiheit für Ihre wesentlichen User Journeys immer Priorität einräumen.
Erstens, obwohl Sie auf Ihrer Website möglicherweise erstaunliche Inhalte haben, wenn ein Benutzer sein Hauptziel für den Besuch Ihrer Website nicht erreichen kann, ist das ein Kunde, den Sie für immer verloren haben.
Zweitens sind viele Menschen mit Behinderungen leider daran gewöhnt, bei Dingen, die für andere selbstverständlich sind, auf Herausforderungen zu stoßen. Sie erwarten sie im Allgemeinen, da so viel von der Welt nicht mit Blick auf ihre besonderen Behinderungen geschaffen wurde.
Im Durchschnitt werden kleinere Bedenken hinsichtlich der Barrierefreiheit bei tangentialen Inhalten sie wahrscheinlich nicht so frustrieren, dass sie rechtliche Schritte einleiten. Aber wenn sie nicht in der Lage sind, das zu tun , wofür sie auf Ihrer Website gekommen sind, setzen Sie sich einem großen rechtlichen Risiko aus, insbesondere wenn Sie eine in den USA ansässige Marke sind.
Testen Sie Ihre kritischen Benutzerpfade
Wie testen Sie also Ihre kritischen Benutzerströme auf Zugänglichkeit? Wenn Sie sich für den manuellen Weg entscheiden, können Sie Benutzertests mit Menschen mit Behinderungen durchführen oder den Code für jeden Schritt mit einem Tool wie dem ARC-Toolkit von TPGi (mehr dazu später) untersuchen, um WCAG-Fehler zu identifizieren.
Während manuelle Tests letztendlich umfassender sind, können Sie, wenn Sie Barrierefreiheitsfehler in Ihren kritischen Benutzerpfaden sofort identifizieren möchten, die User Flows-Funktion von ARC Monitoring verwenden, um jede Komponente automatisch auf Barrierefreiheit zu scannen. Sie können alle Komponenten und dynamischen Interaktionen einer Benutzerreise, von Bildern bis hin zu Dialogfeldern, zum Scannen einbeziehen, und Sie können Fehler im Laufe der Zeit nachverfolgen, um Ihre internen Korrekturprozesse zu verbessern.
Sie können die Informationen, die Sie aus der Überwachung des Benutzerflusses von ARC erhalten, mit Ihren anderen Analysetools wie Google Analytics Funnel und Goals kombinieren, um Hindernisse zu identifizieren, die Benutzer daran hindern, die gewünschte Aktion auszuführen.
Zugängliche Websites
Eine Website ist das digitale Geschäft oder Büro Ihres Unternehmens. Es kann der erste (oder einzige) Eindruck sein, den ein potenzieller Kunde von Ihrem Unternehmen bekommt, also sollten Sie ihn so ansprechend wie möglich gestalten. Vielleicht haben Sie ein paar Videos oder viele Bilder, um die Monotonie aufzubrechen, oder Seiten über Seiten mit wertvollen Blog-Inhalten. Dies sind alles hervorragende Vorteile, die Vermarkter nutzen können, um Menschen davon zu überzeugen, ihre Produkte zu kaufen.
Sicherzustellen, dass all diese Inhalte zugänglich sind, mag entmutigend erscheinen, aber viele der Best Practices für barrierefreie Inhalte sind nicht von bewährten Marketingpraktiken zu unterscheiden. Lesen Sie weiter, um mehr zu erfahren:
Beschreibender Linktext
Jeder gute Marketer weiß, dass Klarheit für exzellente Kommunikation unerlässlich ist. Wenn Sie Ihren Text mit Flusen und wichtig klingenden (aber letztendlich bedeutungslosen) Wörtern verschönern, geht Ihre Botschaft verloren. Aus dem gleichen Grund, wenn Sie mit Ihren Erklärungen zu sparsam sind, hat ein Kunde möglicherweise nicht genügend Informationen, um zu verstehen, was Sie ihm sagen.
Qualitativ hochwertiger Inhalt ist ein Gleichgewicht zwischen diesen beiden Extremen, und es überrascht nicht, dass Link- oder Ankertexte denselben Regeln folgen. Der beste Linktext gibt dem Benutzer eine Vorstellung davon, was ihn erwartet, wenn er darauf klickt. Beschreibender Linktext ist besonders wichtig für Ihre Call-to-Action-Kopie. Was bereitet den Benutzer besser darauf vor, was ihm begegnet, wenn er auf „Klicken Sie hier“ oder „Laden Sie unser Whitepaper herunter“ klickt? Offensichtlich letzteres! (Wenn Sie sich für Ersteres entschieden haben, möchten Sie vielleicht einen neuen Karriereweg in Betracht ziehen.)
Es ist nicht nötig, Ihren CTA mit schwammigen Worten zu verankern („Laden Sie das weltbeste Whitepaper über die Magie von Harry Houdini herunter!“), aber es ist entscheidend, dass die Leute wissen, worauf sie sich einlassen.
Warum ist Linktext so wichtig für die Barrierefreiheit? Erstens hilft es blinden oder sehbehinderten Menschen beim Überfliegen von Seiteninhalten. (Dies gilt auch für Menschen mit einwandfreiem Sehvermögen.) Benutzer mit Sehbehinderungen verwenden eine Reihe von Hilfstechnologien, um auf digitale Inhalte zuzugreifen, z. B. Bildschirmvergrößerungstools für Menschen mit Sehbehinderung und Bildschirmlesegeräte für Blinde. Wie der Name schon sagt, liest ein Screenreader buchstäblich vor, was auf dem Bildschirm angezeigt wird.
Screenreader wie JAWS ermöglichen es Benutzern jedoch, auf dem gesamten Bildschirm herumzuspringen und verschiedene Komponenten vorzulesen, anstatt den gesamten HTML-Code von oben nach unten durchzugehen. Wenn ein Benutzer von Komponente zu Komponente flitzt, liest der Bildschirmleser nur den Ankertext für Links vor, nicht den umgebenden Text. Das heißt, wenn alle Ihre Links dieselbe „Klicken Sie hier“-Kopie sind, hat ein Screenreader-Benutzer keine Ahnung, was passiert, wenn er diesem Link folgt; Sie sind gezwungen, den umgebenden Inhalt zu erkunden, um zu verstehen, worauf sich dieser Link bezieht.
Darüber hinaus ermöglichen Screenreader den Benutzern, eine „Linkliste“ zu öffnen, die ihnen einen schnellen Zugriff auf alle Links auf einer Webseite ermöglicht. Dies ist ein häufiges Szenario, bei dem Linktext aus seinem umgebenden Kontext herausgelesen wird und Dinge wie „hier klicken“ zu einem echten Problem werden.
Alt-Text für Bilder
Alternativer Text oder „alternativer Text“ beschreibt die Bilder Ihrer Website, sodass sich ein Screenreader-Benutzer eine umfassendere Vorstellung vom Inhalt jeder Webseite machen kann. Wenn Sie Bilder auswählen, die als visuelle Erklärung dienen, werden Personen, die sie nicht sehen können, ratlos sein, wenn Sie auf Alt-Text verzichten.
Wenn Sie jedoch Bilder aus rein ästhetischen Gründen eingefügt haben (vielleicht mögen Sie wirklich Bilder von Menschen, die über Computer gebeugt sind) und Sie mehrere davon haben, möchten Sie möglicherweise nicht für alle einen Alt-Text hinzufügen. Screenreader lesen den gesamten Alt-Text für jedes Bild, was ärgerlich sein kann, wenn der Text das Erlebnis nicht aktiv aufwertet. Wenn ein Bild als dekorativ angesehen werden kann und keine zusätzliche Bedeutung/Verständnis des Seiteninhalts hinzufügt, sollte es für Hilfstechnologien verborgen werden, indem ein leeres Alt-Attribut bereitgestellt wird.
Gut strukturierte Webseiten
Verwenden Sie Ihre Überschriften-Tags angemessen, damit sowohl sehbehinderte als auch nicht behinderte Leser die Seite überfliegen und ein grundlegendes Verständnis des Inhalts erlangen und sich leicht darin bewegen können. Befolgen Sie Best Practices für Überschriften, beginnen Sie beispielsweise jede Seite mit einem H1, das den Inhalt der Seite beschreibt, und verwenden Sie dann H2s und H3s als Unterüberschriften. Verwenden Sie die Überschriften-Tags absichtlich; Versetzen Sie sie nicht zufällig, ohne an die Struktur zu denken.
Obwohl Sie Überschriften mit visuellen Mitteln durch CSS-Styling unterscheiden können, haben Screenreader-Benutzer nicht den Luxus, diese Unterscheidungen zu sehen. Es ist besonders wichtig, gut formatierte Seitenlayouts zu verwenden, um sicherzustellen, dass Benutzer mit Sehproblemen Ihre Inhalte problemlos konsumieren können.
Halten Sie dichte Absätze auf ein Minimum, verwenden Sie kürzere Sätze, wenn Sie können, und vermeiden Sie die Verwendung von Jargon oder Slang. Klarere, prägnantere Texte helfen Benutzern mit kognitiven Beeinträchtigungen, Ihre Inhalte besser zu verstehen, und tragen auch dazu bei, Verwirrung für alle Leser zu minimieren.
Vielleicht haben Sie gehört, dass die Aufmerksamkeitsspanne der Menschen jetzt kürzer ist als die eines Goldfisches? Wenn Sie Zweifel haben, brechen Sie es auf; mach es so einfach wie möglich.
Farbkontrastverhältnisse
Hoffen wir, dass der Styleguide Ihrer Organisation nicht vom Weihnachtsmann entworfen wurde, da die Verwendung von Rot und Grün als Komplementärfarben Ihren Benutzern keinen Gefallen tut. Farbkontraste sind ein wesentliches Element barrierefreien Designs. Personen mit Sehbehinderung kann es schwerfallen, zu ähnliche Farben zu unterscheiden, und für farbenblinde Benutzer sind viele Farben nicht zu unterscheiden.
Sie können das kostenlose Color Contrast Analyzer-Tool von TGPi ausprobieren, das das Rätselraten bei der Bestimmung ausreichender Farbverhältnisse beseitigt. Verwenden Sie den Farbwähler, um Ihre Vorder- und Hintergrundfarbe auszuwählen, und der CCA wird Ihnen sagen, ob der Kontrast angemessen ist.
Zugängliche Formulare
Nahezu jede Website verwendet ein Formular, um Benutzern das Abschließen einer Aufgabe zu ermöglichen. Unabhängig davon, ob Ihr Unternehmen E-Commerce, dienstleistungsbasiert oder sogar nur ein Online-Schaufenster ist, es wird höchstwahrscheinlich ein Formular enthalten. Formulare können jedoch für Menschen mit Behinderungen schwierig sein. Es gibt mehrere technische Überlegungen (sprich: solche, die von Entwicklern implementiert werden müssen) sowie nichttechnische, denen Vermarkter ohne Programmierkenntnisse leicht folgen können. Hier sind die nicht technischen Best Practices:
- Halten Sie die Formulare kurz und einfach – Holen Sie sich Kontaktinformationen von Kunden und bauen Sie dann eine Beziehung auf, um sie einzubeziehen und mehr zusätzliches Wissen zu gewinnen
- Stellen Sie klare Anweisungen und gut sichtbare Beschriftungen bereit – Niemand mag verwirrende Formulare
- Eingaben validieren (Änderungen rückgängig machen/bestätigen) – Benachrichtigen Sie die Benutzer über Probleme und deren Behebung
- Benutzerbenachrichtigung (Erfolg/Fehler) – Lassen Sie die Benutzer wissen, ob die Formularübermittlung erfolgreich war oder nicht
- Verwenden Sie mehrseitige oder progressive Formulare – Wenn Sie ein komplizierteres Formular benötigen, streben Sie ein mehrseitiges oder progressives Formular an, das die Benutzer nicht überfordert
- Entfernen Sie Zeitlimits oder bieten Sie Optionen an – Zeitlimits können praktisch sein, um Käufer zum Kauf zu zwingen, aber sie belasten Personen mit schweren Angstproblemen unnötig
Semmelbrösel
Breadcrumbs sind eine Form der Navigation auf Ihrer Website, mit der Sie sehen können, wie die Seite, die Sie gerade durchsuchen, in das Gesamtbild passt. In der Regel handelt es sich um Links, die zu übergeordneten Seiten führen.
Ein Beispiel für einen Breadcrumb-Trail auf einer E-Commerce-Website, die Kleidung verkauft, könnte sein
Damen > Jacken > Wolle > Cabanjacken.
Breadcrumbs sind nützlich für die Wegfindung und ermöglichen es Benutzern, einfach zurück zu übergeordneten Seiten zu navigieren, ohne ihre Reise von vorne beginnen zu müssen.
Sie sind aus mehreren Gründen besonders wichtig für Menschen mit Behinderungen. Zum einen profitieren Benutzer mit kognitiven Behinderungen immer von einer benutzerfreundlichen Erfahrung, die Mehrdeutigkeiten minimiert. Breadcrumbs sind besonders wichtig, wenn Ihre Website weitläufig und kompliziert ist. Breadcrumbs orientieren sich auch sofort an Screenreader-Benutzern, wodurch die Website-Navigation weniger mühsam wird.
Während Breadcrumbs für Benutzer mit Behinderungen eindeutig hilfreich sind, wie viele Best Practices für Barrierefreiheit, verbessern sie die Erfahrung für alle Benutzer.
Chatbots und Integrationen von Drittanbietern
Viele Websites nutzen Integrationen von Drittanbietern für ihre Websites, wie Chatbots, Popup-Modals, dynamische Zielseiten usw. Es ist eine bedauerliche Realität, dass Software von Drittanbietern oft weitgehend unzugänglich ist, eine Situation, die durch die Unfähigkeit eines Unternehmens, Abhilfe zu schaffen, noch verschlimmert wird.
Wenn sich Ihre Organisation dafür entscheidet, eine Drittanbieteranwendung in Ihre Website zu integrieren, lassen Sie sie unbedingt von einem Experten bewerten, bevor Sie sie hinzufügen. Auch wenn Sie möglicherweise nicht in der Lage sind, viele der Barrierefreiheitsfehler auszugleichen, werden Sie zumindest verstehen, wie hoch das Risiko ist, das Sie eingehen. Sie können auch eine Zugänglichkeitserklärung oder -garantie von Ihrem Anbieter anfordern, um sie in einen Vertrag aufzunehmen (obwohl Sie das Produkt dennoch testen sollten, um seine Genauigkeit vor der Implementierung zu überprüfen).
Als Nebenbemerkung sollten Sie Ihre Anbieter immer nach der Zugänglichkeit ihrer Produkte fragen. Je mehr Kunden barrierefreie Produkte anfordern, desto größer ist die Wahrscheinlichkeit, dass Anbieter darauf hören und damit beginnen, Barrierefreiheitsfunktionen in ihre Produktentwicklungen zu integrieren.