Passen Sie eine Komponente an, um die Standards für Barrierefreiheit zu erfüllen
Passen Sie eine Komponente an die Web Content Access Guidelines (WCAG) 2.1 an. Wenn Sie eine Komponente in Themengenerator bearbeiten und ein Warnsymbol sehen, weist dies darauf hin, dass die Komponente nicht den Richtlinien für Farbkontrast entspricht.
Vorbereitungen
Erforderliche Rolle: Administrator
Warum und wann dieser Vorgang ausgeführt wird
Wenn Sie eine Komponente in Themengeneratorbearbeiten, wird möglicherweise ein Warnsymbol ( 
) angezeigt, das darauf hinweist, dass die Komponente nicht den Farbkontrast-Richtlinien für barrierefreie Webinhalte (WCAG) 2.1 entspricht. Das WCAG 2.1-Kontrastverhältnis, das Themengenerator für Inhalts- und UI-Variablen anstrebt, beträgt 3:1. Dieses Verhältnis bestimmt den Kontrast zwischen helleren und dunklen Bildschirmfarben und ihre Beziehung zur Anwenderoberfläche. Die erste Ziffer zeigt die Stärke der hellen Farben an, und die zweite Ziffer zeigt die relative Stärke der dunklen Farben an. Der Schwellenwert von 3:1 bietet optimale Transparenz für sehbehinderte Benutzer. Weitere Informationen finden Sie auf der W3C-Empfehlungs-Website für WCAG 2.1.
Die Gesamtzahl der Verstöße gegen Barrierefreiheit werden auf dem roten nummerierten Abzeichen ( 
) neben dem Bereich für Barrierefreiheitsinspektor angezeigt.
Prozedur
-
Greifen Sie auf der Seite „Editor“ auf eine der beiden in der folgenden Tabelle aufgeführten Arten auf die Verstöße gegen die Barrierefreiheit zu.
Option Beschreibung Über den Barrierefreiheits-Inspektor - Wählen Sie das Symbol Barrierefreiheitsinspektor (
), um eine Liste der Komponenten mit Barrierefreiheitsfehlern anzuzeigen. Ein rotes Abzeichen zeigt die Anzahl der Probleme mit der Barrierefreiheit in Ihrem Design an. - Wählen Sie die Barrierefreiheitswarnung , um eine Beschreibung der Warnung für den Komponentenstatus anzuzeigen, den Sie verbessern möchten.
- Wählen Sie das Bleistiftsymbol (
) neben dem Komponentenstatus, den Sie verbessern möchten.Hinweis:Die Seite „Komponenteneditor“ wird angezeigt, und im konfigurierbaren Stilbereich werden die bearbeitbaren Hooks angezeigt, die für die ausgewählte Komponente verfügbar sind.
Über das Menü Komponentenstile - Wählen Sie die Registerkarte Bearbeiten.
- Wählen Sie eine Komponente aus, auf der das Warnsymbol für Barrierefreiheit angezeigt wird.
- Wählen Sie im konfigurierbaren Stilbereich das Warnsymbol für Barrierefreiheit, um eine Beschreibung der Warnung anzuzeigen.
- Wie in der Warnmeldung angegeben, können Sie das Bleistiftsymbol ( ) wählen, um das Kontrastproblem zu verbessern. Hinweis:Die Seite „Komponenteneditor“ wird angezeigt, und im konfigurierbaren Stilbereich werden die bearbeitbaren Hooks angezeigt, die für die ausgewählte Komponente verfügbar sind.
- Wählen Sie das Symbol Barrierefreiheitsinspektor (
-
Wählen Sie im konfigurierbaren Stilbereich das Warnsymbol für Barrierefreiheit aus, um weitere Informationen zur Behebung des Problems zu erhalten.
-
Wählen Sie den Link in der Warnung aus, um das Kontrastproblem zu beheben.
Hinweis:Nachdem Sie die Änderungen an einem der Farb-Hooks gespeichert haben, wird ein Rückgängig-Symbol angezeigt. Wählen Sie das Rückgängig-Symbol, um alle Ihre Änderungen auf die ursprüngliche Farbe zurückzusetzen.
