E-Guide: Digitale Barrierefreiheit - Barrierefreie Online-Inhalte

By Laura Kishimoto
Accessibility

Die digitale Barrierefreiheit von Online-Inhalten hat geschäftliche Vorteile und direkte Auswirkungen auf die Suchmaschinenoptimierung. Darüber hinaus profitieren alle Ihre Benutzer gleichermaßen von zugänglichen Inhalten.

Aus unserer täglichen Arbeit wissen wir, dass eine Website nur so zugänglich ist wie ihr Inhalt. Deshalb haben wir auf der CXcon über digitale Barrierefreiheit von Inhalten zu sprechen: Die Accessibility-Ausgabe (Inviqa's kostenlose, virtuelle Konferenz zur Web-Barrierefreiheit).

Sie können über den YouTube-Kanal von Inviqa On-Demand-Zugang zu unserem Vortrag über die Erstellung inklusiver Inhalte erhalten oder diesen Beitrag weiter lesen, um alle wichtigen Informationen zu erhalten.

Die Vorteile der digitalen Barrierefreiheit von Inhalten

Mindestens 22 % der Menschen in Großbritannien haben eine Behinderung, die sich darauf auswirkt, wie sie mit Ihren digitalen Produkten und Inhalten umgehen.

Wir haben ausführlich über die wirtschaftlichen, moralischen, rechtlichen Gründe für die digitale Barrierefreiheit gesprochen. Sollen Sie sich aber immer noch nicht sicher darüber sein, welche das sind, sehen Sie sich unsere Checkliste zur Web-Barrierefreiheit an.

Bevor wir uns mit der digitalen Barrierefreiheit von Inhalten befassen, wollten wir diesen Punkt hervorheben: dass Benutzerfreundlichkeit, Suchmaschinenoptimierung und Zugänglichkeit das gleiche Ziel verfolgen, nämlich es den Benutzern zu erleichtern, Ihre digitalen Inhalte und Dienste zu finden und mit ihnen zu interagieren. 

Wenn Sie also die Zugänglichkeit Ihrer Inhalte verbessern, kommt dies in der Regel auch Ihrer Benutzerfreundlichkeit und Ihrer Suchmaschinenoptimierung (SEO) enorm zugute.

Digitale Barrierefreiheit von Inhalten beginnt mit HTML  

Wie Sie Inhalte erstellen, hängt davon ab, wie Ihre Website aufgebaut ist. Sie können einen WYSIWYG-Editor mit einer Formatierungssymbolleiste verwenden, oder Sie können HTML direkt bearbeiten. 

In beiden Fällen wird Ihr Inhalt HTML-Elemente verwenden, da diese die Bausteine des Webs sind. 

Diese Elemente sagen den Browsern, was Ihr Inhalt ist und wie er angezeigt werden soll. Sie helfen den Menschen, Ihre Inhalte zu verstehen, und sie werden von unterstützenden Technologien verwendet, um die Seitenstruktur zu bestimmen und sehbehinderten Benutzern die Navigation auf Ihren Webseiten zu erleichtern. 

Wenn Sie also Ihrem Inhalt durch die Verwendung der richtigen HTML-Elemente eine Bedeutung geben, ist dies der Schlüssel, um sicherzustellen, dass Menschen, die unterstützende Technologien wie Bildschirmlesegeräte verwenden, nicht auf der Strecke bleiben.

HTML-Elemente helfen Nutzern von Hilfstechnologien, Ihre Inhalte besser zu verstehen. Sie werden auch von Suchmaschinen verwendet, um die Qualität Ihrer Website zu validieren, was sich direkt auf Ihre Suchmaschinenoptimierung (SEO) auswirkt.

Es ist daher wichtig, dass Sie HTML-Überschriftenelemente anstelle von großem oder fettgedrucktem Text verwenden. Sie sollten außerdem sicherstellen, dass die Fußzeile auf Ihrer Website ein tatsächliches Fußzeilen-Element und kein kleiner Text ist. Und es ist wichtig, dass Sie Absätze anstelle von mehrfachen Zeilenumbrüchen verwenden.

Die Rolle der Navigation bei digitaler Barrierefreiheit von Inhalten

Wenn wir über die Zugänglichkeit von Inhalten sprechen, beziehen wir uns normalerweise auf den Inhalt einer Seite. Wenn die Benutzer diesen Inhalt jedoch gar nicht finden können, kann er nicht als zugänglich betrachtet werden. 

Neben der Hauptnavigation sollten Sie auch die Sekundärnavigation (oder Seitenleiste) für die Navigation innerhalb der Seitenabschnitte optimieren, ebenso wie die On-Page-Breadcrumbs, die den Benutzern mitteilen, wo sie sich in der Hierarchie Ihrer Website befinden.

Hier sind einige weitere Tipps zur Navigation:

  • Seiten-Suche anbieten: Einige Benutzer ziehen es vor, die Suche anstelle von Navigationsmenüs oder Landing Pages zu verwenden. Stellen Sie sicher, dass Ihre Seiten-Suche relevante Ergebnisse mit genauen Titeln und Zusammenfassungstexten liefert.
  • Update-Links: Vergessen Sie Kopf- und Fußzeilen-Links und eine globale Sitemap zu erstellen. Diese Links sollten gepflegt und aktualisiert werden, wenn Ihre Website wächst und sich weiterentwickelt.
  • Verwenden Sie aussagekräftigen Link- und Schaltflächentext: Benutzer sollten allein anhand des Textes eines Links erraten können, wohin ein Link sie führt oder was eine Schaltfläche bewirken könnte.
  • Verwenden Sie Beweise statt Annahmen: Nehmen Sie niemals an, dass die Benutzer Ihre Website so gut kennen wie Sie selbst. Wenn Sie können, führen Sie Benutzertests durch, um herauszufinden, ob Ihre Wahrnehmung der idealen Site-Struktur mit den Erwartungen der Benutzer übereinstimmt.

Verwendung strukturierter Inhalte zur Verbesserung der Zugänglichkeit

Die Inhaltsstruktur hilft den Benutzern, die Informationen, die Sie auf Ihrer Website anbieten, zu verstehen. Sie ermöglicht es auch unterstützenden Technologien, denselben Inhalt in alternativen Formaten zu präsentieren.

Hier sind einige Tipps zur Strukturierung Ihres Inhalts:

  • Verwenden Sie die richtige Überschriftenhierarchie: Ordnen Sie Ihren Inhalt in Überschriften an. Jede Seite sollte eine H1 (die Überschrift der obersten Ebene) haben, darunter sollten Sie H2-Unterüberschriften verwenden. Darunter können Sie H3 'Unter-Unterüberschriften' verwenden, und so weiter. Folgen Sie dieser Hierarchie und springen Sie beispielsweise nie von H2 zu H4.
  • Verwandte Inhalte zusammenfassen: Verwenden Sie Listenelemente, um Schlüsselpunkte, Anweisungen oder verwandte Ressourcen zu präsentieren. Dies hilft Benutzern von Bildschirmlesegeräten, Ihren Inhalt zu verstehen und Schlüsselinformationen schnell zu finden.
  • HTML-Elemente für ihren Verwendungszweck verwenden: Verwenden Sie die WYSIWYG-Tools oder HTML-Elemente, die Ihnen für ihren Verwendungszweck zur Verfügung stehen. Sie können z. B. semantische Formatierungen wie <em> verwenden, um einen wichtigen Punkt hervorzuheben, aber verwenden Sie sie nur sparsam für Schlüsselinformationen und niemals für Unterüberschriften.

Inhalte lesbar und verständlich machen

Sobald Sie Ihren Inhalt in Überschriften und Listen strukturiert haben, können Sie anfangen, über den Inhalt selbst und die Art seiner Präsentation nachzudenken.

Hier sind einige Fragen, die Sie sich stellen sollten:

  • Verwende ich eine klare und einfache Sprache? Vermeiden Sie Jargon und erklären Sie Fachbegriffe und Akronyme, wenn sie zum ersten Mal auf einer Seite verwendet werden. Achten Sie auf die Lesbarkeit Ihrer Inhalte für Benutzer mit visuellen und neurologischen Beeinträchtigungen. Der kostenlose Online-Editor von Hemingway ist eine hervorragende Möglichkeit, die Lesbarkeit Ihrer Inhalte zu überprüfen und zu verbessern.
  • Habe ich den Farbkontrast überprüft? Achten Sie auf ein angemessenes Kontrastverhältnis zwischen Vorder- und Hintergrundelementen.
  • Welche Größe hat mein Text? Die Textgröße sollte großzügig sein - mindestens 12 Punkte, das sind 16 Pixel. Die Verwendung sauberer, serifenloser Schriftarten ist ebenfalls sehr hilfreich, insbesondere für Fließtext.
  • Sind die Abstände ausreichend? Insbesondere für Menschen mit Legasthenie können Sie Ihren Text lesbarer machen, indem Sie den Zeilenabstand vergrößern. Vermeiden Sie zu schmale oder zu breite Spalten.
  • Ist mein Inhalt leicht zu überfliegen? Verwenden Sie visuelle Wegweiser wie Überschriften und Listen, um Ihren Inhalt aufzubrechen. Teilen Sie lange Textpassagen in mehrere Absätze auf.

Vermitteln Sie Bedeutung auf zugängliche Art und Weise

Eine weitere Überlegung bei der Erstellung integrativer digitaler Inhalte ist es, darüber nachzudenken, wie man Bedeutung vermittelt.

Zum Beispiel wird Farbe oft verwendet, um Bedeutung zu vermitteln:

Grün wird mit Dingen assoziiert, die vollständig oder erfolgreich sind; und 
Rot wird mit Dingen assoziiert, die unvollständig oder erfolglos sind

Die Verwendung von Farbe auf diese Weise ist wirkungsvoll und intuitiv, aber Menschen, die farbenblind sind oder ein Bildschirmlesegerät benutzen, werden nicht auf dieselbe Bedeutung schließen können, so dass wir die Bedeutung nicht allein durch Farbe vermitteln können.

Was Sie tun können, ist, die Bedeutung von Farbe durch Text oder Symbole zu ergänzen, um sicherzustellen, dass jeder verstehen kann, was Sie zu vermitteln versuchen. 

Zum Beispiel könnte grüner Text, der vermittelt, dass etwas abgeschlossen oder erfolgreich ist, von einem Häkchen begleitet werden. Roter Text hingegen könnte von einem Kreuz begleitet werden. 

Wenn Sie unterstützende Symbole wie dieses verwenden, um Bedeutung zu vermitteln, stellen Sie immer sicher, dass diesen Symbolen zugänglicher Text zugeordnet ist.

Ihre Bilder zugänglich machen

Es gibt zwei Haupttypen von Bildern auf Ihrer Website: 

  • dekorative Bilder, die keine wichtigen Informationen vermitteln und in der Regel der Ästhetik dienen; und  
  • nicht-dekorative Bilder, die nützliche Informationen enthalten (z.B. ein Diagramm innerhalb eines Blog-Posts).

Beide Arten von Bildern erfordern alternativen Text (oder 'Alt-Text'). 

Im Falle Ihrer dekorativen Bilder sollte der Alt-Text null sein, d. h. <img alt="">, so dass Screenreader sie ignorieren. 

Es ist wichtig, dieses Null-Attribut zu verwenden, anstatt einfach den Alt-Text für das Bild zu ignorieren, da sonst Bildschirmleseprogramme den Namen der Bilddatei lesen, was eine große Ablenkung sein kann.

Bei nicht-dekorativen Bildern, die nützliche Informationen vermitteln, sollte der Alt-Text so prägnant wie möglich sein. Wenn weitere Erklärungen oder Details erforderlich sind, sollte dies im Inhalt selbst stehen.

Hier ein paar Tipps:

  • Es ist wichtig, dieses Null-Attribut zu verwenden, anstatt einfach den Alt-Text für das Bild zu ignorieren, da sonst Bildschirmleseprogramme den Namen der Bilddatei lesen, was eine große Ablenkung sein kann.
  • Bei nicht-dekorativen Bildern, die nützliche Informationen vermitteln, sollte der Alt-Text so prägnant wie möglich sein. Wenn weitere Erklärungen oder Details erforderlich sind, sollte dies im Inhalt selbst stehen.

Hier sind einige weitere Tipps:


Zugängliche Tabellen und Multimedia
Machen Sie Ihre Medien und Downloads zugänglich, einschließlich Bilder, Videos, Daten und Dokumente.

Videos 
Videos sollten immer mit Bildunterschriften oder Transkripten versehen werden, damit sie zugänglich sind. Wenn Sie automatische Untertitel verwenden, z. B. auf YouTube, sollten Sie die Untertitel unbedingt bearbeiten, um ihre Genauigkeit zu verbessern.

Daten 
Die meisten Daten können und sollten in Tabellen dargestellt werden. Tabellenelemente sind semantische HTML-Elemente. Sie haben eine Bedeutung und können Ihrem Benutzer helfen, leichter durch Ihren Inhalt zu navigieren.

Achten Sie darauf, einige andere Elemente zu verwenden, die sich auf Tabellen beziehen, wie z. B. Tabellenkopf, Tabellenfuß, Überschrift usw. Diese sorgen für mehr Kontext und eine verbesserte Benutzerfreundlichkeit für Ihre Benutzer.

Diagramme
Diagramme sind auch eine visuelle Möglichkeit, Ihre Daten zu präsentieren. Wir empfehlen die Verwendung von Tools von Drittanbietern wie z. B. Highcharts, da diese mehrere Möglichkeiten zur Interaktion mit ihrem Inhalt bieten.

Die Zugänglichkeit ist für visuelle Formate sehr schwierig, daher ist es gut, sich bei der Präsentation Ihrer Daten auf Tools von Drittanbietern zu verlassen, die diese Probleme bereits gelöst haben.

Dateien zum Download
Für Dateien die heruntergeladen werden können, wie PDFs und Textdokumente, sollten einige Überlegungen zur Zugänglichkeit angestellt werden. 

Die Verwendung einer klaren Sprache, Struktur und Überschriften ist eine gute Möglichkeit, Ihre Dokumente zugänglich zu machen. Es gibt viele Leitfäden und Online-Tools, die Ihnen dabei helfen. Hier sind einige weitere Tipps:

Sicherstellen, dass Ihre Social Media-Inhalte zugänglich sind

Die Regeln rund um gute Struktur und klare Sprache gelten auch für Ihre Social-Media-Inhalte, aber es gibt noch einige andere Dinge zu beachten.

Alt-Text für soziale Medien
Twitter hat kürzlich Alt-Text für Bilder aktiviert, aber überprüfen Sie immer, ob die von Ihnen verwendete Plattform (oder das Social-Media-Planungstool) die digitale Barrierefreiheit von Inhalten unterstützt.

Wenn Dinge wie Alt-Text nicht zur Verfügung gestellt werden können, fügen Sie dem Hauptteil Ihres Beitrags oder in Folgekommentaren Bildunterschriften und Abschriften hinzu.  

Emoji  
Seien Sie besonders vorsichtig bei der Verwendung von Emoji. Sprache-zu-Text-Geräte lesen jedes Zeichen vor, vermeiden Sie also solche mit langen Namen (wir sehen Sie an, "lächelndes Katzengesicht mit Herzaugen"). 

Verwenden Sie Emoji sparsam und vermeiden Sie es, sie zu wiederholen. Überlegen Sie, wie nervig 'rotes Herz, rotes Herz, rotes Herz' für einen Benutzer von Screenreadern sein könnte.

Hashtags
Hashtags sind alle ein Wort. Es gibt keine Leerzeichen oder Bindestriche zum Trennen von Wörtern, daher müssen wir den Bildschirmlesern helfen zu verstehen, wie dieser Inhalt zu lesen ist.

Verwenden Sie für Screenreader Großbuchstaben am Anfang neuer Wörter. Dadurch werden Ihre Hashtags auch für sehende Benutzer leichter lesbar und verständlich.

Beispielsweise funktioniert der Hashtag #greatcxforall für Benutzer sozialer Medien viel besser, wenn er in #GreatCXForAll geändert wurde.

Überprüfung der digitalen Barrierefreiheit von Inhalten 

Verpassen Sie nicht unseren Leitfaden für Accessibility Audits, wenn Sie nach einfachen Möglichkeiten suchen, die Zugänglichkeit Ihrer Inhalte zu überprüfen.

Hier sind einige andere Hinweise:

  • Blättern Sie nur mit der Tastatur. Verwenden Sie die Tabulatortaste, um auf der Seite zu navigieren und auf fehlende Elemente, z.B. Schaltflächen und Links, zu achten. Sie sollten auch einen klaren Fokussierungsstil um jedes Element herum sehen, das gerade im Fokus ist.
  • Sehen Sie Ihren Inhalt anders. Spielen Sie mit den Anzeigeeinstellungen Ihres Monitors und Browsers herum, oder verwenden Sie ein Hilfs-Plug-in, um Sehbehinderungen zu simulieren. Können Sie Ihre Inhalte auch dann noch lesen, wenn der Kontrast reduziert ist oder wenn Sie hinein- oder herauszoomen?
  • Hören Sie sich Ihren Inhalt an. Macht Ihr Inhalt Sinn, wenn Sie ihn laut vorlesen? Setzen Sie Ihre beste Hörbuchstimme auf und versuchen Sie sich vorzustellen, wie es wäre, wenn jemand Ihren Inhalt hören würde, anstatt ihn zu lesen.
  • Untersuchen Sie! Gehen Sie Ihre Inhalte mit einem feinzahnigen Kamm durch, um nach unerklärlichen Akronymen, unnötigem Jargon oder kulturellen Bezügen zu suchen, die nicht alle Benutzer verstehen werden.

Zusammenfassung

Zugängliche Inhalte sind der Eckpfeiler einer zugänglichen Website. Er nützt allen Ihren Benutzern gleichermaßen, verbessert Ihre Suchmaschinenoptimierung (SEO) und macht es den Menschen leichter, Ihre Produkte zu kaufen, Ihre Inhalte zu verstehen oder Ihre Dienstleistungen in Anspruch zu nehmen.

Hier sind einige der wichtigsten Dinge, die Sie beachten sollten, um digitale Barrierefreiheit von Inhalten zu bieten:

  • Geben Sie dem Inhalt eine Bedeutung, indem Sie semantisches HTML verwenden.
  • Optimieren Sie die Navigation, um den Benutzern zu helfen, die richtigen Informationen zu finden.
  • Strukturieren Sie Ihren Inhalt gut und verwenden Sie eine gute Überschriftenhierarchie.
  • Stellen Sie sicher, dass der Inhalt durch Ihre Sprache und Ihr Styling verständlich ist.
  • Zugängliche Inhaltsprinzipien sind vernünftig, erfordern aber etwas Übung.
  • Teilen Sie diese Ansätze mit Ihren weiteren Organisationen, um eine Kultur zu fördern, in der zugängliche Inhalte die Regel sind.

Holen Sie sich die vollständige CXcon-Playlist auf Anfrage über unseren YouTube-Kanal, und werfen Sie einen Blick auf unseren digitalen Zugänglichkeitsbericht und die Design- und Beratungsseiten zur Web-Zugänglichkeit, um Ihre Reise in Sachen Zugänglichkeit zu beschleunigen.