WordPress Elementor barrierefrei machen: BFSG-Konformität mit dem Page Builder

Elementor und Barrierefreiheit: Das Problem

Elementor ist auf Millionen WordPress-Seiten installiert. Der visuelle Page Builder ermöglicht beeindruckende Designs – aber auf Kosten der Barrierefreiheit. Elementor generiert verschachteltes Div-basiertes HTML das von semantischem HTML weit entfernt ist.

Die Elementor-Widgets nutzen oft keine korrekten ARIA-Attribute. Und: Designer die Elementor nutzen fokussieren sich auf das Visuelle, nicht auf die Zugänglichkeit.

Die größten Barrierefreiheits-Probleme mit Elementor

Div-Suppe statt semantischem HTML (Section, Article, Nav fehlen oft). Kontaktformulare (Elementor Forms) mit fehlenden oder falschen Label-Zuordnungen. Tab-Navigation die nicht der visuellen Reihenfolge folgt.

Slider und Carousels ohne Tastatursteuerung. Popup-Modals ohne Fokus-Management. Und: Counter, Progress Bars und Animationen ohne Textalternativen oder reduced-motion-Support.

Elementor barrierefrei nutzen: Best Practices

HTML-Tag-Einstellung nutzen: Für jeden Abschnitt den korrekten HTML-Tag setzen (section, article, nav statt div). Überschriften-Widget statt Text-Widget für H2, H3. Formular-Labels immer anzeigen (nicht nur Platzhalter).

Bild-Widget: Alt-Text-Feld immer ausfüllen. Buttons: Beschreibenden Text verwenden statt nur 'Hier klicken'. Und: Custom CSS für Fokus-Stile hinzufügen die Elementor standardmäßig nicht setzt.

Elementor-Alternativen mit besserer Barrierefreiheit

Wenn Barrierefreiheit Priorität hat, sind diese Alternativen einen Blick wert: Der WordPress Block Editor (Gutenberg) erzeugt sauberes semantisches HTML. Kadence Blocks hat expliziten Barrierefreiheits-Fokus. Und: GeneratePress mit GenerateBlocks generiert minimales, barrierefreies HTML.

Der Umstieg ist aufwendig, aber für BFSG-Konformität kann es der richtige Schritt sein.

Häufig gestellte Fragen