#B2B
#B2C
#Strategie
#User Experience
BARRIEREFREIE INHALTE: SO OPTIMIERST DU TEXTE UND BILDER FÜR DEINEN SHOP
Von NETFORMIC | 26.11.2024
Digitale Barrierefreiheit ist ein zentraler Baustein für eine zugängliche und nutzerfreundliche Website. Dabei geht es darum, Inhalte so zu gestalten, dass sie für alle zugänglich sind – unabhängig von individuellen Voraussetzungen oder temporären Herausforderungen. Dies schließt die Strukturierung von Texten, die Nutzung von Bildern und Multimedia sowie die technische Umsetzung ein. In diesem Artikel erhältst du eine detaillierte Anleitung, wie du die Inhalte deines Shops optimierst, um eine barrierefreie Website zu erstellen.
TEXTE BARRIEREFREI GESTALTEN
Texte sind das Herzstück jeder Website. Sie müssen nicht nur gut formuliert, sondern auch klar strukturiert und für jeden leicht erfassbar sein. Eine klare Sprache und eine durchdachte Struktur machen Inhalte für alle zugänglich und sorgen dafür, dass keine unnötigen Hürden entstehen.
TEXTSTRUKTUR
Die Strukturierung von Texten ist essenziell, damit Nutzer den Inhalt schnell erfassen können:
- Überschriften-Hierarchie: Überschriften sollten logisch aufgebaut sein. Eine H1 beschreibt den Hauptinhalt, während H2 und H3 Details strukturieren. Diese Hierarchie hilft auch Screenreadern, Inhalte korrekt zu interpretieren.
- Absätze und Listen: Lange Textblöcke sollten in überschaubare Absätze unterteilt werden. Listen sind ideal, um wichtige Punkte hervorzuheben und die Lesbarkeit zu verbessern.
KLARE & EINFACHE SPRACHE
Eine verständliche Sprache ist entscheidend, damit alle Nutzer die Inhalte problemlos erfassen können:
- Kurze Sätze: Vermeide verschachtelte Formulierungen und setze auf klare Aussagen.
- Verständliche Begriffe: Fachjargon sollte erklärt werden, damit auch unerfahrene Nutzer den Text verstehen können.
- Aktive Sprache: Aktive Sprache stellt den Handelnden und die Handlung in den Vordergrund. Das macht Sätze direkter, klarer und ansprechender. Statt "Das Formular wird vom Nutzer ausgefüllt" (passiv), ist "Du füllst das Formular aus" (aktiv) leichter verständlich. Besonders in Handlungsanweisungen oder Call-to-Actions sorgt aktive Sprache für mehr Klarheit und Engagement.
LESBARKEIT SICHERSTELLEN
Die visuelle Gestaltung des Textes ist genauso wichtig wie der Inhalt selbst, daher solltest du beim Design deiner Website folgende Punkte berücksichtigen:
- Kontraste: Achte auf ausreichende Kontraste zwischen Text und Hintergrund, um die Lesbarkeit zu verbessern.
- Schriftgröße und Schriftart: Nutze gut lesbare Schriftarten und ermögliche die Anpassung der Schriftgröße, damit jeder Nutzer individuell einstellen kann, was für ihn angenehm ist.
BILDER BARRIEREFREI GESTALTEN
Bilder spielen eine wichtige Rolle, um Inhalte visuell ansprechend und verständlich zu machen. Doch barrierefreie Bilder erfordern mehr als nur Ästhetik. Nutzer, die auf Screenreader angewiesen sind oder deren Browser keine Bilder lädt, profitieren von einer durchdachten Bildbeschreibung. Hier sind die wichtigsten Maßnahmen, um Bilder barrierefrei zu gestalten:
ALT-TEXTE SINNVOLL EINSETZEN
Alt-Texte sind entscheidend für die Barrierefreiheit. Sie ersetzen das Bild, wenn es nicht angezeigt werden kann, und ermöglichen Screenreadern, den Inhalt des Bildes vorzulesen. Doch nicht jedes Bild benötigt einen Alt-Text:
- Relevante Inhalte beschreiben: Wenn das Bild wichtige Informationen liefert, wie Produktbilder, informative Grafiken, die den Kontext des Inhalts verdeutlichen, sowie Logos. sollte der Alt-Text präzise beschreiben, was zu sehen ist. Beispiel: „Eine Person, die ein Laptop auf einem Schreibtisch benutzt“.
- Funktionale Bilder erklären: Handelt es sich um ein interaktives Element, wie einen Button oder eine Verlinkung, sollte der Alt-Text die Funktion des Bildes beschreiben, z. B.: „Suche starten“.
- Dekorative Bilder ausschließen: Rein dekorative Bilder, die keinen Mehrwert für den Inhalt bieten, sollten mit einem leeren Alt-Attribut (alt="") versehen werden. Dies verhindert, dass Screenreader unnötige Inhalte vorlesen und den Lesefluss stören.
BILD-BESCHREIBUNGEN ERGÄNZEN
Manche Bilder sind zu komplex, um sie vollständig in einem Alt-Text zu beschreiben, wie Infografiken oder Diagramme. In solchen Fällen solltest du eine zusätzliche Beschreibung hinzufügen:
- Im Fließtext: Füge die Beschreibung in den begleitenden Text ein, um Nutzern die Inhalte verständlich zu machen.
- Separate Seiten: Alternativ kannst du eine detaillierte Beschreibung auf einer verlinkten Seite bereitstellen.
TECHNISCHE ANFORDERUNGEN BEACHTEN
Neben der inhaltlichen Beschreibung gibt es auch technische Anforderungen, die Bilder barrierefrei machen:
- Dateigröße optimieren: Ladezeiten sollten minimiert werden, um die Nutzung auch bei langsamen Internetverbindungen zu gewährleisten.
- Unterstützung für alle Geräte: Stelle sicher, dass Bilder auf mobilen und stationären Geräten gleichermaßen zugänglich sind.
- Kontraste und Bildqualität: Die Bildgestaltung sollte ausreichende Kontraste enthalten, sodass auch Menschen mit eingeschränktem Sehvermögen Inhalte gut wahrnehmen können.
ZUSÄTZLICHE MAßNAHMEN FÜR BARRIEREFREIE BILDER
- Vermeidung von Text in Bildern: Texte sollten im HTML und nicht im Bild selbst integriert werden, da sie sonst von Screenreadern nicht erfasst werden können. Wenn Text unvermeidbar ist, sollte er im Alt-Text oder der Bildbeschreibung reproduziert werden.
- Bildunterschriften verwenden: Bildunterschriften bieten einen direkten Kontext und ergänzen den Alt-Text, besonders wenn das Bild eng mit dem Inhalt des Textes verknüpft ist.
- Optimierung der Dateinamen: Die Dateinamen von Bildern sollten aussagekräftig und beschreibend sein. Dies erleichtert die Zuordnung und verbessert gleichzeitig die SEO-Leistung. Beispiel: „roter-schuh-damen.jpg“.