--- url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/erweitert/barrierefreiheit' title: 'Machen Sie Ihre Seiten barrierefrei | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T04:03:44+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Make pages accessible and findable' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Machen Sie Ihre Seiten barrierefrei' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T04:03:44+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/erweitert/barrierefreiheit' articleSection: 'Barrierefrei und auffindbar' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/erweitert/barrierefreiheit' description: |- 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. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Startseite item: 'https://dxpr.com/de' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: de --- [Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Website verwalten](/de/hc/documentation/learn-dxpr-builder/manage) /[Barrierefrei und auffindbar](/de/hc/documentation/learn-dxpr-builder/manage/accessible-findable) # Machen Sie Ihre Seiten barrierefrei. DXPR Builder lernenWebsite verwaltenBarrierefrei und auffindbar ## In diesem Leitfaden Verwandte Leitfäden - [Tastenkombinationen](/de/hc/dokumentation/dxpr-builder-lernen/referenz/tastenkombinationen) - [Firewall und Datenresidenz](/de/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) 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](/de/hc/dokumentation/dxpr-builder-lernen/referenz/tastenkombinationen). 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. 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](/de/hc/dokumentation/dxpr-builder-lernen/ki/bild-alternativtext). ## Ü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](/de/hc/dokumentation/dxpr-builder-lernen/element-einstellungen/hintergrund)zeigen die Schritte. ## Aussagekräftige Links und Schaltflächen nutzen 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? - [Tastaturkürzel](/de/hc/dokumentation/dxpr-builder-lernen/referenz/tastenkombinationen) für die vollständige Editor-Kürzelliste. - [Firewall und Datenresidenz](/de/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) für die übrigen Compliance-Themen.