Passen Sie eine Komponente an, um Barrierefreiheitsstandards zu erfüllen

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 2 Minuten Lesedauer
  • Passen Sie eine Komponente an, um die Richtlinien für Barrierefreiheit für Web Content (WCAG) 2,1 zu erfüllen. Wenn Sie eine Komponente in bearbeiten Themengenerator Und sehen Sie ein Warnsymbol, das darauf hinweist, 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 bearbeiten Themengenerator, Möglicherweise wird ein Warnsymbol ( Fehler bei Eingabehilfe), was angibt, dass die Komponente nicht den Richtlinien für Barrierefreiheit für Webinhalte (WCAG) 2,1 für Farbkontrast entspricht. Das WCAG 2,1-Kontrastverhältnis, das Themengenerator Ziele für Inhalt und UI-Variablen sind 3:1. Dieses Verhältnis bestimmt die Kontraste zwischen helleren und dunkleren Bildschirmfarben und ihre Beziehung zur Anwenderoberfläche. Die erste Ziffer zeigt den Grad der hellen Farben, und die zweite Ziffer zeigt den relativen Grad der dunklen Farben. Der 3:1-Schwellenwert bietet Benutzern mit visueller Behinderung optimale Transparenz. Weitere Informationen finden Sie unter W3C-Empfehlungswebsite für WCAG 2,1 .

    Die Gesamtzahl der Verstöße gegen Barrierefreiheit ist auf dem roten nummerierten Abzeichen ( Nummeriertes Abzeichen des Inspektors für Barrierefreiheit.) Neben dem Inspektorbereich für Barrierefreiheit.

    Prozedur

    1. Greifen Sie auf der Seite „Editor“ auf eine der beiden in der folgenden Tabelle aufgeführten Möglichkeiten auf die Verstöße gegen Barrierefreiheit zu.
      OptionBeschreibung
      Vom Inspektor für Barrierefreiheit
      1. Wählen Sie das Symbol „Inspektor für Barrierefreiheit“ aus Dient zum Anzeigen einer Liste von Komponenten mit Eingabehilfen. Ein rotes Abzeichen zeigt die Anzahl der Barrierefreiheitsprobleme in Ihrem Design an.
      2. Wählen Sie die Barrierefreiheitswarnung aus Barrierefreiheitswarnung.Symbol zum Anzeigen einer Beschreibung der Warnung für den Komponentenstatus, den Sie verbessern möchten.
      3. 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 Haken angezeigt, die für die ausgewählte Komponente verfügbar sind.
      Aus dem Menü Komponentenstile
      1. Wählen Sie aus Wird Bearbeitet Registerkarte.
        Registerkarte „Komponentenstile bearbeiten“.
      2. Wählen Sie eine Komponente aus, die das Warnsymbol für Barrierefreiheit anzeigt.
        Barrierefreiheitswarnung
      3. Wählen Sie im konfigurierbaren Stilbereich das Warnsymbol für Barrierefreiheit aus, um eine Beschreibung der Warnung anzuzeigen.
        Beschreibung der Barrierefreiheitswarnung.
      4. Wie in der Warnmeldung angegeben, können Sie das Bleistiftsymbol auswählen Um das Kontrastproblem zu verbessern.
        Hinweis:
        Die Seite Komponenteneditor wird angezeigt, und im konfigurierbaren Stilbereich werden die bearbeitbaren Haken angezeigt, die für die ausgewählte Komponente verfügbar sind.
    2. Wählen Sie im konfigurierbaren Stilbereich das Warnsymbol für Barrierefreiheit aus, um weitere Informationen zur Behebung des Problems zu erhalten.
      Barrierefreiheitswarnung
    3. Wählen Sie den Link in der Warnung aus, um das Kontrastproblem zu beheben.
      Hinweis:
      Nachdem Sie Änderungen an einem der Farbhaken gespeichert haben, wird ein Rückgängig-Symbol 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
    4. Wenn Sie Ihre Änderungen abgeschlossen haben und das Warnsymbol für Barrierefreiheit nicht mehr sichtbar ist, wählen Sie aus Speichern Sie die Änderungen .
      Wenn Sie beispielsweise eine Farbe ausgewählt haben, die den Verstoß gegen das Kontrastverhältnis erfüllt, wird das Warnsymbol in der Farbauswahl grün.