---
title: "Academy Lesson"
canonical_url: "https://academy.laioutr.com/en/lektionen/ux-designer-accessibility"
locale: en
meta:
  "og:title": "Academy Lesson"
---

[Go to home](https://academy.laioutr.com/en)

- [Agentic UX Designer](https://academy.laioutr.com/en/lernpfade/ux-designer-learning-path)

- [Accessibility to WCAG 2.1 AA](https://academy.laioutr.com/en/lektionen/ux-designer-accessibility)

Accessibility to WCAG 2.1 AA

# Accessibility to WCAG 2.1 AA

12 min

Many online services must be accessible under the German Accessibility Strengthening Act (BFSG). The sections of Laioutr UI are built for WCAG 2.1 AA, but design choices can still break it. This lesson shows contrast, font sizes, focus, alt texts and heading structure and how tokens help keep accessibility in place.

## Key takeaways

- Laioutr UI provides sections built for WCAG 2.1 AA.
- Colour choices and content also determine accessibility.
- Tokens keep contrast in place over time.

## Read more

- [Accessibility according to WCAG 2.1 AA](https://academy.laioutr.com/en/artikel/accessibility-according-to-wcag-2-1-aa)6 min

  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.
- [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.

## 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/lektionen/ux-designer-accessibility#webpage",
      "@type": "WebPage",
      "name": "Academy Lesson",
      "url": "https://academy.laioutr.com/en/lektionen/ux-designer-accessibility",
      "breadcrumb": {
        "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-accessibility#breadcrumb"
      },
      "isPartOf": {
        "@id": "https://academy.laioutr.com/#website"
      },
      "potentialAction": [
        {
          "@type": "ReadAction",
          "target": [
            "https://academy.laioutr.com/en/lektionen/ux-designer-accessibility"
          ]
        }
      ]
    },
    {
      "@id": "https://academy.laioutr.com/en/lektionen/ux-designer-accessibility#breadcrumb",
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "name": "Home",
          "item": "https://academy.laioutr.com/en",
          "position": 1
        },
        {
          "@type": "ListItem",
          "name": "Agentic UX Designer",
          "item": "https://academy.laioutr.com/en/lernpfade/ux-designer-learning-path",
          "position": 2
        },
        {
          "@type": "ListItem",
          "name": "Accessibility to WCAG 2.1 AA",
          "item": "https://academy.laioutr.com/en/lektionen/ux-designer-accessibility",
          "position": 3
        }
      ]
    }
  ]
}
```