Zum Hauptinhalt springen

Was kann ich im Feld „CSS-Selektor“ für den Trigger eintragen?

Vor über 3 Wochen aktualisiert

Mit dem CSS-Selektor legen Sie fest, über welches Element auf Ihrer Webseite die AccessGO-Barrierefreiheitswerkzeuge geöffnet werden.

Statt des schwebenden Triggers können Sie so z. B. einen Button, einen Link oder einen Menüpunkt verwenden. Sobald ein Besucher auf dieses Element klickt, öffnet sich das AccessGO-Plugin mit seinen Werkzeugen.

Wichtig: wählen Sie ein Element (Button oder Link), das ohne Scrollen direkt erreichbar ist, damit Besucher jederzeit Zugang zu den Barrierefreiheits-Werkzeugen haben.

Geben Sie in das entsprechende Feld einen gültigen CSS-Selektor ein, etwa eine ID, eine Klasse oder einen HTML-Element-Selektor.

Typische CSS-Selektoren sind z.B.:

  • #accessgo-menu

  • .accessgo-button

  • a.accessibility-link

Der CSS-Selektor verweist auf ein konkretes Element im HTML-Code Ihrer Webseite.

Beispiel: Der folgende CSS-Selektor: #accessgo-menu verweist auf dieses Button-Element im HTML-Code Ihrer Webseite:

<button id="accessgo-menu">Barrierefreiheitsmenü</button>

Achten Sie darauf, dass der CSS-Selektor sich auf exakt ein Element im HTML-Code Ihrer Webseite bezieht und nicht mehrere Elemente anspricht (z.B. auch weitere Buttons als denjenigen, der für das Barrierefreiheits-Menü vorgesehen ist).

Best practice:

Vermeiden Sie nach Möglichkeit sogenannte Pfad-Selektoren, die sich stark an der konkreten HTML-Struktur orientieren, z. B. #menu > li:nth-child(3) > a

Solche Selektoren können sich ändern, sobald Sie Ihre Webseite anpassen oder umbauen, und dadurch den Zugriff auf das Barrierefreiheits-Menü unterbrechen. Wir empfehlen stattdessen, eine eigene, dedizierte ID für den Trigger zu verwenden (z. B. #accessgo-menu).

Falls Sie selbst keinen Zugriff auf den Code haben, können Sie diese Angaben einfach an Ihre Agentur oder Ihr Entwicklerteam weitergeben.

CSS-Selektoren können Sie nur mit einem PRO-Abo nutzen.

Hat dies Ihre Frage beantwortet?