Barrierefreiheit in SIRIUS 3

Seit Version 3.1 setzt SIRIUS alles um, was ein Theme selbst zu den Anforderungen der WCAG 2.2 auf Stufe AA beitragen kann. Eine barrierefreie Website entsteht trotzdem erst zusammen mit den Inhalten: Alternativtexte, Überschriften und Linktexte liegen in deiner Hand.

Was SIRIUS mitbringt

• Kontraste: Text, Links, Buttons und Fokusrahmen erreichen in der Standardgestaltung und in allen drei Farbwelten mindestens 4,5:1 (Text) bzw. 3:1 (Bedienelemente) – im hellen wie im dunklen Modus. Die Overlays von Card, Kontakt und Galerie sind zu 85 % deckend und tragen fast schwarze Schrift. So reicht der Kontrast auch über dunklen Bildern.
• Sichtbarer Fokus: Alle Links, Buttons und Formularfelder zeigen bei Tastaturbedienung einen deutlichen Rahmen.
• Inhalte, die bei Hover erscheinen: Beschreibung und Link der Card, die Angaben im Kontakt-Element und die Bildunterschriften der Galerie erscheinen auch bei Tastaturfokus. Cards und Kontakt-Elemente ohne Link sind dafür selbst per Tab erreichbar. Auf Touch-Geräten sind diese Inhalte immer sichtbar.
• Navigation: Direkt vor der Hauptnavigation erscheint beim Tabben der Link „Navigation überspringen“. Ein Klick auf einen Menüpunkt setzt den Fokus auf den Abschnitt, der aktive Punkt ist für Screenreader ausgezeichnet. Das mobile Menü meldet seinen Zustand, schließt mit Escape und sperrt so lange den Rest der Seite.
• Lightbox: Die Großansicht ist ein Dialog mit Fokus, Escape und Alternativtext.
• Bewegung: Ist im Betriebssystem „Bewegung reduzieren“ aktiv, laufen keine Animationen. Ohne JavaScript bleiben alle Inhalte sichtbar.
• Zoom: Auch bei 400 % Zoom muss niemand waagerecht scrollen, das mobile Menü lässt sich dann senkrecht scrollen.

Worauf du selbst achten musst

Alternativtexte

Pflege für jedes Bild, das etwas aussagt, einen Alternativtext in der Dateiverwaltung (Metadaten). Rein dekorative Bilder – etwa die Bilder der Cards, deren Überschrift alles sagt – bleiben leer. Besonders wichtig sind Galerien, die eine Lightbox öffnen: Der Alternativtext ist dort der einzige Name des Links.

Überschriften

Jede Seite hat genau eine h1 – in der Demo die Überschrift im Hero. Danach folgen die Ebenen ohne Sprung. Die Abschnittsbezeichnungen mit Nummer (Klasse heading--count) sind in der Demo h2. Möchtest du eine Überschrift größer oder kleiner darstellen, als ihre Ebene vorgibt, nutze die Klassen heading--1 bis heading--6 statt einer anderen Ebene.

Links

Linktexte sollen auch ohne Umgebung verständlich sein („Leistungen ansehen“ statt „hier“). Ein title mit demselben Text wie der Link bringt nichts und kann weg. Öffnet ein Link ein neues Fenster, ergänze einen versteckten Hinweis: <span class="invisible">(öffnet in neuem Fenster)</span>.

Farben im Live-Editor

Die Farbwelten sind geprüft. Wählst du eigene Farben, prüfe diese Paare:

Vordergrund	Hintergrund	Mindestens
Sekundärfarbe (Überschriften, Links)	Weiß	4,5:1
Text auf Markenfarbe	Markenfarbe	4,5:1
Text auf Overlays	Markenfarbe zu 85 % über Schwarz	4,5:1
Weiß	Sekundärfarbe (Footer, Card-Button)	4,5:1

Text auf Markenfarbe und Text auf Overlays folgen automatisch der Sekundärfarbe. Ist deine Markenfarbe so dunkel, dass dunkle Schrift darauf nicht reicht, stelle beide im Live-Editor auf Weiß und prüfe die Overlays mit hellen Bildern. Sieh dir außerdem den Dark Mode an. Werkzeuge wie der WebAIM Contrast Checker helfen beim Nachmessen.

Machst du die Overlays über --base-overlay-background-brand transparenter, hängt der Kontrast stärker vom Bild darunter ab. Prüfe ihn dann mit deinen eigenen Bildern.

Formulare

Gib Feldern für Name, E-Mail, Telefon und Firma im Formulargenerator das passende Autocomplete-Attribut (name, email, tel, organization) und wähle für Telefonnummern die Eingabeprüfung „Telefonnummer“. Ein kurzer Hinweis „Felder mit * sind Pflichtfelder“ über dem Formular erklärt das Sternchen.

Navigationen

Gibt es mehr als eine Navigation auf der Seite, vergib im Modul ein ARIA-Label (z. B. „Hauptnavigation“, „Fußnavigation“). Den Link „Navigation überspringen“ der Onepage-Navigation schaltest du im Modul über Sprunglink ausgeben ein – in SIRIUS ist er voreingestellt.

Bekannte Grenzen

• Slider: Der Slider aus dem Contao-Core liest seine Bedienhinweise auf Englisch vor, die Navigationspunkte sind klein, und bei automatischem Wechsel fehlt eine Pause-Taste. Verzichte auf den automatischen Wechsel.
• Hero mit Video: Ein Hintergrundvideo im Hero läuft ohne Pause-Taste. Verwende lieber ein Bild.
• Ohne JavaScript: Cards und Kontakt-Elemente ohne Link sind dann nicht per Tastatur erreichbar. Ihre Beschreibung erscheint nur bei Hover.

Prüfen

Ein Theme allein macht keine Website barrierefrei. Prüfe deine fertige Seite mit Werkzeugen wie axe oder Lighthouse und, wenn möglich, mit Menschen, die auf Barrierefreiheit angewiesen sind.

Hinweis zur Silktide Toolbar: SIRIUS berechnet abgeleitete Farben mit color-mix(), damit sie deiner Sekundärfarbe folgen. Chrome gibt solche Farben als color(srgb …) aus, und Silktide kann dieses Format nicht lesen. Die Toolbar meldet deshalb bei Buttons, im Kontakt-Abschnitt, bei Zitaten und auf den Overlays Kontrastfehler, die es nicht gibt. axe und Lighthouse messen diese Farben richtig.

Stand: SIRIUS 3.1