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:

<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:

* {
  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.

Aktualisiert am: 23/09/2026