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

Alt-Texte im Avada-Image-Element

Im Fusion Builder Image-Element ist Alt-Text inline editierbar — Stolperstein sind aber Section-Hintergrund-Bilder und das Gallery-Element, die Media-Library-Alt-Texte ziehen.

Im Image-Element (Standardfall)

1. Im Fusion Builder das Image-Element anklicken — das Settings-Modal öffnet sich.
2. Tab „General" → Feld „Alternativtext" ausfüllen.
3. Beschreibend formulieren — ein vollständiger Satz, keine Wörter wie „Bild" oder „Foto".
4. Speichern. Im Frontend nichts sichtbar — Text wird nur Screenreadern vorgelesen.

Image-Carousel + Gallery-Element

Diese Elemente ziehen Alt-Texte direkt aus der WordPress-Medienbibliothek. Pflege passiert also zentral pro Bild dort, nicht im Element selbst.

1. WP-Dashboard → „Medien" → Bild anklicken.
2. Im Detail-Panel das Feld „Alternativtext" ausfüllen.
3. Speichern. Alle Verwendungsstellen des Bildes übernehmen den Alt-Text automatisch.

Heading-Hierarchie über das Title-Element

Title-Element und Theme-Options-Typography haben separate Styles pro Heading-Level — das verleitet zum Missbrauch nach Schriftgröße statt Semantik.

Die goldene Regel

• Genau eine H1 pro Seite — meist der Page-Title, in Avada-Themes oft automatisch gesetzt.
• H2 für Hauptabschnitte, H3 für Unterabschnitte.
• Niemals Stufen überspringen, niemals semantische Ebene nach Schriftgröße wählen.

Im Title-Element die Heading-Size setzen

1. Im Fusion Builder Title-Element anklicken.
2. Tab „General" → Dropdown „Heading Size" (1–6).
3. Die Größe entspricht dem HTML-Tag — 1 = h1, 2 = h2, ...
4. Wollen Sie eine andere optische Schriftgröße? Im Tab „Design" → „Font Size" manuell setzen — die semantische Ebene bleibt unberührt.

Im Text-Block-Element

1. Text-Block-Element anklicken → Tab „General" → Editor öffnen.
2. Markieren Sie die Zeile → in der Toolbar das „Format"-Dropdown auf „Überschrift 2", „Überschrift 3" etc. setzen.

Farbkontrast in der Theme-Options-Color-Palette

Avada Demo-Sites nutzen oft hellen Text auf Foto-Hintergründen. Lösung: Color-Palette in den Theme Options sauber setzen, dann konsequent 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.

Theme-weite Farb-Palette sauber setzen

1. WP-Dashboard → „Avada" → „Options" → „Colors".
2. Stellen Sie die zentrale „Color Palette" ein — Primary, Secondary, plus eigene Slots.
3. Prüfen Sie jede Farbe gegen Weiß und Schwarz mit dem WebAIM Contrast Checker (öffnet in neuem Fenster).
4. Speichern. In Elementen das Color-Picker-Dropdown statt „Custom" nutzen — Site-weit konsistent.

Pro Element prüfen

1. Element anklicken → Tab „Design".
2. Abschnitt „Text Color" → Hex-Wert kopieren.
3. Hintergrund-Farbe oft im umgebenden Container — anklicken, Hex-Wert kopieren, im Tool prüfen.

Tastatur-Bedienbarkeit von Modal- und Slider-Elementen

Megamenü ist seit Avada 7.x tastatur-fest. Slider, Modal und Custom-Buttons aus dem Builder brauchen aber oft manuelle Konfiguration.

Der 30-Sekunden-Test

1. Öffnen Sie Ihre Seite im Browser.
2. Drücken Sie nur die Tab-Taste — keine Maus.
3. Können Sie jeden Link, jeden Button, jedes Formularfeld erreichen?
4. Sehen Sie immer einen sichtbaren Focus-Ring?
5. Megamenü / Sub-Menüs: lassen sie sich per Tastatur öffnen und mit Esc schließen?

Häufige Avada-Probleme + Lösung

• Slider stoppt nicht bei Tastatur-Fokus: Slider-Element-Einstellungen → Tab „General" → Toggle „Pause On Focus" auf „Yes".
• Kein sichtbarer Focus-Ring: Viele Avada-Child-Themes setzen outline: none im Custom-CSS. Avada Options → „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: Avada hat keinen built-in Skip-Link. Plugin-Empfehlung: Skip-To Toolbar Menu, oder ein PHP-Snippet im Child-Theme.
• Mobile-Menü: Seit Avada 7.0 standardmäßig tastatur-fest. Bei Custom-Header-Builder-Setups muss das eigene Custom-Menü manuell geprüft werden.
• Modal-Dialog-Element: Tab „Advanced" → „Close on ESC Key" muss auf „Yes" stehen. Default ist je nach Version verschieden.

Formulare über Avada-Forms

Im Avada-Forms-Element steht "Label-Position" oft auf "Hidden" — ohne aria-label-Override geht das Label für Screenreader verloren.

Avada Forms — Label-Setup

1. Avada Forms ist ein eigenes Plugin/Element. Im Fusion Builder das Form-Element anklicken.
2. Tab „General" → Klick auf ein Field (z. B. „Email").
3. Im Field-Editor: „Label" ausfüllen (z. B. „Ihre E-Mail-Adresse"). Nicht im „Placeholder"!
4. „Label Position": empfohlen „Above". Wenn aus Design-Gründen „Hidden" gewählt wird: pflicht ein aria-label im Custom-Attributes-Feld setzen.
5. Toggle „Required" auf „Yes" für Pflichtfelder — Avada setzt automatisch aria-required="true".

Externe Form-Plugins (Contact Form 7, Gravity Forms)

Eingebettet als Shortcode-Element oder über Code-Block. Das Label-Setup passiert dann im jeweiligen Plugin —Anleitung im Gutenberg-Guide.