Position sticky und fixed auf barrierefreien Websites

9.10.2024

Mit position: sticky und fixed lassen sich Elemente dauerhaft im Viewport halten. Doch sie müssen bewusst eingesetzt werden um nicht zur Barriere zu werden.

Inhaltsverzeichnis

Heutzutage ist jede Information nur noch einen Klick entfernt – doch nur, wenn sie nicht aus dem Sichtfeld verschwindet. Etwas Ähnliches haben Webdesigner im Sinn, wenn sie Inhalte wie Navigationsleisten oder Cookie-Banner immer im Blickfeld behalten wollen. Sie nutzen dafür die CSS-Eigenschaften „position: sticky“ und „position: fixed“. Doch, so praktisch diese auch sein mögen, stellt sich die Frage: Wie wirken sie sich auf die Barrierefreiheit einer Website aus?

Was machen position sticky und fixed?

Um zu verstehen, was „sticky“ und „fixed“ bewirken, müssen wir einen Blick hinter die Kulissen werfen.

„position: fixed“ ist der Fels in der Brandung, der sich keinen Millimeter von der Stelle bewegt. Ein fest positioniertes Element, das nur relativ zum Bildschirm positioniert wird und dort bleibt, egal, wie wild man durch die Inhalte scrollt. Mit top, bottom, left, right oder kurz inset lässt sich die genaue Position festlegen.

„position: sticky“ dagegen ist ein wenig wie der Freund, der zur Stelle ist, wenn man ihn braucht – es haftet an einer bestimmten Position, aber nur, während man scrollt. Ein Element mit „position: sticky“ ist somit teilweise statisch und teilweise fixiert. Ist der Inhalt, für den man das Elemente brauchte vorbei, dann scrollt auch unser sticky-Element wieder mit weg.

Beide Techniken haben das klare Ziel, wichtige Inhalte beständig im Blickfeld des Nutzers zu halten. So werden gern die Hauptnavigation oder wichtige Buttons sichtbar gehalten. Aber auch die Schritte eines mehrstufigen Prozesses können dem Nutzer helfen, den Überblick zu behalten.

Welchen Einfluss haben sticky und fixed Elemente auf die Barrierefreiheit?

Jetzt wird es spannend, denn so nützlich die CSS-Eigenschaften „position: sticky“ und „position: fixed“ auch sind, können sie in Sachen Barrierefreiheit zu Stolpersteinen werden. Hierbei gilt es, ein Gleichgewicht zu finden zwischen ständiger Verfügbarkeit wichtiger Elemente und dem Überladen des Bildschirms. Insbesondere Nutzer*innen mit Sehbehinderungen oder kognitiven Einschränkungen könnten von zu vielen fixierten Inhalten schnell überfordert sein.

Erschwerend kommt hinzu, dass ständig sichtbare Elemente andere Inhalte verdecken können. Das wird insbesondere dann zum Problem, wenn das fokussierte Element überdeckt wird. Denn in der WCAG heißt es, dass der Tastaturfokus eines Bedienelements nicht vollständig von Web-Inhalten (z. B. Dialogen) überlagert sein darf. Wichtig ist also sicherzustellen, dass Elemente, die mit „sticky“ und „fixed“ positioniert wurden, nicht andere Elemente vollständig überlagen.

Wie lassen sich Probleme mit der Barrierefreiheit umgehen?

Der größte Schlüssel zur Lösung liegt im bedachten Einsatz von „sticky“ und „fixed“. Ein goldenes Mittelmaß zu finden, das weder die Benutzerfreundlichkeit noch die Barrierefreiheit beeinträchtigt, ist das Ziel. Überlegen Sie sich also zunächst genau, ob ein Element so wichtig ist, dass es wirklich im Viewport sichtbar bleiben muss.

Im Zweiten Schritt müssen Sie sicherstellen, dass das fokussierte Element immer sichtbar ist. Durch klugen und kreativen Einsatz von CSS ist das Kein Problem:

  • Veränderung des z-index um das Fokussiere Element ganz nach vorn zu holen
  • Nutzung von padding und scroll-padding um die verdeckten Bereiche frei zu halten

Fazit – Position: sticky und fixed klug einsetzen

Abschließend lässt sich sagen, dass „position: sticky“ und „position: fixed“ mächtige Werkzeuge im Arsenal eines Webdesigners sind, aber mit großer Macht kommt auch große Verantwortung. Ein sorgfältiger Umgang mit diesen Eigenschaften kann die Zugänglichkeit einer Website verbessern oder verschlechtern. Wichtig ist, dass wir unsere digitale Welt so inklusiv wie möglich gestalten und dabei jedes einzelne Element auf seine Barrierefreiheit hin überprüfen.