Barrierefreiheit
Da Websites von immer größerer Bedeutung für Unternehmen sind, ist es wichtiger denn je, sicherzustellen, dass Inhalte auf Websites für alle Besucher barrierefrei sind. In den Vereinigten Staaten ist wird dies häufig als Section 508 Compliance bezeichnet, also die Einhaltung von Abschnitt 508. Dies bezieht sich auf den Abschnitt des Reauthorized Rehabilitation Act von 1998, der Bundesbehörden verpflichtet, elektronische und Informationstechnologien für Menschen mit Behinderungen zugänglich zu machen. Während die Einhaltung von Abschnitt 508 eine gute Grundlage darstellt, werden zunehmend die Web Content Accessibility Guidelines (WCAG) als Standard für die Erstellung von barrierefreien Inhalten im Web herangezogen.
Der rechtliche Aspekt sollte nicht Ihr Motivator sein, um Ihren Benutzern ein gutes Erlebnis zu bieten. Jeder vierte Amerikaner hat laut CDC eine Behinderung. Die Entscheidung, 25 % der Besucher keine benutzerfreundliche Umgebung zu bieten, ist so, als würde ein Ladengeschäft jedem vierten Besucher den Eintritt verwehren. Diese Kunden sind dann nicht nur unzufrieden, sie werden wahrscheinlich nicht zurückkommen oder Ihre Dienstleistungen empfehlen.
Ein gängiger Satz unter Entwicklern ist, dass „Barrierefreiheit kein Feature ist“. Dahinter steht die Vorstellung, dass Barrierefreiheit nicht wie eine Bonus-Sache zu behandeln, oder etwas, mit dem man sich am Ende eines Projekts beschäftigt.
Barrierefreiheit erfordert Nachdenken, Einfühlungsvermögen und Verständnis. Wenn man dies in einem Projekt frühzeitig mitdenkt, kann man Lösungen entwerfen und entwickeln, anstatt später etwas neu zu entwerfen.
Oftmals werden durch die Verbesserung der Barrierefreiheit auch andere Prioritäten des Entwicklers umgesetzt: Nutzererlebnis, Performance und SEO sind einige der wichtigsten Anliegen, die direkt mit der Barrierefreiheit zusammenhängen. Die Verbesserung des einen sorgt häufig auch für eine Verbesserung des anderen.
Einfühlungsvermögen ist ein wichtiger Baustein von Barrierefreiheit, der leicht zu übersehen ist. Als Entwickler wollen wir alles automatisieren, wenn etwas schwierig oder zeitaufwendig ist, wollen wir Tools, die es entweder für uns tun oder uns sagen, wie wir es richtig machen. Leider können diese Tools nur an der Oberfläche kratzen, denn sie sind nicht menschlich, sie können die Seite nicht wirklich so erleben wie ein Mensch. Es ist technisch möglich, eine Webseite zu erstellen, die die meisten automatischen Barrierefreiheitstests mit Bravour besteht, aber für alle Menschen, ob sehend, blind, taub, farbenblind, mit oder ohne Einschränkung von motorischen Funktionen, völlig unbrauchbar ist. Sie können die Anforderungen technisch erfüllen, aber ein unbrauchbares, frustrierendes Erlebnis bieten, das die Menschen völlig abschreckt. Das Fazit ist: Verlassen Sie sich nicht auf die Tools, testen Sie Ihre Arbeit, fühlen Sie sich in Ihre Benutzer ein, holen Sie Feedback ein.
Es handelt sich zwar nicht um einen endgültigen Leitfaden, aber hier finden Sie einige Schritte, mit denen Sie Ihre Inhalte barrierefrei machen können, sowie Ressourcen für eine vertiefte Beschäftigung mit dem Thema.
Alle Bilder, Symbole, Videos und Schaltflächen, die Bedeutung vermitteln oder interaktiv sind, sollten eine Textalternative haben. Dies ist nicht nur gut für Besucher, die Ihre Inhalte über ein Bildschirmleseprogramm konsumieren, sondern auch für Suchmaschinen. Der ALT-Text sollte den Inhalt des Bildes beschreiben. Die meisten Bilder auf Ihrer Website können wahrscheinlich im Seiten-Editor bearbeitet werden, das Festlegen von ALT-Text im Seiten-Editor ist einfach. Innerhalb von benutzerdefinierten Modulen und Vorlagen müssen Sie jedoch sicherstellen, dass der in Seiten-Editoren angegebene ALT-Text beachtet wird.
Dies bedeutet, dass Sie bei einem <img>-Element sicherstellen müssen, dass der vom Benutzer angegebene ALT-Text auch tatsächlich verwendet wird.
Wenn Sie aus irgendeinem Grund ein Bild im Seiten-Editor nicht bearbeiten können, sollten Sie den ALT-Text hart kodieren.
Es gibt eine Ausnahme von dieser ALT-Textregel. Wenn Ihr Bild keinen zusätzlichen Kontext bietet und rein repräsentativ ist, ist es besser, einen ALT-Textwert von „Null“ zu haben, als ganz auf ein ALT-Attribut zu verzichten.
Lazy Loading von Bildern ist eine gängige Technik zur Performance-Steigerung beim Erstellen von Websites. Die Methode, die tatsächlich für das Lazy Loading verwendet wird, spielt für die Barrierefreiheit eine Rolle.
JavaScript-Lösungen hierfür verlassen sich in der Regel darauf, dass das src-Attribut von Bildern etwas Unwahres ist (wie eine kleine .gif-Datei) anstelle der wahren Quelle des Bildes, die in einem data-src-Attribut enthalten ist, bis der Benutzer das Bild in der Nähe der Ansicht scrollt. Dies bedeutet, dass das Bild zunächst für den Benutzer eines Bildschirmleseprogramms, der über die Seite navigiert, nicht barrierefrei ist, insbesondere wenn er mit einem Rotor den gesamten Inhalt der Seite durchsucht, ohne überhaupt zu scrollen. Wenn JavaScript auf einer Seite nicht geladen ist, schlagen diese Lösungen für Lazy Loading-Lösungen außerdem fehl, sodass Benutzer von Hilfstechnologien nicht die richtigen Bilder auf der Seite sehen.
Durch natives Lazy Loading von Bildern wird dieses Problem vermieden und dabei das Bild-Markup beibehalten, unabhängig davon, ob JavaScript geladen wird.
HubSpot unterstützt browserbasiertes Lazy Loading in benutzerdefinierten Modulen. Es wird empfohlen, es zu verwenden.
Links, Schaltflächen und Formularelemente müssen alle über einen tatsächlichen Text verfügen, der angibt, was sie tun oder wohin sie weiterleiten. Andernfalls lesen Bildschirmleseprogramme heraus, dass der Benutzer einen Link oder eine Schaltfläche ausgewählt hat, aber keine Ahnung hat, was er tut.
Wenn Sie ein Symbol verwenden, geben Sie den Text des Bildschirmleseprogramms ein. Einige Standard HubSpot-Vorlagen verwenden beispielsweise einen Symbol-Kurzcode:
Verwenden Sie nicht 'display: none', um Formularlabels und anderen beschreibenden Text auszublenden. Dadurch wird verhindert, dass der Text für Sehbehinderte laut vorgelesen wird. Außerdem benachteiligt es Benutzer, die zwar sehen können, aber den Text aufgrund des fehlenden Kontrasts des Platzhaltertextes nicht erkennen können. Oder denken Sie an folgende Situation: Sie haben ein Formular noch nicht komplett ausgefüllt oder ein Formular wurde automatisch ausgefüllt, wissen aber nicht sicher, ob es korrekt eingegeben wurde, weil die Formularfeldlabels unsichtbar sind.
Wenn Sie unbedingt ausgeblendeten Text haben müssen oder ausgeblendeter Text zusätzlichen Kontext bieten könnte, den ein ohne Einschränkung sehender Benutzer nicht benötigt, verwenden Sie CSS, das den Text unsichtbar macht, ohne ihn vor Bildschirmleseprogrammen zu verbergen, oder fügen Sie die ".screen-reader-text"-Klasse hinzu.
Wenn ein Besucher mit einem Bildschirmleseprogramm oder einfach nur mit seiner Tastatur navigiert, ist es äußerst hilfreich, wenn es eine Möglichkeit gibt, die Teile der Seite zu überspringen, die wiederholt werden, z. B. ein Header. Wir können dies tun, indem wir einen Link hinzufügen, der auf den Hauptinhalt der Seite verweist.
Fügen Sie in Ihrem Header HTML mit dem folgenden Inhalt hinzu:
Stellen Sie dann in jeder Vorlage sicher, dass ein Element mit einem ID-Attribut des Inhalts vorhanden ist. In unserem Beispiel haben wir den Artikeltitel als den Text verwendet, zu dem gesprungen werden soll. Dadurch können Suchmaschinen nachvollziehen, zu was verlinkt wird. Es ist eine semantischere Art, zum Inhalt zu springen.
Semantisches Markup ist HTML, das Bedeutung vermittelt. Einige Beispiele für semantische Elemente sind <header>, <main>, <footer>, <nav>, <time>, <code>, <aside> und <article>.
Einige Beispiele für Elemente, die nicht semantisch sind, sind <div> und <span>. Nicht semantische Elemente haben immer noch ihren Platz, sollten aber in erster Linie zur Darstellung und nicht zur Vermittlung von Bedeutung verwendet werden.
Semantische Elemente können von Suchmaschinen und Hilfstechnologien verstanden werden. Beides wirkt sich positiv auf Ihre SEO aus und verbessert Ihr Benutzererlebnis.
Verwenden Sie keine <div>-Elemente als interaktiven Elemente wie Schaltflächen, Registerkarten oder Links, es sei denn, Sie sind sicher, dass Sie über Aria-Attribute ein gutes Erlebnis bereitgestellt haben.
Verwenden Sie die Links (<a />) und <button /> in angemessener Weise.
Verwenden Sie Links, um zu Abschnitten einer Seite zu verlinken und zu anderen Seiten zu navigieren.
Verwenden Sie Schaltflächen für Interaktionen, die nicht dazu führen, dass die Seite verlassen oder zu einer ID navigiert wird.
Bei der Arbeit mit Tabellen gilt: wenn eine Tabelle einen beschreibenden Titel hat, fügen Sie ihn in ein <caption>-Element direkt nach dem <table>-Element ein.
Verwenden Sie <th>-Elemente mit dem richtigen Bereichsattribut in Tabellen für Spalten- und Zeilenüberschriften und <thead>, <tbody> sowie <tfoot>, um Abschnitte zu bezeichnen.
Verwenden Sie das Bereichsattribut für <th>-Attribute, um anzugeben, ob die Überschrift für die Zeile oder die Spalte gilt.
Benötigen Sie ein Accordion? Vergessen Sie nicht die <details>- und <summary>-Elemente, die Ihnen die meisten dieser Funktionen kostenlos zur Verfügung stellen, und sie sind barrierefrei. Achten Sie darauf, ein Polyfill oder Fallback hinzuzufügen, wenn Sie alte Browser unterstützen müssen.
Einige Benutzer ziehen es vor, mithilfe ihrer Tastatur durch Webseiten und Formulare zu navigieren. Einige Besucher müssen die Tastatur oder eine Art Hilfsgerät verwenden, das eine Tastatur emuliert, um Websites zu navigieren.
- Stellen Sie sicher, dass ':focus' so formatiert ist, dass ein Benutzer, wenn er über die Tastatur navigiert, sehen kann, was fokussiert ist. Deaktivieren Sie die CSS-Umrisseigenschaft nur, wenn Sie eine akzeptable alternative visuelle Anzeige bereitstellen. Verwenden Sie :focus-win, wenn sich damit besser die Aufmerksamkeit der Benutzer sinnvoll lenken lässt.
- Wenn Sie Teile der Seite mit ':hover' oder über Javascript ausblenden/anzeigen, stellen Sie sicher, dass Benutzer diese Steuerelemente auch über Javascript navigieren können oder dass es einen alternativen Pfad zu den Informationen gibt.
- Stellen Sie sicher, dass die Hauptnavigation Ihrer Website die Tastaturnavigation unterstützt. Ein häufig übersehenes Problem ist, dass Dropdown-Menüs und Fly-outs nicht barrierefrei gemacht werden. Dies verhindert, dass Benutzer zu Teilen von Websites gelangen, die möglicherweise kritisch sind.
- Stellen Sie
hidden-,aria-expanded-,aria-current-,aria-selectedund andere Statusattribute nach Bedarf bereit bzw. aktualisieren Sie diese, um sicherzustellen, dass Bildschirmleseprogramme den Status der Elemente ordnungsgemäß kommunizieren.
Wenn Sie Vorlagen oder Code-Dateien erstellen, sollten Sie korrekte semantische Elemente (<header>, <main>, <footer>, <nav>, <dialog> usw.) verwenden, um Webbrowsern und Bildschirmleseprogrammen mitzuteilen, welche Art von Inhalten sich in Ihren Elementen befindet.
Für den Fall, dass semantische Elemente nicht für Ihr Szenario geeignet sind, sollten Sie Rollenattribute hinzufügen.
Das Hinzufügen von Orientierungspunkten erleichtert es Benutzern von Bildschirmleseprogrammen, zwischen den Hauptabschnitten einer Webseite hin- und herzuspringen. HubSpot berücksichtigt 'role'-Attribute für das Menü, das einfache Menü und die Google-Suchmodule.
- Stellen Sie sicher, dass der Inhalt des Browsers sichtbar und lesbar bleibt, wenn ein Benutzer ihn auf 200 % vergrößert.
- Es wird nicht empfohlen, Schriften viel kleiner als 16 Px zu machen, da sie dann für Besucher möglicherweise schwer zu lesen sind.
- Vermeiden Sie die Verwendung von Farbe als einzige Möglichkeit der Kommunikation von Informationen. Ein überraschend hoher Prozentsatz der Weltbevölkerung ist farbenblind.
- Stellen Sie sicher, dass zwischen der Farbe des Textes und dem Hintergrund ein ausreichender Kontrast besteht, damit Benutzer mit eingeschränkter Sicht den Inhalt lesen können.
- Vermeiden Sie Animationen, die schnell blinken (mehr als dreimal pro Sekunde), da sie bei einigen Besuchern Anfälle auslösen können.
- Unterstützen Sie preferences-reduced-motion, wenn Sie Animationen auf Ihrer Website haben.
- Heutzutage gilt beim Entwickeln einer Website ein responsives Design als zwingend notwendig. Stellen Sie sicher, dass alle interaktiven Elemente auf Mobilgeräten erwartungsgemäß funktionieren. Interaktive Elemente müssen einfach anzutippen sein, und es sollte viel Platz zwischen den Regionen zum Antippen geben.
Was leicht vergessen werden kann, dass Barrierefreiheit auch in Ihren Textinhalten berücksichtigt werden sollte.
- Vermeiden Sie die richtungsorientierte Sprache wie „siehe Seitenleiste auf der linken Seite“. Wenn der Benutzer gerade das Handy benutzt, ist ergibt dies für ihn keinen Sinn, da Inhalte dort normalerweise gestapelt werden.
- Verwenden Sie Überschriften wie
<h1><h2>usw. und verschachteln Sie diese nacheinander. Überspringen Sie nicht eine Überschrift der visuellen Wirkung wegen. - Wenn Sie einen Link hinzufügen, vermeiden Sie unbedingt den Linktext „Hier klicken“. Dieser ist für Bildschirmleseprogramme nicht aussagekräftig und ergibt auf Touchscreens oder anderen Geräten keinen Sinn. Stattdessen sollte Ihr Text angeben, was den Benutzer bei diesem Link erwartet. Dies ist auch besser für die SEO, weil Suchmaschinen verstehen, zu was verlinkt wird.
- Stellen Sie sicher, dass Sie bei Verwendung spezieller Stile im Text zur Vermittlung von Bedeutung das entsprechende semantische Tag wie
<mark><strong><em><sup>usw. verwenden. Ansonsten kann Ihre Bedeutung für einige Besucher verloren gehen. - Wenn Sie Besucher weltweit ansprechen, vermeiden Sie Witze, die regionsspezifisch sind. Wenn Sie Ihre Website übersetzt werden soll, vermeiden Sie Wortspiele. So sehr wir kleine Wortspielereien mögen: sie lassen sich oft nicht gut übersetzen.
- Nutzen Sie Tools, um Ihre Grammatik und Rechtschreibung zu verbessern. Dies hilft beim Verständnis und führt zu besseren Übersetzungen.
- Schreiben Sie Ihre Inhalte auf eine Weise, die der Zielgruppe Ihrer Website entspricht. Sie würden ein Thema aus dem Bereich Astrophysik einem Schüler der 5. Klasse nicht auf die gleiche Weise wie einem Physiker mit Abschluss erklären. Das heißt, vermeiden Sie ausgefallene Wörter nur um ihrer Verwendung willen, einfach ist besser.
Die meisten Maßnahmen zur Verbesserung der Barrierefreiheit sind nicht HubSpot-spezifisch. Das heißt, wir möchten Sie für den Erfolg mit HubSpot aufstellen und es gibt einige Dinge, die Sie entweder als Entwickler oder Content-Autor tun können, um Benutzern ein besseres Erlebnis zu bieten.
Egal, ob Sie ein Modul oder eine Vorlage vom Marketplace installieren, entwickeln oder für sich erstellen lassen, Sie sollten auf jeden Fall sicherstellen, dass sie bewährten a11y-Methoden entsprechen. Benutzerdefinierte Module können den größten Einfluss auf die Barrierefreiheit Ihrer Website haben, da sie oft mehrmals verwendet werden, manchmal sogar auf derselben Seite. Ebenso kann eine einzige Vorlage hunderte oder tausende Male auf einer einzigen Website verwendet werden. Wenn Ihre Website nicht barrierefrei ist, wird sich das sehr wahrscheinlich finanziell bemerkbar machen. Wie bei der Werbung sollten man lieber etwas mehr investieren, damit Ihre Website auf jeden Fall eine größere Zielgruppe erreicht. Einer der Vorteile von Modulen ist, dass Sie den Code oft später verbessern können, wenn sich Richtlinien und Best Practices weiterentwickeln. Dadurch wird die Barrierefreiheit auf einen Schlag für jede Seite verbessert, auf der sich das Modul befindet.
Suchen Sie im HubSpot-Marketplace nach Modulen und Vorlagen, die Barrierefreiheit thematisieren und die WCAG-Anforderungen in ihren Beschreibungen erfüllen. Wenn Sie mit einem Entwickler zusammenarbeiten, stellen Sie sofort klar, dass Ihnen Barrierefreiheit wichtig ist. Nicht alle Entwickler berücksichtigen in ihrer Arbeit a11y von Anfang an. Wenn Sie ihnen das erst spät in einem Projekt mitteilen, wird die Sache wahrscheinlich kostspieliger. Denn anstatt Barrierefreiheit von Beginn an zu priorisieren, müssen sie jetzt rückwirkend Probleme bei der Barrierefreiheit beheben.
Wenn Sie ein Entwickler sind, erstellen Sie Module und Vorlagen, die die Einhaltung von a11y-Richtlinien für Content-Autoren einfach machen. Verwenden Sie geeignete Überschriften, semantisches HTML, sorgen Sie dafür, dass interaktive Elemente richtige Rollen und Kontext bereitstellen. Content-Autoren, die sich der Bedeutung von Barrierefreiheit bewusst sind, zahlen in der Regel gerne ein wenig mehr für Module und Vorlagen, die inklusiv sind. Das heißt, Sie müssen zeigen, dass Ihre Module Barrierefreiheit berücksichtigen. Fügen Sie „Skip“-Links in Vorlagen ein, machen Sie globale Gruppen und globale Teilvorlagen, die in Ihren Vorlagen verwendet werden, a11y-freundlich. Diese werden auf der gesamten Website verwendet und können den größten Einfluss auf die Benutzerfreundlichkeit einer Website haben.
Wenn Sie für den HubSpot-Marketplace erstellen, sollten Sie wissen, dass Ihre Inhalte auf Tausenden, ja sogar Millionen von Seiten im Internet verwendet werden können. Sie treffen eine Entscheidung, die sich auf Menschen auswirkt, wenn Sie Ihre Inhalte veröffentlichen und Ihre Arbeit teilen, unabhängig davon, ob Ihre Arbeit inklusiv ist oder nicht.
Es gibt Dutzende von Tools, die Versprechungen wie Fügen Sie einfach unser Skript zu Ihrer Website hinzu und Ihre Website ist barrierefrei machen.
Einige dieser Tools versuchen, Teile der Seite zu interpretieren und HTML und Attribute zu ändern, um Probleme zu beheben. Dennoch beruht ihr Vorgehen nur auf Vermutungen und sie können falsch liegen oder die Funktionalität Ihrer Website beeinträchtigen bzw. die Benutzerfreundlichkeit verschlechtern.
Diese Tools funktionieren möglicherweise nicht immer wie erwartet und stellen manchmal ihr eigenes Bildschirmlesesystem bereit. Wenn Sie eine komplizierte Benutzeroberfläche haben, kann die Bedienung Ihrer Website durch das hinzugekommene Tool tatsächlich schwieriger werden.
Aufgrund dieser Probleme sind Tools wie diese kein Ersatz für das Entwickeln Ihrer Website mit Blick auf Barrierefreiheit. Investieren Sie Zeit und Geld, um allen Ihren Benutzern das bestmögliche Erlebnis zu bieten. Sich auf Lösungen aus einer Hand zu verlassen, kann Sie genauso viel oder mehr kosten, wie die Dinge auf die richtige Art und Weise zu entwickeln. Das Testen und Entwickeln von Websites unter dem Gesichtspunkt der Barrierefreiheit hat außerdem den Vorteil, das die Website mit Einfühlungsvermögen und Verständnis für Ihre Kunden erstellt wird.
Um dies klar zu stellen: dies bezieht sich nicht auf Tools zum Testen auf Barrierefreiheit, es bezieht sich ganz spezifisch auf Tools, die behaupten, Probleme mit der Barrierefreiheit für Sie zu lösen. Tools für das Testen selbst sind großartig, und Sie sollten sie zusätzlich zu den manuellen Tests verwenden.
Erfahren Sie mehr über Skripts/-Overlays für Barrierefreiheit.
Es gibt einige wirklich großartige Ressourcen für das Erstellen von barrierefreien Websites. Wir empfehlen Ihnen dringend, sich folgende Ressourcen anzusehen.
- Das A11Y-Projekt
- MDN-Dokumente zur Barrierefreiheit
- Web Accessibility Initiative
- WebAIM
- Vereinfachte WCAG 2-Checkliste
- Checkliste zu Abschnitt 508
- Detaillierte WCAG 2.2-Empfehlungen
- AXE von Deque
- WAVE – ein Tool zum Testen der Barrierefreiheit einer Webseite
- Der ultimative Leitfaden zur Barrierefreiheit im Web
Vielen Dank, dass Sie Ihr Feedback mit uns geteilt haben.