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

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 1 Minute Lesedauer

    • Wenn Sie Komponenten in Themengeneratorbearbeiten, wird möglicherweise ein Fehlersymbol ( Zugänglichkeitsfehler) angezeigt, das darauf hinweist, dass die Komponenten hinsichtlich des Farbkontrasts nicht der WCAG 2.1-Compliance entsprechen.

    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 die Kontraste zwischen helleren und dunkleren Bildschirmfarben und deren Beziehung zur Benutzeroberfläche. Für diejenigen, die mit dem Kontrastverhältnis nicht vertraut sind: Die erste Ziffer zeigt die Stärke der hellen Farben und die zweite die relative Stärke der dunklen Farben an. Der 4:5:1-Schwellenwert bietet optimale Transparenz für sehbehinderte Benutzer. Weitere Informationen finden Sie auf der W3C-Empfehlungswebsite für WCAG 2.1.

    Die Gesamtzahl der Barrierefreiheitsverletzungen pro Komponente wird auf der Seite des Bearbeitungsbereichs angezeigt.

    Prozedur

    1. Wählen Sie auf der Registerkarte Komponentenstile eine Komponente aus, die Sie verwenden und die das Warnsymbol für Barrierefreiheit anzeigt.
      Eingabehilfefehler
      Im konfigurierbaren Stilbereich werden die bearbeitbaren Hooks angezeigt, die für die ausgewählte Komponente verfügbar sind.
      Konfigurierbarer Stilbereich
    2. Sie können auf das Symbol klicken, um eine Beschreibung der Warnung anzuzeigen.
      Abbildung : 1. Warnung zur Barrierefreiheit
      Beschreibung der Barrierefreiheitswarnung
    3. Wie in der Warnmeldung angegeben, können Sie das Bleistiftsymbol auswählen, um das Kontrastproblem zu verbessern.
      Abbildung : 2. Komponenten-Editor
      Komponenten-Editor
    4. Wählen Sie im konfigurierbaren Stilbereich das Warnsymbol für Barrierefreiheit aus, um weitere Informationen zur Behebung des Problems zu erhalten.
      Warnung zur Barrierefreiheit
    5. Wählen Sie einen der Links in der Warnung aus, um entweder die Hintergrundfüllfarbe oder die Symbolfarbe zu korrigieren.
      Hinweis:
      Nachdem Sie Änderungen an einem der Farb-Hooks gespeichert haben, wird ein Symbol zum Rückgängigmachen angezeigt. Wählen Sie das Symbol „Rückgängig machen“ aus, um alle Ihre Änderungen auf die ursprüngliche Farbe zurückzusetzen.
      Farbänderungen rückgängig machen
    6. Wenn Sie Ihre Änderungen abgeschlossen haben und das Warnsymbol für Barrierefreiheit nicht mehr angezeigt wird, wählen Sie Änderungen speichernaus.
      Sobald Sie beispielsweise eine Farbe ausgewählt haben, die die Kontrastverhältnisverletzung überschreitet, wird das Warnzeichen in der Farbauswahl grün.