---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Studio](https://academy.laioutr.com/bereiche/studio)
- [Design und Marke](https://academy.laioutr.com/leitfaeden/design-und-marke)
- [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa)
# Barrierefreiheit nach WCAG 2.1 AA
Die Komponenten von Laioutr UI sind auf WCAG 2.1 AA ausgelegt: Kontraste, Tastaturbedienung, Fokuszustände und semantische Struktur sind eingebaut. Für eine barrierefreie Storefront sorgen zusätzlich die Inhalte, etwa Alternativtexte, Überschriftenfolge und verständliche Linktexte.
## Bevor du startest
- Tarif
- Alle Pläne
- Dauer
- 6 Min.
Zuletzt geprüft am 15. Oktober 2026
Laioutr UI baut auf **Reka UI** auf, einer Open-Source-Bibliothek mit zugänglichen Grundkomponenten. Darauf setzen alle Sections und Blocks auf. Damit sind wesentliche Anforderungen der WCAG 2.1 auf Stufe AA bereits in der Komponente gelöst:
- **Kontrast:** Die Stufen 11 und 12 jeder Farbskala sind für lesbaren Text reserviert, Textfarben passen sich bei einem Wechsel der Akzentfarbe automatisch an.
- **Oberflächenton:** Text, Icons und Fokusrahmen wählen je nach hellem, dunklem oder buntem Hintergrund eine lesbare Farbe, berechnet über die relative Leuchtdichte nach WCAG.
- **Bedienung:** Slider, Menüs und Formulare lassen sich per Tastatur bedienen, Fokuszustände sind sichtbar.
### Warum das Thema Pflicht ist
Seit dem 28.06.2025 gilt in Deutschland das **Barrierefreiheitsstärkungsgesetz (BFSG)**. Es betrifft viele Onlineangebote, insbesondere Onlineshops für Verbraucher. Als technische Grundlage dient in der Praxis die WCAG 2.1 AA. Ob und wie das Gesetz für ein konkretes Angebot gilt, klärt eine rechtliche Beratung; dieser Artikel ersetzt sie nicht.
Komponenten schaffen die Grundlage, das Ergebnis entsteht erst mit barrierefreien Inhalten.
## Schritt für Schritt
1. 1 ### Schritt 1: Alternativtexte pflegen
Jedem inhaltlich relevanten Bild einen kurzen Alternativtext geben, der beschreibt, was zu sehen ist. Rein dekorative Bilder ohne Alternativtext lassen.
2. 2 ### Schritt 2: Überschriften in Reihenfolge halten
Pro Seite genau eine Hauptüberschrift verwenden und Ebenen nicht überspringen. Screenreader nutzen die Überschriften zur Navigation.
3. 3 ### Schritt 3: Verständliche Links und Buttons
Linktexte so formulieren, dass sie ohne Umgebung verständlich sind, also Versandkosten ansehen statt Hier klicken.
4. 4 ### Schritt 4: Farben im Theme belassen
Für Hintergründe und Text die Farben aus dem Theme verwenden und Kontrastwarnungen in den UI-Kit-Einstellungen beachten.
5. 5 ### Schritt 5: Mit der Tastatur testen
Neue Seiten in der Vorschau nur mit Tab, Umschalt und Eingabetaste durchgehen und prüfen, ob jedes Element erreichbar und der Fokus sichtbar ist.
## Häufige Fragen
Ist eine Storefront mit Laioutr automatisch BFSG-konform?
Nein. Laioutr liefert barrierefrei ausgelegte Komponenten. Ob die gesamte Storefront die Anforderungen erfüllt, hängt auch von Inhalten, eigenen Komponenten und eingebundenen Drittanbieter-Apps ab. Die rechtliche Bewertung erfolgt durch Fachleute.
Gelten die Regeln auch für eigene Sections und Blocks?
Ja. Eigene Komponenten sollten auf den Grundkomponenten und Tokens des UI Kits aufbauen, dann übernehmen sie Kontrastlogik, Oberflächenton und Fokuszustände. Tastaturbedienung und Beschriftungen prüft das Entwicklungsteam selbst.
Wie lässt sich die Barrierefreiheit einer Seite prüfen?
Ein erster Check gelingt mit einem Tastaturtest und einem automatischen Prüfwerkzeug im Browser, etwa dem Accessibility-Audit von Lighthouse. Für eine vollständige Bewertung nach WCAG 2.1 AA ist eine manuelle Prüfung nötig.
## Passend dazu
- [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)6 Min.
Design-Tokens sind benannte Variablen für Farben, Schriften, Abstände, Radien und Effekte, auf denen jede Komponente von Laioutr UI aufbaut. Ein Theme belegt diese Tokens mit konkreten Werten und ändert so das Aussehen der gesamten Storefront, ohne Komponenten anzufassen.
- [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)7 Min.
In den UI-Kit-Einstellungen in Studio legt das Team Farbskalen, Schriften und Icon-Bibliotheken des Projekts fest und sieht jede Änderung sofort in der Vorschau. Der Stand wird als Version gespeichert und gilt nach dem Veröffentlichen in der Storefront.
- [Medien in Cockpit und Studio verwalten](https://academy.laioutr.com/artikel/medien-in-cockpit-und-studio-verwalten)5 Min.
Bilder, Videos und Audiodateien werden zentral in der Media Library unter Content in Cockpit verwaltet. In Studio wählt der Medienwähler Dateien aus allen verbundenen Bibliotheken, etwa aus dem Shop-System, und lädt neue hoch, wo die Bibliothek es erlaubt.
- [Eigene Sections und Blocks für Studio definieren](https://academy.laioutr.com/artikel/eigene-sections-und-blocks-fuer-studio-definieren)15 Min.
Jede Section und jeder Block ist eine Vue-Datei mit einer exportierten definition, erstellt mit defineSection oder defineBlock. Die definition legt Komponentenname, Studio-Metadaten, Felder und Slots fest, und Studio baut daraus Auswahl und Seitenleiste.
- [Checkliste Live-Gang](https://academy.laioutr.com/artikel/checkliste-live-gang)10 Min.
Vor dem Live-Gang werden fünf Bereiche geprüft: Konto, Projekt, Märkte und Sprachen; die getestete App-Verbindung; veröffentlichte Seiten mit Pflichtseiten; SEO-Grundlagen und Weiterleitungen; zuletzt Deployment, eigene Domain und das Aufheben des Passwortschutzes.
## In einer Lektion lernen
- [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/lektionen/ux-designer-barrierefreiheit)12 Min.
## [Design und Marke](https://academy.laioutr.com/leitfaeden/design-und-marke)
In diesem Leitfaden suchen
1. [Design-Tokens und Themes verstehen](https://academy.laioutr.com/artikel/design-tokens-und-themes-verstehen)6 Min.
2. [UI-Kit-Einstellungen: Farben, Schriften, Icons und Versionen](https://academy.laioutr.com/artikel/ui-kit-einstellungen-farben-schriften-icons-versionen)7 Min.
3. [Mit dem Figma-Kit arbeiten und an die Entwicklung übergeben](https://academy.laioutr.com/artikel/mit-dem-figma-kit-arbeiten-und-an-die-entwicklung-uebergeben)10 Min.
4. [Barrierefreiheit nach WCAG 2.1 AA](https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa)6 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Design und Marke",
"item": "https://academy.laioutr.com/leitfaeden/design-und-marke",
"position": 3
},
{
"@type": "ListItem",
"name": "Barrierefreiheit nach WCAG 2.1 AA",
"item": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Ist eine Storefront mit Laioutr automatisch BFSG-konform?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Nein. Laioutr liefert barrierefrei ausgelegte Komponenten. Ob die gesamte Storefront die Anforderungen erfüllt, hängt auch von Inhalten, eigenen Komponenten und eingebundenen Drittanbieter-Apps ab. Die rechtliche Bewertung erfolgt durch Fachleute.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Gelten die Regeln auch für eigene Sections und Blocks?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Eigene Komponenten sollten auf den Grundkomponenten und Tokens des UI Kits aufbauen, dann übernehmen sie Kontrastlogik, Oberflächenton und Fokuszustände. Tastaturbedienung und Beschriftungen prüft das Entwicklungsteam selbst.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/barrierefreiheit-nach-wcag-2-1-aa#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Wie lässt sich die Barrierefreiheit einer Seite prüfen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ein erster Check gelingt mit einem Tastaturtest und einem automatischen Prüfwerkzeug im Browser, etwa dem Accessibility-Audit von Lighthouse. Für eine vollständige Bewertung nach WCAG 2.1 AA ist eine manuelle Prüfung nötig.
"
}
}
]
}
```