Fokus Outlines oder auch Fokus-Rahmen heben ein aktives Element auf einer Website hervor. Diese Kennzeichnung ist besonders wichtig für Tastatur-Nutzer und Menschen mit körperlichen Einschränkungen. Man möchte wissen, wo auf einer Website man sich befindet, und das kann erreicht werden, indem man ein sich ein gutes Konzept für das Umsetzen des Fokus überlegt. Natürlich kann man auch z. B. Farbflächen zum Hervorheben des aktiven Elements benutzen, aber in diesem Artikel soll es speziell um Outlines gehen – wie sie aussehen können und wie sie gut umgesetzt werden können.
Wichtig ist auf jeden Fall: schon beim Designen sollte man sich zu den Outlines etwas überlegen – und sie auf keinen Fall bewusst weglassen! Auch sollte man sich nicht unbedingt auf die von den Browsern standardmäßig mitgelieferten Outlines verlassen, sie sind zwar da, aber nicht besonders schön anzusehen, inkonsistent und manchmal zu subtil. Hier eine Übersicht:
Default Browser Focus Outline Styles (neues Fenster)
Wenn man auch Outlines als essentielles Design-Element betrachtet, wird das Interface deutlich aufgewertet, schöner und inklusiver, und sieht in jedem Browser gleich aus.
Custom Focus Styles
Ein möglicher Ausgangspunkt kann so aussehen:
*:focus-visible {
outline-color: currentColor;
outline-style: solid;
outline-offset: .25rem;
outline-width: .25rem;
}Die Werte voneinander zu trennen, hat den Vorteil, dass der css Code lesbarer ist. Man kann sie auch leichter für spezielle Elemente anpassen, sollte das nötig werden.
Um Fokus-Styles für Tastatur-Nutzer anzupassen, verwendet man am besten focus-visible. Beim Verwenden von focus wird der Style für alle Nutzer sichtbar, auch für Mausnutzer, was störend sein kann.
/* This means: show outline for keyboard users only */
button:focus-visible {
outline: 2px solid blue;
}
/* This means: show outline for all users */
button:focus {
outline: 2px solid blue;
}Mehr Info zu focus und focus-visible bei MDN Web Docs
Was ist current-color?
current-color benutzt die aktuelle Textfarbe. Auf diese Weise wird die Outline immer die gleiche Farbe wie der Text haben. Es ist ein guter Startpunkt, aber für einige Fälle wird man eine andere Farbe brauchen, z. B. bei sich ändernder Hintergrundfarbe.
Outlines barrierefrei machen
Die WCAG Richtlinien geben folgendes vor:
- Die Focus Outline muss mind. 2px dick sein
- Die Focus Outline Farbe muss ein Kontrast-Verhältnis von mind. 3:1 haben (AAA Vorgabe, aber schadet nicht, es gleich so vorzusehen)
Schöne Outline-Form
Man sollte vermeiden, dass sich die Outline dem Element folgt, so dass sich sich an das Element schmiegen. Dies kann mit overflow:hidden oder display:block erreicht werden, man muss aber immer aufpassen, dass sich daraus keine anderen negativen Auswirkungen ergeben und es muss von Fall zu Fall getestet werden.
Ein gute Sache bei outline ist, dass man „runde Ecken“ verwenden kann, über border-radius. Dies kann schöner aussehen als richtige Ecken.
Desweiteren gibt es noch outline-offset, mit dem man die Outline etwas weiter vom Element entfernen kann, das ist hilfreich, wenn das Element schon eine border oder einen Hintergrund hat. Man kann sogar negative offsets setzen, was bei Elementen, die über die volle Breite gehen, hilfreich ist.
Verschiedene Hintergründe
Man kann die Farbe der Outlines mit currentColor setzen und es dabei belassen. Aber meistens macht es mehr Sinn, übrerall konsistent gleiche Outlines zu haben und sie nur zu ändern, wenn es nötig ist. Hier ein Tipp mit custom properties in css:
:root {
--outline-color: #ffffff;
}
[data-dark-background] {
--outline-color: #000000;
}
*:focus-visible {
outline-color: var(--outline-color);
}Hier wird für Elemente, die für dunklen Hintergund markiert werden, eine andere Outline-Farbe verwendet.
Doppelte Linien
Man kann outline mit box-shadow kombinieren um den Effekt einer doppelten Linie zu bekommen:
*:focus-visible {
outline: 2px solid white;
box-shadow: 0 0 0 4px black;
}Dieser Code macht eine weiße Linie mit einem schwarzen Schatten, und das Ganze sieht wie eine doppelte Linie aus. Es ist ein workaround, und funktioniert nur, wenn man box-shadow nicht schon für etwas anderes benutzt, aber im Moment gibt es noch keine mehrfarbigen Outlines. Es wird zwar darüber diskutiert, aber die Implementation ist noch ungewiss. Vor allem die „stripes“ Funktion klingt vielversprechend.
Hover-Zustand = Fokus-Zustand
Wenn man einen Hover-Zustand definiert hat, ist es gut, diesen auch auf den Fokus-Zustand anzuwenden. Es macht noch mehr deutlich, welches Element gerade aktiv ist und sieht gut aus.
.my-button:hover, .my-button:focus-visible {
background-color: var(--color-highlight);
color: white;
}Dies ist besonders bei Dropdowns oder Tooltips zu empfehlen, bei denen der Hover-Zustand die Sichtbarkeit des Elements kontrolliert.
Fokus-Outlines animieren
Sinnvolle Animationen können eine gute Wirkung haben: sie machen den Fokus-Zustand erkennbarer. Man muss sie aber umsichtig einsetzen. Zum Beispiel für einen leichten Bounce-Effekt.
*:focus-visible {
outline-color: currentColor;
outline-style: solid;
outline-offset: .25rem;
outline-width: .25rem;
}
@media (prefers-reduced-motion: no-preference) {
*:focus-visible {
animation: outline-bounce .5s;
}
}
@keyframes outline-bounce {
0% { outline-offset: .25rem }
50% { outline-offset: .5rem }
100% { outline-offset: .25rem }
}Die User Experience kann so verbessert werden, jedoch können Animationen auch ablenken, Unwohlsein verursachen und den Code aufblähen. Wichtig ist, beim Verwenden von Outline Anmationen im css die Einstellung prefers-reduced-motion zu berücksichtigen und hier die Animation abzuschalten. Verwende Animationen nur, wenn sie die Usability verbessern.
Probleme mit Outlines & Lösungen
Overflow
Es kann vorkommen, dass man Outlines ausgeschlossen hat, ohne es zu merken, z. B. bei Scroll-Containern, die nicht genug Platz haben, um sie zu zeigen. Hier 2 mögliche Lösungen:
/* Potential issue */
.scroll-container {
overflow-x: auto;
overflow-y: clip;
}
/* Solution 1: Ensure outline is visible */
.scroll-container:focus-visible {
outline-offset: -.1rem;
}
/* Solution 2: Add padding and negative margin to scroll container */
.scroll-container {
padding: .1rem;
margin: -.1rem;
}Ouline mit Inline-Elementen
Manchmal hat man ein Block-Element in einem Inline-Element, was in HTML nicht erlaubt ist und die Outline dadurch nicht dargestellt wird (z. B. <div> innerhalb eines <a>).
Testen von Fokus-Outlines
- Die Website statt mit der Maus mit der Tastatur navigieren
- Schauen, ob man immer die aktuelle Position auf der Seite sehen kann und ob alle interaktiven Elemente eine Outline anzeigen
- Sichtbarkeit und Kontrastverhältnis der Outlines testen (auf diversen Hintergründen)
- Visuelle Ungereimtheiten checken, z. B. gezackte Ränder oder abgeschnitte Outlines
- Outline-Formen zwischen verschiedenen Elementen und Zusammenhängen vergleichen
- Sicherstellen, dass das Outline Desigin mit der visuellen Sprache der Website übereinstimmt.
Der beste Test ist jedoch: jemanden testen lassen, der immer nur mit der Tastatur unterwegs ist, und dabei zuschauen. Hier lernt man eine Menge.
Beispiele aus dem echten Leben
Es wurde sichergestellt, dass die Fokus Outlines konsistent bei den verschiedenen Elementen gleich sind. Die Outline-Farbe entspricht der Textfarbe und der Offset stellt sicher, dass die Outlines immer sichtbar sind.
Bei jedem Laden der Website werden zufällige Farben ausgegeben. Die Fokus Outline benutzt immer die gegenwärtige Textfarbe und einen Offset. Auf diese Weise hat die Outline immer genug Kontrast.
Die Website der britischen Regierung benutzt eine schwarze Outline mit einer gelben border, was einen hohen Kontrast ergibt. Diese Komibination funktioniert auf jedem Hintergrund und sieht in Kombination mit dem Blau, das sie benutzen, sehr gut aus.
Die Farben der Marke werden durch die rot gepunktete Outline unterstützt. Diese Farbe wird konsistent bei allen Elementen benutzt.
Aesop benutzt eine schware oder weiße Outline für den Fokus-Status, abhängig von der Hintergrundfarbe. Dieser minimalistische Ansatz passt hervorragend zu ihrer Designsprache.
Blaue und grüne Outlines werden für die Fokus-Zustände verwendet. Die Fokus-Outlines zwischen den Elementen sind animiert, was es interessant macht. Ob das jetzt eine gute Idee ist, kann man diskutieren, aber es ist definitiv besonders.
Takeaway
Outlines sind keine nice-to-have’s, sie sind wesentlich für ein zugängliches Web.