--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/tutorials/contact-page' title: 'Ihre Seiten barrierefrei machen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:45:59+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 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. tags: - 'Volg een tutorial' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Ihre Seiten barrierefrei machen' description: |- 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. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T08:45:59+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/tutorials/contact-page' articleSection: 'Volg een tutorial' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/tutorials/contact-page' description: |- 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. 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 --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Ihre Seiten barrierefrei machen. Learn DXPR BuilderBuild pagesVolg een tutorial ## In this guide Related guides - [Ein Video hinzufügen](/de/hc/documentation/learn-dxpr-builder/elements/video) - [Einen Produktschlüssel auf mehreren Websites verwenden](/de/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) - [Einen Drupal-Block zu Ihrer Seite hinzufügen](/de/hc/documentation/learn-dxpr-builder/integrations/drupal-blocks) 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](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts). 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. 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](/de/hc/documentation/learn-dxpr-builder/ai/image-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](/de/hc/documentation/learn-dxpr-builder/element-settings/background)zeigt die Schritte. ## Beschreibende Links und Buttons nutzen 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? - [Tastenkürzel](/hc/documentation/learn-dxpr-builder/reference/keyboard-shortcuts) für die komplette Editor-Kürzelliste. - [Firewall und Datenresidenz](/de/hc/documentation/learn-dxpr-builder/getting-started/behind-a-firewall) für die weiteren Compliance-Themen.