CMS: Verfahrensregeln für Barrierefreiheit
12 min
In diesem Artikel
- Verfahrensregeln für Alt-Text im CMS
- Für Bilder ohne dekorative Elemente
- Für dekorative Bilder
- Für Bilder, die als anklickbare Buttons dienen
- Für Galerien, die mit dem Feldtyp „Bild“ verknüpft sind
- Für Galerien, die mit dem Feldtyp „Mediengalerie“ verknüpft sind
- Barrierefreie Namen für Buttons
- (Nur Studio Editor) Elemente an separate Abschnitte anhängen, wenn du „Mehr laden“-Buttons verwendest
- (Nur statische Seiten) „Nächstes/Vorheriges Element“-Buttons an einen Container anhängen
- „Elementanzahl“-Text an einen Container anhängen
- Eingabeelemente barrierefrei gestalten
- Seitennummerierungsleisten barrierefrei gestalten
- Häufig gestellte Fragen (FAQ)
Implementiere in deinem CMS (Content Management System) Verfahrensregeln für Barrierefreiheit, damit deine Website für alle zugänglich ist, auch für die Besucher, die auf unterstützende Technologien angewiesen sind. Zu diesen Verfahrensregeln gehören das Hinzufügen von barrierefreien Bezeichnungen zu Buttons, das Verwenden von effektivem Alt-Text für alle Medien und das Platzieren von Elementen in Abschnitten oder Containern mit ARIA-Attributen. Verwende diese Richtlinien, damit alle leichter durch deine Inhalte navigieren und mit ihnen interagieren können.
Verfahrensregeln für Alt-Text im CMS
Alt-Text ist wesentlicher Kontext für Bilder, Videos und Vektorformen. Wenn du Alt-Text schreibst, beschreibe das Medium, um das es geht, klar und prägnant. Stelle dir vor, dass KI oder Screenreader den Text interpretieren müssen. Beschränke den Alt-Text auf höchstens 125 Zeichen und vermeide Wendungen wie „Bild von“. Eine detailliertere Anleitung zum Schreiben von gutem Alt-Text findest du unter Barrierefreiheit: Deine Bilder und Galerien vorbereiten.
Wir empfehlen, in deiner CMS-Sammlung ein Textfeld zu erstellen, das du anschließend als Alt-Text für jedes Medienelement verwenden kannst. Um deine Sammlung übersichtlich zu halten, platziere dieses Feld neben dem Medienfeld, das es beschreibt, und benenne es eindeutig, zum Beispiel „Alt-Text [Bild-/Galeriename]“.
Für Videoelemente heißt die Alt-Text-Eigenschaft im Datensatzverknüpfungs-Panel Videobeschreibung. Verwende für Vektorgrafiken oder Formen die Option Alt-Text ist verknüpft mit. Verwende für Hintergrundbilder in Abschnitten, Streifen, Spalten oder Repeater-Elementen (nur Wix Editor) die Option Alt-Text (Hintergrund) ist verknüpft mit.
Bei dekorativen Bildern und Medien, die keinen aussagekräftigen Inhalt vermitteln, kann der Alt-Text leer bleiben. Auf diese Weise können Screenreader sie überspringen und Ablenkungen werden reduziert.
Für Bilder ohne dekorative Elemente
Wenn du nicht-dekorative Bilder zu deinem CMS hinzufügst, ist es wichtig, diese mit beschreibendem Alt-Text zu versehen. Wir empfehlen, einen separaten „Text“-Feldtyp in deiner CMS-Sammlung hinzuzufügen, der den Alt-Text der Bilder darstellt. Achte in deinem Alt-Text auf eine aussagekräftige und beschreibende Sprache. Anstatt im Alt-Text z. B. „eine Frau“ zu schreiben, verwende „eine Frau, die Margeriten in einem Feld pflanzt“.
Wenn du das Bild in deinem Editor mit dem Datensatz verknüpfst, klicke auf das Feld Alt-Text verknüpfen mit und wähle das von dir erstellte Alt-Textfeld aus. Auf diese Weise können Screenreader das Bild und seinen Zweck beschreiben. Das macht deine Website inklusiver.
Für dekorative Bilder
Dekorative Bilder vermitteln in der Regel keinen aussagekräftigen Inhalt und erfordern keinen Alt-Text. Wenn ein Bild lediglich einen dekorativen Zweck hat, kannst du den Alt-Text vom Datensatz trennen. Das hilft Screenreadern, das Bild zu überspringen und vermeidet unnötige Ablenkungen.
Für Bilder, die als anklickbare Buttons dienen
Wenn ein Bildlink mit einer Datensatzaktion verknüpft ist, zum Beispiel mit dem Öffnen der dynamischen Elementseite, sollte der Alt-Text die zum Bild gehörige Aktion beschreiben und nicht unbedingt das Bild selbst. Wenn Besucher zum Beispiel durch Klicken auf ein Bild zu einer Profilseite gelangen, könnte der Alt-Text „Erfahre hier mehr über Hans Hansemann“ sein.
Über Ausdrücke kannst du statischen Text (z. B. „Mehr erfahren“) mit dynamischen Sammlungsfeldwerten (z. B. „Hans Hansemann“) kombinieren. In der Folge variiert der Alt-Text von Bild zu Bild. Dies erleichtert es Besuchern, den Zweck des Bildes zu verstehen, wenn sie unterstützende Technologien verwenden.
Um Ausdrücke zum Erstellen von benutzerdefiniertem Alt-Text zu verwenden:
- Verknüpfe das entsprechende Bild mit dem Datensatz, der mit deiner Sammlung verknüpft ist.
- Klicke im Panel Bild verknüpfen auf das Dropdown-Menü Alt-Text verknüpfen mit und wähle Ausdruck.
- Klicke auf das Feld Ausdruck und gib eine Funktion ein, die den benötigten Alt-Text erstellt. Du könntest zum Beispiel die folgende Funktion eingeben, um „Mehr erfahren“ mit einem „Titel“-Feld zu kombinieren, das die folgenden Namen enthält:
1CONCAT("Mehr erfahren",title)Erfahre hier mehr über die Verwendung von Ausdrücken, um Werte aus mehreren Feldern zu kombinieren.
Für Galerien, die mit dem Feldtyp „Bild“ verknüpft sind
Für Galerien, die mit dem Feldtyp „Bild“ verknüpft sind, ist es wichtig, Alt-Text für jedes Bild bereitzustellen. Erstelle in deiner CMS-Sammlung einen separaten „Text“-Feldtyp, der speziell für den Alt-Text von Bildern vorgesehen ist. Wenn du die Galerie mit deinem Datensatz verknüpfst, verbinde das Dropdown-Menü Alt-Texte verknüpfen mit mit dem entsprechenden Alt-Text-Feld. Dann können Screenreader Beschreibungen der Bilder in der Galerie liefern. Das verbessert die Barrierefreiheit.
Erfahre mehr über das Verknüpfen von Galerien mit deinen CMS-Sammlungselementen.
Für Galerien, die mit dem Feldtyp „Mediengalerie“ verknüpft sind
Wenn du eine Galerie mit dem Feld „Mediengalerie“ verknüpfst, kannst du zahlreiche Bilder oder Videos zu einem Element auf einer dynamischen Elementseite anzeigen. Füge den Alt-Text für jede Mediendatei in deiner Sammlung direkt dem Feld „Mediengalerie“ hinzu. Klicke dafür neben dem entsprechenden Element in deiner Sammlung auf das Feld „Mediengalerie“, um Alt-Text zu jeder einzelnen Mediendatei hinzuzufügen. Dort kannst du auch Titel und Beschreibung jeder Datei eingeben. So können Screenreader den Kontext für Bilder und Videos vermitteln und alle Medieninhalte in deiner Galerie sind barrierefrei.
Erfahre hier mehr über das Verknüpfen von Galerien mit „Mediengalerie“-Feldern.
Barrierefreie Namen für Buttons
Du kannst den Buttons, die mit deinem CMS verknüpft sind, barrierefreie Namen hinzufügen. Barrierefreie Namen funktionieren wie Alt-Text, sind aber nur auf Buttons anwendbar. Sie helfen Screenreadern dabei, zu beschreiben, was der Button bewirkt oder wohin er führt. Wenn du barrierefreie Namen zu Buttons hinzufügst, verbesserst du die Barrierefreiheit deiner Website. Damit unterstützt du alle deine Besucher beim bequemen Navigieren durch deine Inhalte.
Wenn du einen Button mit deinem Datensatz verknüpfst, verwende das Dropdown-Menü Barrierefreien Namen verknüpfen mit, um den barrierefreien Namen mit einem Textfeld in deiner Sammlung zu verknüpfen. Dieses Feld beschreibt die Aktion oder das Ziel des Buttons klar und prägnant.
Anstelle eines allgemeinen Namens wie „Hier klicken“ verwende „Mehr über unsere Services erfahren“ oder „Betrag einreichen“.
Bei Bedarf kannst du Ausdrücke verwenden, um statischen Text mit Werten aus den Feldern deiner Sammlung zu kombinieren. Auf diese Weise liefern Screenreader basierend auf dem Inhalt aussagekräftige Beschreibungen für jeden Button. So kannst du etwa einen barrierefreien Namen erstellen, wie zum Beispiel:
1CONCAT("Mehr erfahren",title)(Nur Studio Editor) Elemente an separate Abschnitte anhängen, wenn du „Mehr laden“-Buttons verwendest
Wenn du im Studio Editor einen „Mehr laden“-Button hinzufügst, bewahre alles, was sich unterhalb des Repeaters oder der Galerie befindet, in einem separaten Abschnitt auf. Wenn du Elemente im selben Abschnitt wie den Repeater oder die Galerie und direkt unterhalb des Repeaters oder der Galerie platzierst, überschneiden sich die Elemente, wenn der „Mehr laden“-Button angeklickt wird. Diese Überschneidung kann bei Besuchern zu Verwirrung führen, da sie Sichtbarkeit und Barrierefreiheit beeinträchtigt.
Um dieses Problem zu vermeiden, hänge alle Elemente, die du unterhalb des Repeaters oder der Galerie platzieren möchtest, auch den „Mehr laden“-Button, an einen separaten Abschnitt an. Auf diese Weise werden die Galerie oder der Repeater, wenn Benutzer auf den „Mehr laden“-Button klicken, entsprechend erweitert, ohne dass es zu Überschneidungen kommt. Das sorgt für ein klares und benutzerfreundliches Erlebnis.
Erfahre hier mehr über das Hinzufügen eines „Mehr laden“-Buttons:
(Nur statische Seiten) „Nächstes/Vorheriges Element“-Buttons an einen Container anhängen
Wenn Besucher auf statischen Seiten auf „Nächstes/Vorheriges Element“-Buttons klicken können und dies dazu führt, dass mit dem CMS verknüpfte Elemente ihren Inhalt ändern, hänge die angezeigten Elemente an einen einzigen Container an. Lege anschließend die ARIA-Attribute (Accessible Rich Internet Applications, deutsch: barrierefreie Rich Internet-Apps) des Containers fest, sodass Screenreader den geänderten Inhalt ankündigen können, wenn Besucher auf die Buttons klicken.
Du musst nur die Elemente anhängen, die den sich ändernden Inhalt anzeigen. Die „Nächstes/Vorheriges Element“-Buttons müssen nicht an einen Container angehängt sein.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Füge einen Container hinzu.
- Klicke auf der linken Seite im Editor auf CMS
. - Klicke auf Deine Sammlungen.
- Klicke und ziehe die Elemente, die CMS-Inhalte anzeigen, auf den Container, um sie anzuhängen.
- Aktiviere Programmieren, falls du dies noch nicht getan hast:
- Klicke oben auf Dev-Modus.
- Klicke auf Dev-Modus aktivieren.
- Aktiviere die Dev-Tools für Barrierefreiheit:
- Klicke oben im Editor auf Einstellungen.
- Wähle Wizard für Barrierefreiheit.
- Klicke im Panel auf der rechten Seite auf Dev-Tools für Barrierefreiheit.
- Aktiviere den Schieberegler neben Erweiterte Einstellungen für Barrierefreiheit anzeigen.
- Klicke mit der rechten Maustaste auf den Container mit den angehängten Elementen, die Inhalte der CMS-Sammlung anzeigen.
- Wähle Barrierefreiheit.
- Klicke auf Attribut hinzufügen.
- Klicke auf das Dropdown-Menü Attribut und wähle aria-live aus.
- Klicke auf das Dropdown-Menü Attributwert und wähle polite aus.
- Klicke auf Hinzufügen.
- Veröffentliche deine Website, sobald du bereit bist, die Änderungen zu veröffentlichen.
„Elementanzahl“-Text an einen Container anhängen
Wenn du die Elementanzahl im Datensatz in einem Textelement anzeigst und Besucher auf ein Eingabeelement klicken können, um die Elementanzahl zu ändern, häng den Text an einen Container an. Lege anschließend die ARIA-Attribute (Accessible Rich Internet Applications, deutsch: barrierefreie Rich Internet-Apps) des Containers fest, sodass Screenreader die Elementanzahl ankündigen können, wenn sie sich ändert.
Dies ist zum Beispiel dann möglicherweise relevant, wenn Besucher auf Eingabeelemente klicken, die Inhalte filtern, oder auch auf Eingabeelemente, die Inhalte erfassen. Wenn Besucher die Möglichkeit haben, die angezeigte Elementanzahl zu ändern, hänge den Text, der die Elementanzahl anzeigt, an einen Container an, damit Screenreader die Änderung ankündigen können.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Füge einen Container hinzu.
- Klicke und ziehe das Textelement, das die Elementanzahl im Datensatz anzeigt, auf den Container, um es anzuhängen. Wenn du ein anderes Textelement hast, das erklärt, was die Elementanzahl darstellt, hänge es ebenfalls an den Container an (z. B. „Ergebnisse“).
- Aktiviere Programmieren, falls du dies noch nicht getan hast:
- Klicke oben auf Dev-Modus.
- Klicke auf Dev-Modus aktivieren.
- Aktiviere die Dev-Tools für Barrierefreiheit:
- Klicke oben im Editor auf Einstellungen.
- Wähle Wizard für Barrierefreiheit.
- Klicke im Panel auf der rechten Seite auf Dev-Tools für Barrierefreiheit.
- Aktiviere den Schieberegler neben Erweiterte Einstellungen für Barrierefreiheit anzeigen.
- Klicke mit der rechten Maustaste auf den Container mit den angehängten Textelementen.
- Wähle Barrierefreiheit.
- Füge das erste Attribut hinzu:
- Klicke auf Attribut hinzufügen.
- Klicke auf das Dropdown-Menü Attribut und wähle aria-atomic aus.
- Klicke auf das Dropdown-Menü Attributwert und wähle true aus.
- Klicke auf Hinzufügen.
- Füge das zweite Attribut hinzu:
- Klicke auf Attribut hinzufügen.
- Klicke auf das Dropdown-Menü Attribut und wähle aria-live aus.
- Klicke auf das Dropdown-Menü Attributwert und wähle polite aus.
- Klicke auf Hinzufügen.
- Veröffentliche deine Website, sobald du bereit bist, die Änderungen zu veröffentlichen.
Eingabeelemente barrierefrei gestalten
Wenn du Eingabeelemente hast, die so eingestellt sind, dass sie Inhalte filtern, werden die Filter standardmäßig angewendet, sobald ein Besucher eine Auswahl trifft. Du kannst dieses Verhalten ändern, indem du einen „Filter anwenden“-Button hinzufügst.
Aus Gründen der Barrierefreiheit ist es besser, einen „Filter anwenden“-Button hinzuzufügen. Bei diesem Button wird der Inhalt erst gefiltert, wenn Besucher darauf klicken. Das bietet eine bessere Erfahrung, insbesondere wenn Nutzer mehrere Filter einzeln festlegen möchten, bevor sie alle auf einmal anwenden.
Beim Anzeigen der Elementanzahl des Datensatzes:
Wenn Besucher auf Eingaben klicken können, die die Elementanzahl ändern, musst du den Text, der die Elementanzahl anzeigt, an einen Container anhängen. Weitere Informationen findest du im Abschnitt oberhalb.
Seitennummerierungsleisten barrierefrei gestalten
Um Seitennummerierungsleisten barrierefreier zu machen, füge sowohl der Leiste selbst als auch den Buttons barrierefreie Namen hinzu. Diese Namen sind auf dem Bildschirm nicht sichtbar, aber für Screenreader essenziell, damit Nutzer verstehen, wie sie durch Seiten navigieren sollen. Du kannst die Seitennummerierungsleiste zum Beispiel „Seitennavigation“ benennen und Buttons wie „Nächste Seite“, „Vorherige Seite“ eindeutige Namen zuweisen oder sie basierend auf deinem Inhalt anpassen (z. B. „Nächste Story“ oder „Vorheriges Produkt“).
Tipp:
Wenn du im Studio Editor einen „Mehr laden“-Button hast, platziere deine Seitennummerierungsleiste und alles andere, was unter dem Repeater oder der Galerie angezeigt wird, in einem separaten Abschnitt.
Häufig gestellte Fragen (FAQ)
Unten findest du Antworten auf häufig gestellte Fragen zur Barrierefreiheit.
Wie soll ich mein Alt-Textfeld im CMS nennen?
Was ist, wenn das Bild meines Repeaters eine Kombination aus dekorativen und nicht-dekorativen Bildern verwendet?
Kann ich einen Tooltipp zu einem Bild hinzufügen, der angezeigt wird, wenn Besucher mit der Maus über das Bild fahren?
Sind die Erfolgs- und Fehlermeldungen meines CMS-Formulars barrierefrei?