Passen Sie Komponenten an, um die Standards für Barrierefreiheit zu erfüllen

Wenn Sie Komponenten in Themengeneratorbearbeiten, wird möglicherweise ein Fehlersymbol ( ) angezeigt, das anzeigt, dass Komponenten nicht die WCAG 2.1-Konformität für Farbkontrast einhalten.

Vorbereitungen

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird

Das WCAG 2.1-Kontrastverhältnis, das Themengenerator für Inhalts- und UI-Variablen anstrebt, beträgt 4:5:1. Dieses Verhältnis bestimmt den Kontrast zwischen helleren und dunklen Bildschirmfarben und ihre Beziehung zur Anwenderoberfläche. Für diejenigen, die mit dem Kontrastverhältnis nicht vertraut sind: Die erste Ziffer zeigt den Anteil der hellen Farben an und die zweite den relativen Anteil der dunklen Farben. Der 4:5:1-Schwellenwert bietet optimale Transparenz für sehbehinderte Benutzer. Weitere Informationen finden Sie auf der W3C-Empfehlungs-Website für WCAG 2.1.

Die Gesamtzahl der Zugriffsverstöße pro Komponente wird auf der Seite des Bearbeitungsbereichs angezeigt.

Prozedur

1. Wählen Sie auf der Registerkarte Komponentenstile eine von Ihnen verwendete Komponente aus, die das Warnsymbol für Barrierefreiheit anzeigt.

   

   Im konfigurierbaren Stilbereich werden die bearbeitbaren Hooks angezeigt, die für die ausgewählte Komponente verfügbar sind.

   

2. Sie können das Symbol auswählen, um eine Beschreibung der Warnung anzuzeigen.

   Abbildung : 1. Warnung zur Barrierefreiheit

   

3. Wie in der Warnmeldung angegeben, können Sie das Bleistiftsymbol wählen, um das Kontrastproblem zu verbessern.

   Abbildung : 2. Komponenteneditor

   

4. Wählen Sie im konfigurierbaren Stilbereich das Warnsymbol für Barrierefreiheit aus, um weitere Informationen zur Behebung des Problems zu erhalten.

   

5. Wählen Sie einen der Links in der Warnung aus, um entweder die Hintergrundfüllfarbe oder die Symbolfarbe zu korrigieren.
   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.

   

6. Wenn Sie Ihre Änderungen abgeschlossen haben und das Warnsymbol für Barrierefreiheit nicht mehr sichtbar ist, wählen Sie Änderungen speichernaus.
   Wenn Sie beispielsweise eine Farbe auswählen, für die die Verletzung des Kontrastverhältnisses gilt, wird das Warnzeichen in der Farbauswahl grün.