---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa"
locale: en
meta:
"og:title": "Academy Article"
---
[Go to home](https://academy.laioutr.com/en)
- [Studio](https://academy.laioutr.com/en/bereiche/studio)
- [Design and brand](https://academy.laioutr.com/en/leitfaeden/design-and-brand)
- [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)
# Accessibility according to WCAG 2.1 AA
Laioutr UI components are designed for WCAG 2.1 AA: contrast, keyboard operation, focus states and semantic structure are built in. An accessible storefront also depends on the content, such as alt texts, heading order and clear link texts.
## Before you start
- Plan
- All plans
- Duration
- 6 min
Last reviewed on October 15, 2026
Laioutr UI is built on **Reka UI**, an open-source library of accessible primitive components. All sections and blocks build on it. As a result, key requirements of WCAG 2.1 at level AA are already solved inside the component:
- **Contrast:** Steps 11 and 12 of every colour scale are reserved for readable text, and text colours adapt automatically when the accent colour changes.
- **Surface tone:** Text, icons and focus rings pick a legible colour for light, dark or bright backgrounds, calculated with WCAG relative luminance.
- **Operation:** Sliders, menus and forms can be used with the keyboard, and focus states are visible.
### Why it is mandatory
Since 28 June 2025, the German Accessibility Strengthening Act (**BFSG**, Barrierefreiheitsstärkungsgesetz) applies in Germany. It affects many online services, in particular online shops for consumers. In practice, WCAG 2.1 AA serves as the technical basis. Whether and how the law applies to a specific offering is a matter for legal advice; this article does not replace it.
Components lay the foundation; the result depends on accessible content.
## Step by step
1. 1 ### Step 1: Maintain alt texts
Give every meaningful image a short alt text describing what it shows. Leave purely decorative images without alt text.
2. 2 ### Step 2: Keep headings in order
Use exactly one main heading per page and do not skip levels. Screen readers use headings for navigation.
3. 3 ### Step 3: Clear links and buttons
Write link texts that make sense out of context, for example View shipping costs instead of Click here.
4. 4 ### Step 4: Stay with theme colours
Use theme colours for backgrounds and text, and pay attention to contrast warnings in the UI Kit settings.
5. 5 ### Step 5: Test with the keyboard
Go through new pages in the preview using only Tab, Shift and Enter, and check that every element can be reached and the focus is visible.
## Frequently asked questions
Is a Laioutr storefront automatically BFSG compliant?
No. Laioutr provides components designed for accessibility. Whether the whole storefront meets the requirements also depends on content, custom components and integrated third-party apps. The legal assessment is up to specialists.
Do the rules also apply to custom sections and blocks?
Yes. Custom components should build on the UI Kit's foundation components and tokens so they inherit contrast logic, surface tone and focus states. The development team checks keyboard operation and labels itself.
How can the accessibility of a page be checked?
A first check works with a keyboard test and an automated tool in the browser, such as the Lighthouse accessibility audit. A full assessment against WCAG 2.1 AA requires a manual review.
## Related
- [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)6 min
Design tokens are named variables for colours, fonts, spacing, radii and effects that every Laioutr UI component is built on. A theme assigns concrete values to these tokens and changes the look of the whole storefront without touching any component.
- [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)7 min
In the UI Kit settings in Studio, the team defines the project's colour scales, fonts and icon libraries and sees every change in the preview right away. The state is saved as a version and applies to the storefront once published.
- [Manage media in Cockpit and Studio](https://academy.laioutr.com/en/artikel/manage-media-in-cockpit-and-studio)5 min
Images, videos and audio files are managed centrally in the Media Library under Content in Cockpit. In Studio, the media picker selects files from every connected library, such as the shop system, and uploads new ones where the library allows it.
- [Define custom Sections and Blocks for Studio](https://academy.laioutr.com/en/artikel/define-custom-sections-and-blocks-for-studio)15 min
Every Section and Block is a Vue file with an exported definition, created with defineSection or defineBlock. It sets the component name, Studio metadata, fields and slots, and Studio builds its picker and sidebar from it.
- [Go-live checklist](https://academy.laioutr.com/en/artikel/go-live-checklist)10 min
Before going live, five areas are checked: account, project, markets and languages; the tested app connection; published pages including legal pages; SEO basics and redirects; and finally deployment, custom domain and removing password protection.
## Learn it in a lesson
- [Accessibility to WCAG 2.1 AA](https://academy.laioutr.com/en/lektionen/ux-designer-accessibility)12 min
## [Design and brand](https://academy.laioutr.com/en/leitfaeden/design-and-brand)
Search this guide
1. [Understanding design tokens and themes](https://academy.laioutr.com/en/artikel/understanding-design-tokens-and-themes)6 min
2. [UI Kit settings: colours, fonts, icons and versions](https://academy.laioutr.com/en/artikel/ui-kit-settings-colours-fonts-icons-versions)7 min
3. [Work with the Figma Kit and hand off to development](https://academy.laioutr.com/en/artikel/work-with-the-figma-kit-and-hand-off-to-development)10 min
4. [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)6 min
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "en",
"name": "Default",
"url": "https://academy.laioutr.com/",
"translationOfWork": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa"
]
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/en",
"position": 1
},
{
"@type": "ListItem",
"name": "Studio",
"item": "https://academy.laioutr.com/en/bereiche/studio",
"position": 2
},
{
"@type": "ListItem",
"name": "Design and brand",
"item": "https://academy.laioutr.com/en/leitfaeden/design-and-brand",
"position": 3
},
{
"@type": "ListItem",
"name": "Accessibility according to WCAG 2.1 AA",
"item": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#/schema/question/1",
"@type": "Question",
"inLanguage": "en",
"name": "Is a Laioutr storefront automatically BFSG compliant?",
"acceptedAnswer": {
"@type": "Answer",
"text": "No. Laioutr provides components designed for accessibility. Whether the whole storefront meets the requirements also depends on content, custom components and integrated third-party apps. The legal assessment is up to specialists.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#/schema/question/2",
"@type": "Question",
"inLanguage": "en",
"name": "Do the rules also apply to custom sections and blocks?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Yes. Custom components should build on the UI Kit's foundation components and tokens so they inherit contrast logic, surface tone and focus states. The development team checks keyboard operation and labels itself.
"
}
},
{
"@id": "https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa#/schema/question/3",
"@type": "Question",
"inLanguage": "en",
"name": "How can the accessibility of a page be checked?",
"acceptedAnswer": {
"@type": "Answer",
"text": "A first check works with a keyboard test and an automated tool in the browser, such as the Lighthouse accessibility audit. A full assessment against WCAG 2.1 AA requires a manual review.
"
}
}
]
}
```