CMS: Bewährte Verfahren 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 Empfehlungen für Barrierefreiheit in deinem CMS (Content Management System), um deine Website für alle Besucher zugänglich zu machen, auch für Besucher, die auf unterstützende Technologien angewiesen sind. Zu diesen Verfahrensregeln gehören das Hinzufügen von barrierefreien Namen zu Buttons, die Verwendung 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 wichtig, um Bildern, Videos und Vektorformen Kontext zu geben. Wenn du Alt-Text schreibst, beschreibe die Medien klar und prägnant, so als ob KI oder Screenreader sie interpretieren. Beschränke den Alt-Text auf weniger als 125 Zeichen und vermeide Sätze wie „Bild von“. Eine detailliertere Anleitung zum Schreiben von effektivem Alt-Text findest du unter Barrierefreiheit: Deine Bilder und Galerien vorbereiten.
Wir empfehlen, in deiner CMS-Sammlung ein Textfeld zu erstellen, um es als Alt-Text für jedes Medienelement zu verwenden. Um deine Sammlung zu organisieren, platziere dieses Feld neben dem Medienfeld, das es darstellt, und benenne ihn 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 Hintergrund. Alt-Text 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 einen lediglich 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 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 mehr über Willis MacSmoot“ sein.
Mit Ausdrücken kannst du statischen Text (z. B. „Mehr erfahren“) mit dynamischen Sammlungsfeldwerten (z. B. „Willis MacSmoot“) kombinieren, um sicherzustellen, dass der Alt-Text je nach Bild variiert. Auf diese Weise können Besucher den Zweck des Bildes 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 einen separaten „Text“-Feldtyp in deiner CMS-Sammlung speziell für den Alt-Text der Bilder. Wenn du die Galerie mit deinem Datensatz verknüpfst, verbinde das Dropdown-Menü Alt-Texte verknüpfen mit mit dem entsprechenden Alt-Text-Feld. So sorgst du dafür, dass Screenreader Beschreibungen der Bilder in der Galerie liefern können. 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 dabei den Alt-Text für jede Mediendatei direkt im Feld „Mediengalerie“ in deiner Sammlung hinzu. Klicke neben dem entsprechenden Element in deiner Sammlung auf das Feld „Mediengalerie“, um Alt-Text zu jeder Mediendatei hinzuzufügen. Dort kannst du auch den Titel und die Beschreibung jeder Datei eingeben. Auf diese Weise können Screenreader den Kontext für Bilder und Videos vermitteln, um sicherzustellen, dass alle Medieninhalte in deiner Galerie barrierefrei sind.
Erfahre mehr über das Verknüpfen von Galerien mit „Mediengalerie“-Feldern.
Barrierefreie Namen für Buttons
Du kannst 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 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 dabei, bequem durch deine Inhalte zu navigieren.
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 sollte die Aktion oder das Ziel des Buttons klar und prägnant beschreiben.
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. Du kannst zum Beispiel 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 unter dem Repeater oder der Galerie befindet, in einem separaten Abschnitt auf. Wenn du Elemente im selben Abschnitt wie den Repeater oder die Galerie und direkt unter dem Repeater 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ächtigen.
Um dieses Problem zu vermeiden, stelle immer sicher, dass alle Elemente, die du unter dem Repeater oder der Galerie platzieren möchtest, einschließlich des „Mehr laden“-Buttons, an einen separaten Abschnitt angehängt sind. 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, was für ein klareres und benutzerfreundlicheres Erlebnis sorgt.
Erfahre mehr darüber, wie du einen „Mehr laden“-Button hinzufügst:
(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 diese Elemente dazu führen, dass mit dem CMS verknüpfte Elemente ihren Inhalt ändern, hänge die angezeigten Elemente an einen einzelnen 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, wenn 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 auf Eingaben, die Inhalte sammeln. 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, wenn 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?