Eine barrierefreie Website mit Joomla und dem Astroid Framework lässt sich gut umsetzen – aber Barrierefreiheit entsteht nicht automatisch durch das System, sondern durch sauberes Template-, Inhalts- und Komponenten-Setup. Dies ist z.B. beim Menü der Fall, indem man das Untermenü nicht mit Hover öffnet, sondern per Klick, was in den Template Optionen eingestellt werden kann. Grundsätzlich ist es so, dass man erst einmal ein Konzept erstellt und dann die Webseite so gestaltet, um eine Barrierefreiheit möglichst gut zu erreichen. Ich bitte um Verständnis, dass wir hier kein Konzept für Sie erstellen und Ihren Auftritt gestalten. Technisch ist jedes Template als barrierefreie Grundlage geeignet. Die Umsetzung ihrerseits, was Module, Menüstruktur, Farben, Schriftarten usw. angeht, ist von Ihnen umzusetzen. Dazu gibt es viele Tipps im Netz, die Sie sich ansehen sollten.
Hier einmal Infos kurz zusammengestellt:
1. Grundsetup: Joomla + Astroid richtig vorbereitenJoomla (Basis)
- Aktuelle Version verwenden (wichtig für Accessibility-Updates)
- Standard-Editor z. B. TinyMCE korrekt konfigurieren
- Saubere Inhaltsstruktur aktivieren (kein „div-Baukasten“)
Astroid Framework
- Verwende ein leichtes Starter-Template (kein überladenes Demo-Layout)
- Aktiviere:
- Semantic HTML Output
- Responsive Breakpoints sauber gesetzt
- Deaktiviere unnötige Animationen/Effects (Reduce Motion berücksichtigen)
2. Wichtigste Barrierefreiheits-Prinzipien (WCAG 2.1/2.2)Du solltest dich an folgende 4 Kernbereiche halten:
Wahrnehmbar
- Kontrast mindestens 4.5:1 (Text)
- Keine Information nur über Farbe vermitteln
- Bilder immer mit sinnvollen ALT-Texten
👉 Astroid: Prüfe CSS-Variablen für Farben + Kontrast
Bedienbar
- Vollständige Tastatur-Navigation (Tab, Enter, Escape)
- Fokus sichtbar gestalten (:focus-visible)
- Skip-Links aktivieren („Zum Inhalt springen“)
👉 In Astroid:
- Menü-Komponenten auf Keyboard-Tauglichkeit testen
- Offcanvas-Menüs prüfen (häufige Fehlerquelle)
Verständlich
- Klare Überschriftenstruktur:
- H1 nur einmal
- logische Reihenfolge H2 → H3 → H4
- Einfache Sprache, wo möglich
- Formulare mit Labels (nicht nur Placeholder!)
Robust
- Sauberes HTML5 (kein kaputtes Div-Nesting)
- ARIA nur wenn nötig (nicht „über-ARIA-en“)
- Kompatibilität mit Screenreadern testen
3. Joomla-spezifische MaßnahmenAccessibility-Plugins nutzen
- Joomla Core hat bereits:
- „Accessibility Checker“ (je nach Version/Setup)
- Ergänzend sinnvoll:
- ARIA Menu Fixes
- SEO/Accessibility Checker Extensions (vorsichtig auswählen)
Inhalte korrekt strukturieren
- Beiträge nicht nur visuell formatieren
- Immer:
- richtige Heading-Tags
- Listen statt manuellem Layout
4. Astroid Framework: typische StolperstellenMenü / Navigation
- Mega-Menüs nur nutzen, wenn sie barrierefrei konfiguriert sind
- Keyboard-Fokus sichtbar machen
- Dropdowns mit Enter/Space bedienbar
Slider / Animationen
- Autoplay vermeiden oder stoppbar machen
- prefers-reduced-motion unterstützen
Buttons & Icons
- Icons immer mit Text oder ARIA-Label kombinieren
- Kein „icon-only UI“ ohne Beschreibung
5. Formulare (kritischster Bereich)
- Jedes Feld braucht:
- <label>
- klare Fehlermeldungen
- Fehler nicht nur farblich anzeigen
- Fokus bei Fehlern automatisch ins erste Problemfeld
6. Testing (unbedingt durchführen)Automatisch
- Lighthouse (Chrome DevTools)
- WAVE Accessibility Tool
Manuell
- Nur Tastatur bedienen
- Screenreader testen:
- NVDA (Windows)
- VoiceOver (Mac/iOS)
7. Best Practice Setup (Kurz-Checkliste)✔ Klare H1–H3 Struktur
✔ Tastaturbedienbarkeit komplett
✔ Kontrast geprüft
✔ ALT-Texte überall sinnvoll
✔ Skip-Link vorhanden
✔ Formulare korrekt beschriftet
✔ Kein Autoplay ohne Kontrolle
✔ ARIA nur gezielt eingesetzt
