> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Eigenes CSS für die Barrierefreiheit

Unsere App erlaubt es Ihnen, das Erscheinungsbild der Barrierefreiheit über **eigenes CSS** vollständig anzupassen. In den Einstellungen der Barrierefreiheit finden Sie im Reiter Style einen **CSS-Editor**, in dem Sie eigene Stile ergänzen. Diese Stile wirken direkt auf die Komponenten der Barrierefreiheit, die auf Ihrer Website oder in Ihrer App geladen werden.

Dieser Artikel erklärt, wie die Barrierefreiheit aufgebaut ist und wie Sie die einzelnen Elemente mit CSS-Selektoren ansprechen.

### Überblick über den Aufbau

Das gesamte System wird als **Web Component** mit folgendem Root-Tag geladen:

```html
<pandectes-a11y></pandectes-a11y>
```

Alle Elemente der Barrierefreiheit liegen innerhalb dieser Komponente. Beim Schreiben von CSS können Sie Ihre Regeln optional unter pandectes-a11y einschränken, damit andere Teile Ihrer Website unberührt bleiben.

Beispiel:

```html
* {
  font-family: Arial, sans-serif;
}
```

### Elemente, die Sie gestalten können

Die Barrierefreiheit besteht aus zwei **Hauptelementen**, die sich unabhängig voneinander gestalten lassen.

###### 1. Dialog

Das ist das Fenster, in dem alle Funktionen Ihres Widgets zur Verfügung stehen.

**Selektor**

```
.a11y-option-tile {

}
```

**Beispielanpassung**

```
[data-role="notice"] {
  background-color: #ffffff;
  color: #333333;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
}
```

###### 2. Widget – Schaltflächensymbol

Das ist die schwebende oder eingebettete Schaltfläche, über die Nutzer das Barrierefreiheits-Fenster erneut öffnen.

**Selektor**

```
button.widget {

}
```

**Beispielanpassung**

```
button.widget {
  background-color: #000000;
  color: #ffffff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
```

### Fazit

Mit den obigen Selektoren steuern Sie das Erscheinungsbild jedes Teils der Barrierefreiheit vollständig und passen es an Ihre Marke und Ihr Designsystem an.