Ihre Seiten barrierefrei machen.

Learn DXPR BuilderBuild pagesVolg een tutorial

Geben Sie jedem Bild eine Beschreibung, halten Sie Überschriften der Reihe nach und machen Sie Text über Farbe lesbar, damit Screenreader- und Tastaturbenutzer Ihre Seiten nutzen können. Diese Seite listet, was DXPR Builder für Sie tut, was Sie selbst hinzufügen und wie Sie das Ergebnis vor dem Veröffentlichen prüfen.

Was der Builder für Sie tut

  • Echte Textstruktur. Das Text-Element nutzt CKEditor 5 mit echten Überschriften (Heading 1 bis Heading 6), Absätzen und Listen.
  • ARIA auf interaktiven Elementen. Tabs tragen role="tablist" und role="tab". Fortschrittsbalken und Circle-Counter tragen role="progressbar" mit ihrem Minimum, Maximum und aktuellem Wert. Collapse-Panel-Titel sind Buttons, die melden, ob ihr Panel offen ist.
  • Barrierefreie Editordialoge. Jeder Einstellungsdialog ist ein role="dialog" mit aria-modal und einem Titel.
  • Tastaturzugriff im Editor. Enter öffnet die Einstellungen eines Elements, Escape schließt ein Panel oder wählt das Element ab, und Strg (Cmd auf einem Mac) mit einer Pfeiltaste bewegt Elemente. Siehe die Tastenkürzel-Referenz.

Layout-Elemente (Sections, Zeilen und Spalten) sind einfache div- Elemente. Die Struktur, die ein Screenreader ansagt, kommt aus Ihren Überschriften.

Alt-Text zu einem Bild hinzufügen

  1. Zeigen Sie auf das Bild und klicken Sie auf More > Settings.
  2. Öffnen Sie das Panel SEO.
  3. Geben Sie eine Beschreibung bei Alt attribute ein: was das Bild zeigt und warum es auf der Seite ist, in einem oder zwei Sätzen, ohne „Bild von“.
  4. Klicken Sie auf Save im Dialog, dann auf Save in der Containerleiste.

Ein SEO-Panel eines Image-Elements mit dem Alt-Attribut „Orange painting of a face in profile“, neben diesem Gemälde und seiner Spring-exhibition-Beschriftung

Wenn Alt attribute leer ist, schreibt das Image-Element gar kein alt, und Screenreader lesen vielleicht den Dateinamen vor. Für ein rein dekoratives Bild nutzen Sie stattdessen ein Abschnitts-Background image im Panel Style; Screenreader überspringen Hintergründe. Das Bildkarussell nutzt ein Alt attribute für alle seine Bilder, also beschreiben Sie die Reihe.

KI-generierte Bilder starten mit Ihrem Prompt als Alt-Text. Bearbeiten Sie ihn, sodass er das Ergebnis beschreibt statt der Anfrage. Siehe Bild- Alt-Text.

Überschriften der Reihe nach halten

  1. Geben Sie der Seite eine Heading 1. Die meisten Themes zeigen den Seitentitel als Heading 1, also fügen Sie im Builder keine zweite hinzu. Auf DXPR CMS können Sie diesen Titel stattdessen auf einer Seite verbergen: Öffnen Sie auf ihrem Bearbeitungsformular DXPR Theme Settings und wählen Sie Page Title unter DXPR Hide Regions an.
  2. Markieren Sie in der Symbolleiste des Text-Elements mit der Überschriftenliste Abschnittstitel als Heading 2 und Unterabschnitte als Heading 3. Überspringen Sie keine Ebenen.
  3. Nutzen Sie die Listen-Buttons der Symbolleiste für Listen statt getippter Bindestriche.

Drei Elemente fixieren ihre Überschriftenebene. Der Jumbotron-Title ist immer Heading 1, der Card-Title ist immer Heading 5, und jeder Toggle title eines Collapse-Panels ist eine Heading 2.

Farbkontraste prüfen

Die Farbwähler bieten die Palette Ihres Themes, messen aber keinen Kontrast, also prüfen Sie ihn selbst:

Text Mindestverhältnis (WCAG AA)
Fließtext 4.5:1
Großer Text (24 px oder etwa 19 px fett) 3:1

Dunkeln Sie für Text über einem Foto das Foto ab, sodass das Verhältnis über das ganze Bild hält. Setzen Sie im Panel Background effects des Abschnitts Background effect auf Gradient mit halbtransparentem dunklem Start color und End color. Hintergründe zeigt die Schritte.

Ein Background-effects-Panel einer Section mit gewähltem Gradient, dunklen halbtransparenten Farbchips unter Start color und End color und Richtung 180, neben einem unter einer weißen Überschrift abgedunkelten Schreibtischfoto

Die Elemente Button und Link zeigen den eingegebenen Text als Linktext. Schreiben Sie, was der Link tut („Register for Open Day“), nicht „click here“. Das Link-Element hat außerdem ein Title attribute in seinem Panel SEO für eine längere Beschreibung.

Was Sie sehen

  1. Setzen Sie View mode in der Containerleiste auf Preview, sodass keine Editorsteuerung im Weg ist.
  2. Drücken Sie Tab, um durch die Seite zu gehen. Jeder Button, Link und Tab ist erreichbar und zeigt einen sichtbaren Fokusring.
  3. Ein automatischer Prüfer, etwa das Barrierefreiheits-Audit des Browsers oder die axe-Erweiterung, meldet keine Fehler für die Builder-Inhalte auf der veröffentlichten Seite.

Wenn Sie keinen sauberen Bericht sehen

  • Der Prüfer meldet ein Bild ohne Alt-Text. Das Alt attribute des Image- Elements ist leer. Füllen Sie es aus, oder legen Sie ein dekoratives Bild in einen Abschnittshintergrund.
  • Der Prüfer meldet zwei Heading 1s. Ein Jumbotron-Title ist immer Heading 1, neben dem Seitentitel Ihres Themes. Nutzen Sie stattdessen ein Text-Element mit einer Heading 2.
  • Der Prüfer meldet eine übersprungene Überschriftenebene. Ein Card-Title ist immer Heading 5. Lassen Sie ihn leer und starten Sie die Card mit einer Text-Element-Überschrift auf der richtigen Ebene.
  • Der Prüfer meldet geringen Kontrast auf Text über einem Foto. Fügen Sie den oben beschriebenen Verlauf hinzu, oder wählen Sie einen dunkleren Texthintergrund.

Wie geht es weiter?