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

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 1 Minute Lesedauer

    • Wenn Sie Komponenten in Themengeneratorbearbeiten, wird möglicherweise ein Fehlersymbol ( Eingabehilfefehler) 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.
      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 das Symbol auswählen, 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 wählen, um das Kontrastproblem zu verbessern.
      Abbildung : 2. Komponenteneditor
      Komponenteneditor
    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 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.
      Farbänderungen rückgängig machen
    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.