Was ist eine Bildschirmlupe?
Eine Bildschirmlupe ist eine Art von Hilfstechnologie, die es Nutzern mit Sehbehinderungen ermöglicht, Teile des Bildschirms zu vergrößern und so Text, Bilder, Symbole und Oberflächenelemente zu vergrössern. Im Gegensatz zum Browser-Zoom, bei dem die gesamte Seite vergrößert wird, bieten Bildschirmlupen oft einen vergrößerten Ausschnitt, der dem Fokus des Benutzers folgt.
Beispiel: Ein sehbehinderter Benutzer verwendet die Windows-Lupe oder ZoomText, um ein Anmeldeformular um 300 % zu vergrößern, so dass er Eingabefelder und Beschriftungen besser erkennen kann.
Wie Bildschirmlupen funktionieren
Bildschirmlupen verfolgen den Fokus der Tastatur und die Bewegung des Mauszeigers und vergrößern den Bereich des Bildschirms, in dem die Interaktion stattfindet. Einige auch:
- Sie bietenModi mit hohem Kontrast
- enthaltenText-to-Speech-Funktionalität
- Funktionieren auf verschiedenen Betriebssystemen und Browsern
Dieses Tool ist wichtig für Benutzer, die sich nicht auf die Standardgröße oder den Standardkontrast des Bildschirms verlassen können, aber keine vollständigen Bildschirmlesegeräte verwenden.
Warum Bildschirmlupen für die Barrierefreiheit wichtig sind
Die WCAG (Web Content Accessibility Guidelines) verlangen, dass Websites auch bei einer Vergrößerung von bis zu 200 % wahrnehmbar und bedienbar sind (Erfolgskriterium 1.4.4: Textgröße ändern).
Standards wie:
- ADA (U.S.)
- BFSG (Deutschland) verstärken diese Verpflichtungen und machen die Unterstützung von Lupen zu einem Teil derEinhaltung der Zugänglichkeit unddigitalen Integration.
Wenn Ihr Layout bricht oder der Inhalt unter der Lupe nicht mehr lesbar ist, ist Ihre Website nicht barrierefrei.
Design-Tipps zur Unterstützung von Bildschirmlupen (TYPO3, WordPress & mehr)
TYPO3-Tipps:
- Vermeiden Sie Container mit fester Breite und verwenden Sieresponsive Frameworks wie Bootstrap.
- Verwenden Sierelative Schrifteinheiten (z. B. em, rem) anstelle von Pixeln.
- Testen Sie Vorlagen bei150-400% Zoom und passen Sie Elemente an, um ein Überlaufen zu verhindern.
WordPress-Tipps:
- Wählen Siebarrierefreie Themes die flexible Raster verwenden.
- Vermeiden Sie Plugins oder visuelle Editoren, die sich stark aufabsolute Positionierung.
- Stellen Sie sicher, dass keine Inhalte außerhalb des Bildschirms verborgen oder beim Zoomen abgeschnitten werden.
Universelle Best Practices:
- ✅ Vermeiden Sie feste Höhen bei Inhaltscontainern (sie können den Text abschneiden)
- ✅ Sicherstellen, dass gezoomter Inhaltkein horizontales Scrollen erfordern
- ✅ Halten Sie Formularfelder und Schaltflächensichtbar und erreichbar bei höheren Zoomstufen
- ✅ Verwenden Sie sichtbare Fokusindikatoren, die sich gut vergrößern lassen
Häufige Fehler und Missverständnisse
❌ "Der Zoom wird vom Betriebssystem oder Browser gesteuert, wir sind nicht dafür verantwortlich." ✔️ Falsch. Ihr Layout und Ihr Code müssen sich an das Zoomen anpassen, um vollständig kompatibel zu sein.
❌ "Text sollte schrumpfen, um in den Container zu passen." ✔️ Nein, Text muss skaliert werden. Die Container müssen sich anpassen, nicht umgekehrt.
❌ "Die Benutzer können einfach seitwärts scrollen." ✔️ Ein horizontaler Bildlauf ist nicht benutzerfreundlich und entspricht nicht den WCAG-Standards.
Verwandte Begriffe erforschen: Textgrößenanpassung, Fokusindikator, Tastaturnavigation, Barrierefreiheit im Web, unterstützende Technologie
Das Wichtigste zum Schluss
Wenn Ihr Inhalt nicht vergrößert werden kann, ist er nicht zugänglich. Bei der Entwicklung von Websites für Benutzer von Bildschirmlupen geht es nicht nur um die Skalierung, sondern auch um die Strukturierung Ihrer Website, damit sie in allen Größen klar, lesbar und funktional bleibt.
Möchten Sie sehen, wie Ihre Website unter Vergrößerung wirkt?
Benutzen Sie den T3AA Accessibility Analyzer, um die Vergrößerung zu simulieren, oder überprüfen Sie Ihre Layouts mit unserer Zoom-Friendly UX Checklist.Design to scale. Beziehen Sie jeden ein. Lassen Sie jeden Pixel härter arbeiten.