WordPress Barrierefreiheit: Worauf es wirklich ankommt

Ist es möglich, mit WordPress barrierefrei zu sein?

Ja – es ist möglich. Aber: WordPress ist nur das Fundament. Wie barrierefrei eine Website am Ende wirklich ist, hängt stark davon ab, wie sie gebaut wird. Entscheidend sind:

• das gewählte Theme
• der verwendete PageBuilder
• die eingesetzten Plugins

Alle drei Elemente variieren stark in ihrer Qualität und Barrierefreiheit. Wer hier nicht aufpasst, macht schnell unnötige Kompromisse.

Was muss ein PageBuilder leisten, um barrierefrei zu sein?

Ein erster Indikator ist der generierte Code. Wenn der Builder tonnenweise unübersichtlichen, verschachtelten Code (auch Bloat genannt) erzeugt, ist das meistens ein schlechtes Zeichen.

schlechter Code

<div class="wrapper">
  <div class="super-container">
    <div class="row clearfix">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="inner-box">
          <div class="content-wrapper">
            <div class="text-block">
              <div class="paragraph-container">
                <span class="text-content">
                  <b><i>Hier steht ein ganz normaler Satz</i></b>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Cleaner Code (gute Basis für Barrierefreiheit)

<section class="brxe-section">
  <h2 class="brxe-heading">Inhalt</h2>
  <p>Ein barrierefreier Absatz.</p>
</section>

Wie teste ich, ob mein PageBuilder barrierefrei ist?

• Navigation: Ist sie komplett per Tastatur bedienbar?
• Tabs & Akkordeons: Kann man zwischen den Elementen per Tab navigieren und mit Enter/Space
• aktivieren?
• Typografie & Abstände: Kannst du rem und em als Einheiten verwenden oder bist du auf px beschränkt?
• Individuelle ARIA-Labels: Gibt dir der PageBuilder die Möglichkeit, eigene aria-label-Attribute zu setzen, z. B. bei Navigationslinks oder interaktiven Komponenten?
• Semantische HTML-Tags: Setzt dein PageBuilder sinnvolle HTML5-Strukturen ein – also Elemente wie <header>, <nav>, <main>, <section> oder <footer>? Nur so ist sichergestellt, dass Screenreader und Hilfstechnologien die Seite korrekt verstehen und gliedern können.

Wenn du hier überall „Ja“ sagen kannst, ist das ein gutes Zeichen.

Welchen PageBuilder empfehlen wir?

Unsere Empfehlung: Bricks Builder

Bricks vereint Flexibilität, sauberen Code und Barrierefreiheit wie kaum ein anderer PageBuilder. Der HTML-Code, den Bricks generiert, ist klar strukturiert und schlank – kein überflüssiges Markup, keine unnötigen Klassen, kein Bloat. Viele wichtige Elemente wie Navigation, Tabs, Akkordeons oder Modals sind bereits barrierefrei umgesetzt. Die Tastaturbedienung funktioniert zuverlässig, ARIA-Attribute sind sauber integriert und es wird auf semantische HTML-Strukturen geachtet.

Dazu kommt: Bricks erlaubt die Verwendung von rem und em für Schriftgrößen und Abstände – ein wichtiger Baustein für skalierbare, barrierearme Layouts. Wer will, kann tief in den Code eingreifen, wer lieber visuell arbeitet, kommt genauso gut zurecht. Für uns ist Bricks der klare Favorit, wenn es um moderne, zugängliche WordPress-Websites geht.

Zum Bricks Builder

Ist Divi barrierefrei?

Derzeit: Nein.
Bei unseren Tests waren grundlegende Elemente wie Navigation nicht mit der Tastatur bedienbar. Für barrierefreie Websites ist Divi daher momentan nicht geeignet.

Ist Elementor barrierefrei?

Derzeit: Noch nicht ganz.
Elementor hat einige Schwächen, insbesondere bei interaktiven Komponenten. Aber: Mit Version 4 arbeitet das Team aktiv an Verbesserungen. Wir sind zuversichtlich, dass Elementor in Zukunft eine solide Lösung wird.

Ist Gutenberg barrierefrei?

Für unsere Blogartikel nutzen wir den Gutenberg Editor, weil er vieles bereits richtig macht – etwa sauberen HTML-Code und gute Grundstruktur. Für komplette Websites verwenden wir ihn jedoch nicht, da er in vielen Bereichen zu limitiert ist. Die meisten Nutzer greifen ohnehin zu zusätzlichen Block-Plugins, und genau dort gelten dieselben Anforderungen an Barrierefreiheit wie bei jedem PageBuilder: saubere Semantik, Tastaturbedienbarkeit, sinnvolle ARIA-Attribute und skalierbare Einheiten.

Zusammengefasst

• WordPress kann barrierefrei sein – es hängt vom Aufbau ab.
• Achte auf sauberen Code und vollständige Tastaturbedienbarkeit.
• Nutze flexible Einheiten wie rem/em für bessere Skalierbarkeit.
• Unser Favorit für barrierefreie Seiten: Bricks Builder

Teste dein Wissen