Tutorials

Anleitung: Den Rahmen um markierte Bereiche in Google Chrome entfernen

Melden

Hier ist ein ausführliches Tutorial, wie du den störenden Rahmen (Focus Ring) um angeklickte oder markierte Elemente in Google Chrome entfernst.

Wenn du in Google Chrome auf Schaltflächen, Links oder Textfelder klickst, erscheint oft ein blauer oder schwarzer Rahmen. Dies ist ein Barrierefreiheits-Feature namens „Focus Ring“, das Tastaturnutzern hilft zu sehen, welches Element gerade ausgewählt ist. Wenn dich dieser Rahmen aus Designgründen stört, gibt es verschiedene Wege, ihn zu entfernen oder anzupassen.

Methode 1: Für Webentwickler (CSS)

Wenn du eine eigene Website erstellst und den Rahmen für deine Besucher entfernen möchtest, ist CSS die beste Lösung.

A. Der schnelle (aber nicht empfohlene) Weg

Dieser Befehl entfernt den Rahmen komplett, was jedoch die Bedienung mit der Tastatur verschlechtert.

/* Entfernt den Rahmen für alle Elemente */
*:focus {
    outline: none !important;
}

B. Der professionelle Weg (Best Practice)

Mit :focus-visible entfernst du den Rahmen nur für Mausklicks, behältst ihn aber für Tastaturnutzer (Tab-Taste) bei. Das ist die beste Lösung für die User Experience.

/* Rahmen weg bei Mausklick, da bei Tastaturnutzung */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Optional: Eigenen Stil für Tastaturnutzer festlegen */
*:focus-visible {
    outline: 2px solid #ff0000; /* Ein roter Rahmen nur für Tab-Nutzer */
}

Methode 2: Für Chrome-Nutzer (Browser-Einstellungen)

Wenn du den Rahmen als Surfer auf allen Webseiten deaktivieren möchtest, kannst du dies in den Einstellungen versuchen (beachte, dass Chrome dies oft automatisch erzwingt).

  1. Öffne Chrome und klicke auf die drei Punkte oben rechts.
  2. Wähle Einstellungen.
  3. Klicke links auf Barrierefreiheit.
  4. Suche nach der Option „Fokussiertes Objekt kurzzeitig hervorheben“.
  5. Stelle sicher, dass dieser Schalter deaktiviert ist.

Methode 3: Über Chrome Flags (Experimentelle Funktionen)

Manchmal lässt sich das Verhalten über die internen Flag-Einstellungen steuern.

  1. Gib chrome://flags in deine Adressleiste ein und drücke Enter.
  2. Suche im Suchfeld nach "Focus".
  3. Suche nach Einträgen wie "Focus ring improvement" oder "Quick Focus Highlight".
  4. Stelle diese auf Disabled.
  5. Klicke unten auf Relaunch, um Chrome neu zu starten.

(Hinweis: Google entfernt oder ändert diese Flags regelmäßig, daher sind sie nicht immer verfügbar.)

Methode 4: Browser-Erweiterungen (Für alle Webseiten)

Wenn du kein Entwickler bist und die Standard-Einstellungen nicht helfen, kannst du eine Erweiterung nutzen, die das CSS aller Webseiten für dich überschreibt.

  1. Gehe in den Chrome Web Store.
  2. Suche nach einer Erweiterung wie "User CSS" oder "Stylus".
  3. Installiere die Erweiterung.
  4. Erstelle eine neue Regel für alle Webseiten (*) und füge den Code aus Methode 1A ein:
    *:focus { outline: none !important; }

Wichtiger Hinweis zur Barrierefreiheit

Der Fokus-Rahmen ist kein Fehler, sondern ein Hilfsmittel für Menschen mit motorischen Einschränkungen oder Sehbehinderungen, die keine Maus benutzen können. Wenn du den Rahmen entfernst, stelle sicher, dass du eine optische Alternative (z. B. eine dezente Farbänderung) anbietest, damit die Seite bedienbar bleibt.

0