Es gibt einige typische Situationen, bei denen Fokusindikatoren verdeckt werden:

• Sticky-Header oder Footer: Das Element mit Fokus wird von einem Sticky-Element überdeckt. Du kannst das selbst gut testen, indem du per Tastatur mit Shift + Tab rückwärts von unten nach oben durch ihre Seite navigierst. Der Sticky-Header dabei über das fokussierte Element »hüpfen«. CSS-Klassen wie scroll-margin-top (header) oder scroll-margin-bottom helfen dabei.
• Überlagerungen durch Modale: Ein korrekt implementiertes Modal »fängt« den Fokus ein, bis es geschlossen wird (durch ESC oder Schließen-Button). So wird verhindert, dass man mit der Tastatur Elemente erreicht, die hinter dem Modal verborgen sind.
• Überlagerungen durch erhöhte Elemente: Jedes Element, das auf der Z-Achse andere Elemente überlagert, kann den Fokus komplett verdecken. Achte beim Arbeiten mit z-index darauf, dass der Fokus immer sichtbar bleibt – besonders auch dann, wenn der User zoomt.
• Elemente sind nicht richtig versteckt: Oft sind Elemente per CSS nur aus dem sichtbaren Bereich verschoben, bleiben aber per Tastatur erreichbar (Beispiel: Slide-in-Menüs). So können Elemente fokussiert werden, die visuell gar nicht sichtbar sind. Dadurch wird natürlich auch der Fokuszustand verdeckt. Nutze display:none oder eine Methode, um Elemente komplett auszublenden.