Machen Sie Ihre Seiten barrierefrei.

Learn DXPR BuilderManage the sitePagina’s toegankelijk en vindbaar maken

Geben Sie jedem Bild eine Beschreibung, halten Sie Überschriften in Ordnung und machen Sie Text über Farbe lesbar, damit Menschen mit Screenreader und Tastatur Ihre Seiten verwenden können. Diese Seite listet auf, 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 Textelement 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 Kreiszähler tragen role="progressbar" mit ihrem Minimal-, Maximal- und aktuellem Wert. Ausklappbare Paneltitel sind Schaltflächen, die melden, ob ihr Panel offen ist.
  • Barrierefreie Editor-Dialoge. Jeder Einstellungsdialog ist ein role="dialog" mit aria-modal und einem Titel.
  • Tastaturzugang im Editor. Enter öffnet die Einstellungen eines Elements, Escape schließt ein Panel oder hebt die Auswahl des Elements auf, und Ctrl (Cmd auf einem Mac) mit einer Pfeiltaste verschiebt Elemente. Siehe die Tastaturkürzel-Referenz.

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

Alternativtext 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 in Alt attribute eine Beschreibung ein: was das Bild zeigt und warum es auf der Seite ist, in einem oder zwei Sätzen, ohne „image of“.
  4. Klicken Sie im Dialog auf Save, dann auf Save an der Container-Leiste.

SEO-Panel eines Bildelements mit dem Alt-Attribut „Orange painting of a face in profile“, neben dem Gemälde und seiner Frühjahrsausstellungs-Beschriftung

Wenn Alt attribute leer ist, schreibt das Bildelement gar kein alt, und Screenreader lesen möglicherweise den Dateinamen vor. Für ein rein dekoratives Bild nutzen Sie stattdessen ein Abschnitts-Background image im Panel Style; Screenreader überspringen Hintergründe. Das Bilderkarussell nutzt ein Alt attribute für alle seine Bilder, beschreiben Sie daher die Gesamtheit.

KI-generierte Bilder beginnen mit Ihrem Prompt als Alternativtext. Bearbeiten Sie ihn, sodass er das Ergebnis statt der Anfrage beschreibt. Siehe Alternativtext für Bilder.

Überschriften in Ordnung halten

  1. Geben Sie der Seite eine Überschrift 1. Die meisten Themes zeigen den Seitentitel als Überschrift 1, fügen Sie daher im Builder keine zweite hinzu. Auf DXPR CMS können Sie diesen Titel stattdessen auf einer Seite ausblenden: Öffnen Sie auf dem Bearbeitungsformular DXPR Theme Settings und aktivieren Sie Page Title unter DXPR Hide Regions.
  2. Nutzen Sie in der Symbolleiste des Textelements die Überschriftenliste, um Abschnittstitel als Heading 2 und Unterabschnitte als Heading 3 zu markieren. Überspringen Sie keine Ebenen.
  3. Nutzen Sie die Listenschaltflächen der Symbolleiste für Listen statt getippter Striche.

Drei Elemente legen ihre Überschriftenebene fest. Der Jumbotron-Title ist immer Überschrift 1, der Karten-Title ist immer Überschrift 5, und jeder Toggle title eines Ausklapp-Panels ist eine Überschrift 2.

Farbkontrast prüfen

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

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

Bei Text über einem Foto dunkeln Sie das Foto ab, sodass das Verhältnis auf dem ganzen Bild hält. Setzen Sie im Panel Background effects des Abschnitts den Background effect auf Gradient mit halbtransparentem dunklem Start color und End color. Hintergründe zeigen die Schritte.

Background-effects-Panel eines Abschnitts mit gewähltem Verlauf, dunklen halbtransparenten Farbfeldern unter „Start color“ und „End color“ und Richtung 180, neben einem abgedunkelten Schreibtischfoto unter weißer Überschrift

Die Button- und Link-Elemente zeigen den getippten 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 SEO-Panel für eine längere Beschreibung.

Was Sie sehen

  1. Setzen Sie View mode an der Container-Leiste auf Preview, sodass keine Editor-Steuerung im Weg ist.
  2. Drücken Sie Tab, um durch die Seite zu gehen. Jede Schaltfläche, jeder Link und jeder Tab ist erreichbar und zeigt einen sichtbaren Fokusring.
  3. Ein automatischer Prüfer, etwa die Barrierefreiheitsprüfung des Browsers oder die axe-Erweiterung, meldet keine Fehler für den Builder-Inhalt auf der veröffentlichten Seite.

Wenn Sie keinen sauberen Bericht sehen

  • Der Prüfer meldet ein Bild ohne Alternativtext. Das Alt attribute des Bildelements ist leer. Füllen Sie es aus, oder verschieben Sie ein dekoratives Bild in einen Abschnittshintergrund.
  • Der Prüfer meldet zwei Überschriften 1. Ein Jumbotron-Title ist immer Überschrift 1, neben dem Seitentitel Ihres Themes. Nutzen Sie stattdessen ein Textelement mit einer Überschrift 2.
  • Der Prüfer meldet eine übersprungene Überschriftenebene. Ein Karten-Title ist immer Überschrift 5. Lassen Sie ihn leer und beginnen Sie die Karte mit einer Textelement-Überschrift auf der richtigen Ebene.
  • Der Prüfer meldet schwachen Kontrast bei Text über einem Foto. Fügen Sie den oben beschriebenen Verlauf hinzu, oder wählen Sie einen dunkleren Texthintergrund.

Wie geht es weiter?