Element nur für Screenreader einblenden

Barrierefreiheit, CSS, Elementor
06. Mai 2025

< Zurück zur Übersicht

Problem

Idealerweise werden dieselben Elemente für Sehende und Nicht-Sehende Nutzer gebraucht. In manchen Fällen sollen Elemente aber vorgelesen werden, ohne dass sie als sehender Nutzer zu erkennen sind.

Lösung

Elementor hat dazu eine eigene Klasse: „.elementor-screen-only“. Elemente mit dieser Klasse werden visuellausgeblendet, aber von Screenreadern vorgelesen.

Ohne Elementor kann diese CSS Klasse erstellt und anschließend den Elementen hinzugefügt werden:

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Kunden