Barrierefreies Webdesign
Was solltest du beachten, damit dein Online-Projekt für Barrierefreiheit gerüstet ist?
Mit Smarda bist du perfekt aufgestellt, wenn es darum geht, barrierefreie Shops und Websites zu erstellen, da Smarda als einziges System weltweit nach dem Standard WCAG 2.2 - AA von TÜV Trust IT zertifiziert ist. Dennoch oder gerade deshalb ist es wichtig, über die Hintergründe genauer Bescheid zu wissen. Die Verantwortung für die korrekte Darstellung liegt letztlich beim Website-Betreiber bzw. beim Designer. Wir möchten hier deshalb einen Überblick zum barrierefreien Internet geben, um mehr Bewusstsein bei Design und Inhalt zu diesem komplexen Thema zu schaffen.
Die neue EU-Richtlinie für Inklusion im Internet:
Ziel von Barrierefreiheit im Internet ist es, die digitale Teilhabe für Menschen mit körperlichen oder geistigen Einschränkungen zu ermöglichen. Dies betrifft neben der Unterstützung von Screenreadern und Tastatursteuerung vor allem auch gestalterische und inhaltliche Aspekte – z. B. klare Navigationsführung, Alt-Texte für Bilder, transkribierte oder untertitelte Videos sowie ausreichende Farbkontraste und Schriftgrößen für sehschwache User. Das bedeutet, dass die systemische Unterstützung alleine nicht ausreicht, um Websites und Shops barrierefrei zu machen. Smarda stellt nativ und standardmäßig alle Funktionen und Gestaltungsmöglichkeiten bereit, um alle Richtlinien erfüllen zu können. Das ist einzigartig!
Der internationale Standard für barrierefreie Webinhalte wird durch die „Web Content Accessibility Guidelines“ (WCAG) definiert, wobei WCAG 2.2 – AA als gesetzlicher Mindeststandard für die Erüllung der neuen EU-Richtlinie gilt (European Accessibility Act).
Dieser Standard ist unter bestimmten Voraussetzungen verpflichtend für Online-Shops und auch Websites, damit Menschen mit Einschränkungen der Zugang des Angebots nicht verwehrt wird. Das bedeutet, dass du Barrierefreiheit bei deinen Projekten berücksichtigen musst, damit du nicht Probleme bei der Gestaltung deiner Shops und Websites bekommst – es drohen Strafen bis zu 80.000 Euro.
Wir können hier nicht auf alle Details in Bezug auf Technologien, Funktionen und inhaltliche Vorgaben eingehen. Im Folgenden werden die grundlegenden Vorgaben und Funktionen – ohne Anspruch auf Vollständigkeit – kurz erklärt.
Technische Maßnahmen:
Die technischen Anforderungen zur Erfüllung des gesetzlichen Mindeststandard WCAG 2.2 - AA werden von Smarda nativ erfüllt, dennoch musst du bei der Einrichtung bei bestimmten Einstellungen auf so manche Details achten:
Tastatursteuerung
Die Tastatursteuerung ist ein zentrales Element der digitalen Barrierefreiheit. Sie ermöglicht es, Webseiten vollständig über die Tastatur zu bedienen. Alle Funktionen einer Website sollten ohne Maus, allein mit der Tastatur erreichbar und nutzbar sein. Das umfasst Navigation, Interaktion mit Formularen, Buttons, Menüs und anderen Elementen. Wichtig dabei ist:
- Alle Funktionen sind mit der Tastatur erreichbar.
- Die Tab-Taste führt logisch durch interaktive Elemente.
- Enter und Leertaste aktivieren Links und Buttons.
- Der Fokus ist stets sichtbar.
- Es gibt keine "Fallen", aus denen man nicht mehr rauskommt.
Mit Smarda sind diese technischen Anforderung nativ gelöst, also bereits voreingestellt. Du hast lediglich Einfluss beim Design des Fokus bei den Elementen.
Formularfelder
Auch Formulare müssen klar, verständlich und leicht nutzbar sein – auch ohne Maus. Speziell für blinde Menschen sind dabei die bestimmte Anforderungen besonders wichtig:
- Beschriftungen (Labels) sind eindeutig und jedem Feld korrekt zugeordnet.
- Die Tab-Reihenfolge ist logisch.
- Fehlermeldungen sind verständlich, gut sichtbar und barrierefrei lesbar.
- Eingabehilfen wie Platzhalter oder Beispiele unterstützen beim Ausfüllen.
- Der Fokus springt sichtbar von Feld zu Feld.
Auch diese Anforderung sind nativ gelöst. Du hast aber natürlich Einfluss auf das Design der Formulare und auch auf die Feld-Beschreibungen bzw. Fehlermeldungen, die auch wesentlich zur Bedienbarkeit beitragen.
Navigation & Sitemap
Eine gute Navigation hilft dabei, sich schnell und einfach auf der Website zurechtzufinden.
- Die Menüstruktur ist klar, logisch und konsistent.
- Alle Seiten sind mit wenigen Klicks erreichbar.
- Die Navigation ist per Tastatur und Screenreader nutzbar.
- Eine Sitemap bietet einen Überblick über alle Seiten – als HTML-Seite oder in der Fußzeile verlinkt.
Es gilt, dass jede Seite bzw. jeder Inhalt direkt erreichbar sein soll. Dafür soll eine Suchfunktion oder eine Sitemap unterstützen, die auf alle Seiten verlinkt. Smarda bietet eine Sitemap-Funktion in allen Vorlagen standardmäßig an.
Beschriftung von Buttons & Icons
Laut WCAG müssen alle Steuerelemente (z. B. Eingabefelder, Buttons, Pfeile usw.) klar und eindeutig beschriftet sein, damit sie auch für Blinde vom Screenreader vorgelesen werden können:
- Labels stehen sichtbar beim Element oder sind screenreader-lesbar verknüpft (WCAG 1.3.1, 2.4.6).
- Die Beschriftung beschreibt klar, was eingegeben oder ausgewählt werden soll.
- Auch Icons oder Buttons brauchen eine aussagekräftige Textalternative (z. B. via aria-label).
Diese Labels sind bereits bei allen Smarda Steuerungselementen eingebaut. Falls du mittels Einbindungen/Widgets eigene Elemente einbringst, musst du bei diesen diese Funktionalität ebenso gewährleisten.
Gestalterische Maßnahmen:
Die Premium-Vorlagen von Smarda sind gemäß der Vorgaben ausgeführt. Das betrifft auch Schriftgrößen und Farbkontraste. Sobald du in die Gestaltung eingreifst, solltest du dir also des Regelwerks für Barrierefreiheit bewusst sein:
Ausreichende Farbkontraste
Laut WCAG 2.2 müssen Texte und Bedienelemente ausreichend kontrastreich gestaltet sein, damit sie auch bei Sehbeeinträchtigung gut lesbar sind. Konkret gilt für die gesetzlich vorgeschrieben Stufe AA:
- Text muss einen Kontrast von mindestens 4,5:1 zum Hintergrund haben.
- Für großen Text (ab 18 pt oder 14 pt fett) reicht ein Kontrast von 3:1.
- Informationen dürfen nicht nur über Farbe vermittelt werden (z. B. nicht nur „rot“ für Fehler).
Die Einhaltung des Kontrastes kann für Designer durchaus zur Herausforderung werden. Für die Prüfung empfiehlt sich daher, Hilfstools zu verwenden wie z. B. den Color Contrast Checker.
Schriften & Textstruktur
Texte müssen gut lesbar und flexibel anpassbar sein – auch auf mobilen Geräten.
- Relative Einheiten verwenden (em, rem statt px), damit Texte skalierbar bleiben.
- Inhalte müssen auf 200 % vergrößern sein, ohne dass Funktionen oder Inhalte verloren gehen.
- Empfohlene Grundgröße ist 16 px für Fließtext.
- Keine rein textbasierten Informationen in Bildern.
- Mobil: Inhalte müssen auch bei Vergrößerung ohne horizontales Scrollen nutzbar bleiben.
Außerdem sollten Textelemente für die Orientierung von Screenreadern eine korrekte HTML-Struktur aufweisen:
- <h1>: Hauptüberschrift – nur einmal pro Seite<h2>: Hauptabschnitte der Seite
- <h3>: Unterpunkte eines Abschnitts
- … bis <h6>: weitere Ebenen – aber sparsam verwenden
- Keine Sprünge in der Reihenfolge (z. B. von h1 zu h4)
Kontrastschalter für Banner & Slider
Ein beliebtes Stilmittel für Webdesigner sind Banner und Slider. Bei diesen werden die Überschriften und Texte üblicherweise über das Bild gestellt. Dadurch kommt es meist zu Problemen mit dem ausreichenden Kontrast zwischen Texten und Hintergrundbild. Zu bedenken ist dabei, dass die Texte in jeder Bildschirmauflösung ausreichend zum Hintergrund kontrastieren.
Das macht es besonders schwierig, passende Bilder zu finden, die ausreichend kontrastreich an jenen Stellen sind, wo die Texte platziert werden. Wir haben dafür den Kontrastschalter im System vorgesehen, der speziell bei Banner und Slider auf ein sehr starkes Kontrastverhältnis umschaltet. Du kannst diesen zuschalten, wenn du ihn benötigst.
Fokus für die Tastatursteuerung
Um eine Website oder einen Shop mit Tastatur bedienen zu können, ist der so genante Fokus entscheidend, also die Anzeige, bei welchem Link sich der User gerade befindet. Dies ist üblicherweise eine kräftige Umrahmung des betroffenen Elements.
Unsere Premium-Vorlagen haben alle bereits diesen Fokus voreingestellt. Du kannst diesen aber für die Fokusanzeige bei Formularen selbst gestalten. Diese Fokusgestaltung betrifft alle Formularfelder und das Suchfeld. Achte beim Design darauf, dass der Kontrast des Fokus kraftig genug ist!
Redaktionelle Maßnahmen:
Barrierefreie Inhalte sind nicht nur technisch, sondern auch redaktionell gut durchdacht. Folgende Punkte sind bei der Erstellung von Texten, Bildern und multimedialen Inhalten zu berücksichtigen:
Alternativtexte (Alt-Texte)
Bilder und Grafiken benötigen Alternativtexte, damit auch Blinde erfassen können, was dargestellt wird:
- Jede aussagekräftige Grafik braucht einen beschreibenden Alt-Text
- Inhalt und Funktion des Bildes sollen klar erklärt sein
- Dekorative Bilder erhalten ein leeres alt="" (nicht relevant für Screenreader)
- Keine Wiederholung von Informationen, die bereits im Text stehen
- Auch Video/Audio-Inhalte brauchen Untertitel, Transkripte oder Audiodeskriptionen (je nach Inhalt)
Smarda bietet dir KI-Tools zur automatisierten Erstellung von Alt-Texten für deine Bilder.
Abkürzungen & Übersetzungen
Abkürzungen, Akronyme, Fachausdrücke und fremdsprachige Ausdrücke sollten zum besseren Verständnis erklärt werden.
Einzelne Wörter oder Sätze in anderen Sprachen müssen mit dem passenden lang-Attribut versehen werden. Vermeide unübersetzte Fachbegriffe, wenn sie nicht allgemein verständlich sind
Smarda bietet im Texteditor die Möglichkeit, Erklärungen und Übersetzungen im Text zu ergänzen. Diese Text-Elemente werden dann auf der Website strichliert unterstrichen angezeigt und bieten dann bei Mouseover den Erklärtext an.
Beispiel: BFSG
Empfehlungen zu Sprachstil und Inhalt
Für barrierefreie Inhalte ist ein klarer, verständlicher Sprachstil besonders wichtig. Texte sollten in einfacher, gut strukturierter Sprache verfasst sein – kurze Sätze, aktive Formulierungen und der Verzicht auf unnötige Fachbegriffe erleichtern das Verständnis für alle Nutzer:innen.
Auch Linktexte spielen eine zentrale Rolle: Sie müssen aussagekräftig sein und den Zielinhalt klar beschreiben, damit sie auch außerhalb des Kontexts (z. B. bei Screenreadern) verständlich bleiben.
Bei der Gestaltung von Listen und Tabellen ist eine logische Struktur entscheidend. Tabellen sollten korrekt ausgezeichnet und mit erklärenden Überschriften versehen sein, damit die darin enthaltenen Informationen nachvollziehbar und zugänglich bleiben.
Tools zum Testen:
Damit du die Barrierefreiheit deiner Websites und Shops testen kannst, stehen dir mittlerweile eine Vielzahl an Tools zur Verfügung. Folgende möchten wir dir empfehlen:
