2.4.7 sichtbarer Fokus bei interaktiven Elementen

Jeder Browser hat eine andere Interpretation des Fokusring-Stils.

Mit dem «Custom Code» von Elementor Pro oder dem Plugin Code Snippet kann der Fokus-Stil verändert werden.

Fokus-Stil implementieren

Nachfolgend stylen wir den Fokus universell mit einer gestrichelten Umrandung. Dieser Befehl spricht jedes Element, das mit der Tabulatortaste oder mit der Maus fokussierbar ist, an.

Beachte den Farbkontrast der Umrandung, wähle die Farbe individuell zu deinem Design aus.

<style>

     *:focus { 
          outline: 0.125rem dashed black; 
          outline-offset: 0.250rem; 
     }

</style>

Wenn wir die Anforderungen der WCAG berücksichtigen, ist unser obiger Ansatz ausreichend. Wenn jedoch der Cursor verwendet wird, um mit Eingaben, Anzeigen und Schaltflächen zu interagieren (neben anderen nicht auflösbaren Elementen), bleibt der Umriss bestehen.

Eingabegerät erkennen

Mit :focus-visible kann der Browser automatisch erkennen, ob das Eingabegerät eine Maus oder eine Tastatur ist. Das Standardverhalten zeigt sichtbare Fokus-Stile nur an, wenn eine Tastatur verwendet wird.

<style>

/*Fokusanzeige entfernen, wenn eine Maus verwendet wird*/
            *:focus:not(:focus-visible) {
                    outline: none;
            }

/*Gestaltung der Umrandung*/
           *:focus-visible {
                  outline: 0.25rem dashed black;
                  outline-offset: 0.25rem;
            }

</style>

• Als Umrandung kann auch solid oder dotted definiert werden.
• Die Farbwahl kann mit currentcolor oder deinen globalen Farben definiert werden. In Elementor werden die globalen Farben var(--e-global-color-accent) definiert. «accent» ist je nach Fall unterschiedlich.

Meine Problematiken

Ich beschreibe hier meine Herausforderung, die ich lösen musste. Vielleicht hilft es dir weiter für deine Website.

• Button und Texte auf verschiedenfarbigem Hintergrund und mit verschiedenen Farben
• Dropdown-Menü, der Hintergrund weist beim Tastaturfokus einen schlechten Farbkontrast auf.

Meine Lösungen

Button und Texte

Ich habe mich entschieden, dass ich zwei verschiedene Fokusringe definiere. Einmal dunkel und einmal hell. Ich nannte die für mich .dunkler-fokus und .heller-fokus. Diese werden dann einzeln angesprochen im CSS-Code. Klassen werden mit einem Punkt + Klassenname (.klassenname) ausgewählt.

Dazu müssen die Buttons, bei denen der Kontrast nicht optimal ist, die Klasse vergeben werden. Dies machst du in Elementor unter –> Erweitert –> Layout –> CSS-Klassen.

<style>

/*Fokusanzeige entfernen, wenn eine Maus verwendet wird*/
            *:focus:not(:focus-visible) {
                    outline: none;
            }

/*Globale Gestaltung der Umrandung*/
           *:focus-visible {
                  outline: 0.25rem dashed currentColor !important;
                  outline-offset: 0.25rem;
	}

	.dunkler-fokus :focus-visible {
                  outline: 0.25rem dashed #6D1692 !important;
                  outline-offset: 0.25rem;
	}
	
	.heller-fokus :focus-visible {
                  outline: 0.25rem dashed #FCF0FF !important;
                  outline-offset: 0.25rem;
	}

</style>

Dropdown-Menü

Mit diesem CSS-Code habe ich die Hintergrundfarbe im Dropdown-Menü auf ein hellviolett angepasst.

<style>

/*Dropdown-Menü*/
	.elementor-nav-menu--dropdown .elementor-sub-item:focus-visible {
		background-color:#FCF0FF;
}

</style>