Die 5 häufigsten BFSG-Findings — und wie Sie sie in Elementor beheben.

Alt-Texte über das Elementor-Image-Widget

Elementor zeigt das Alt-Feld nicht inline am Widget — Sie müssen zur Media Library zurück. Das ist der häufigste BFSG-Fehler in Elementor-Seiten.

So fixen Sie das in Elementor

1. Öffnen Sie die Seite im Elementor-Editor.
2. Klicken Sie auf den Bild-Widget (Image-Widget) — links erscheinen die Einstellungen.
3. Klicken Sie auf das Vorschaubild unter „Choose Image" — die WordPress-Medienbibliothek öffnet sich.
4. Wählen Sie das Bild aus. Rechts in der Sidebar unter „Anhang-Details" finden Sie das Feld „Alternativtext".
5. Beschreiben Sie das Bild in einem kurzen, vollständigen Satz.
6. Auf „Auswählen" klicken — Elementor übernimmt das Bild mit dem neuen Alt-Text.

Galerien, Slideshows, Image-Box-Widgets

Gleiches Prinzip: die Alt-Texte stammen aus der Medienbibliothek. Für die Galerie-, Slideshow- und Image-Carousel- Widgets müssen alle einzelnen Bilder dort einen Alt-Text haben — ein gemeinsames „Gallery Alt Text"-Feld gibt es nicht.

Heading-Hierarchie über das Heading-Widget

Das Heading-Widget verleitet dazu, Überschriften als Styling-Werkzeug zu missbrauchen — mit kaputter Semantik als Folge.

Die goldene Regel

• Genau eine H1 pro Seite — meist der Seitentitel, häufig vom Theme automatisch gesetzt.
• H2 für Hauptabschnitte (z. B. „Unsere Leistungen", „Über uns", „Kontakt").
• H3 für Unterabschnitte innerhalb eines H2-Blocks.
• Niemals Stufen überspringen — kein H2 direkt nach einem H4.

So stellen Sie die Hierarchie im Heading-Widget ein

1. Klicken Sie auf den Heading-Widget — links erscheint das Einstellungs-Panel.
2. Im Tab „Inhalt" finden Sie das Dropdown „HTML-Tag" (oder „HTML Tag" auf Englisch).
3. Wählen Sie h2, h3, ... je nach semantischer Ebene — nicht nach Aussehen.
4. Sie brauchen visuell große Schrift, aber semantisch keine Überschrift? Wählen Sie div oder p als HTML-Tag und stylen Sie die Schrift im „Style"-Tab.

Farbkontrast über Global Colors

Elementor warnt nicht vor schlechtem Kontrast. Lösung: Global Colors einmal richtig setzen, dann widget-weit verwenden.

Die WCAG-Mindestwerte

• Normaler Text: mindestens 4.5:1 Kontrast zum Hintergrund.
• Großer Text (ab 18 pt bzw. 14 pt fett): mindestens 3:1.
• UI-Elemente und Icons: ebenfalls 3:1 zum Hintergrund.

Global Colors einmal richtig setzen

Statt jeden Widget einzeln zu prüfen, bauen Sie eine konforme Palette im Site-weit verfügbaren System auf:

1. Im Elementor-Editor oben links auf das Hamburger-Menü klicken.
2. „Site Settings" → „Global Colors" öffnen.
3. Sie sehen Primary, Secondary, Text, Accent und beliebig viele „Custom Colors".
4. Jede Farbe gegen Weiß und Schwarz auf 4.5:1 prüfen — z. B. mit WebAIM Contrast Checker (öffnet in neuem Fenster).
5. Speichern. Ab jetzt nur noch Global Colors in Widgets verwenden — nicht „Custom" pro Widget.

Pro Widget prüfen

1. Klicken Sie auf einen Text-Widget.
2. „Style"-Tab → „Color".
3. Hintergrund-Farbe steht meist eine Section/Column höher — auch dort prüfen.
4. Im Color-Picker den Hex-Wert kopieren → WebAIM-Tool → Hintergrund-Hex eintragen → 4.5:1 erreicht?

Tastatur-Bedienbarkeit von Pop-ups und Loop-Builder

Popups und Custom-Buttons in Elementor brauchen manuelle Konfiguration für Tab + Esc. Focus-Ringe werden oft vom Theme weggestyled.

Der 30-Sekunden-Test

1. Öffnen Sie Ihre Seite im Browser.
2. Klicken Sie nicht mit der Maus — drücken Sie nur die Tab-Taste.
3. Können Sie jeden Link, jeden Button, jedes Formularfeld erreichen?
4. Sehen Sie immer einen sichtbaren Focus-Ring?
5. Bei einem Popup: schließt es mit Esc?

Häufige Elementor-Probleme + Lösung

• Popup schließt nicht mit Esc: Im Popup-Builder (Templates → Popups → Popup bearbeiten) den Tab „Erweitert" → „Schließen" öffnen. Toggle „ESC-Taste" auf „Ja".
• Custom-Buttons aus dem Button-Widget nicht erreichbar: Tritt nur auf, wenn Sie über Custom Attributes ein role gesetzt haben, das das native Button-Verhalten überschreibt. Entfernen.
• Kein sichtbarer Focus-Ring: Viele Elementor-Themes setzen outline: none in den Theme-Style-CSS. Im Elementor-Editor → Hamburger → „Site Settings" → „Custom CSS" einfügen:

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  [tabindex]:focus-visible {
      outline: 2px solid #1d4ed8;
      outline-offset: 2px;
  }

• Skip-Link fehlt: Elementor hat keinen built-in Skip-Link. Plugin-Empfehlung: Skip-To Toolbar Menu oder Custom-Code im Theme.
• Mobile-Menü unbedienbar: Verwenden Sie den Elementor-eigenen Nav-Menu-Widget (nicht custom-gebaut). Seit Elementor 3.5 ist der tastatur-fest implementiert.

Formulare über das Forms-Widget (Pro)

Im Elementor-Pro Forms-Widget steht der "Show Label"-Toggle oft auf "No" — das macht das Formular für Screenreader unbenutzbar.

Elementor Pro Forms-Widget — Label-Setup

1. Klicken Sie auf den Forms-Widget — links die Field-Liste.
2. Pro Field „Edit" → Tab „Inhalt".
3. Im Feld „Label" einen aussagekräftigen Text eintragen (z. B. „Ihre E-Mail-Adresse"). Nicht im „Placeholder"!
4. Im Widget-Hauptpanel: „Style"-Tab → „Common" → Toggle „Show Labels" muss auf „Yes" stehen.

Externe Form-Plugins in Elementor (Contact Form 7, Gravity Forms, Forminator)

Werden meist über einen Shortcode-Widget eingebettet. Das Label-Setup passiert dann im jeweiligen Plugin —Anleitung dazu im Gutenberg-Guide.