NCA Social Media
Erstellt:
Aktualisiert:
Autor:
Roland Golla
Grüne isometrische Lupe über Dokument mit Zoom Regler auf 400 Prozent

Was ist eine Lupe (Magnification) in der digitalen Barrierefreiheit?

Eine Lupe (Magnification) vergrößert Inhalte auf dem Bildschirm, damit Menschen mit Sehbehinderung Texte, Bilder und Bedienelemente erkennen können. Gemeint ist jede Form der Vergrößerung, vom Zoom im Browser bis zur Lupe des Betriebssystems.

Für Website Betreiber ist dabei eine Frage entscheidend: Bleibt die Seite benutzbar, wenn jemand stark vergrößert? Genau das regeln die WCAG 2.2 mit mehreren Kriterien, allen voran Textgröße ändern und Reflow.

Viele Menschen mit Sehbehinderung lesen selbst und brauchen keinen Screenreader, nur größere Inhalte. Für sie entscheidet die Vergrößerung, ob eine Seite nutzbar ist oder nicht.

Inhalt
NCA Cypress Workshop mit Cypress Ambassador Roland Golla

E2E Tests, die euer Team selbst schreibt

Ein Tag inhouse mit Roland Golla, offizieller Cypress Ambassador und seit über 20 Jahren in Testing und Refactoring zu Hause. Auf unserem YouTube Kanal zeigt er in über 70 Live Coding Tutorials, wie Cypress in echten Projekten läuft. Dazu kommt unser Open Source Plugin NCA TESTIFY: Basistests für jede Website, mit einer Zeile im CI/CD Setup. Im Workshop lernt euer Team Setup, stabile Selektoren, Custom Commands und Tests in der Pipeline.

  1. 1
    Kostenloses Vorgespräch
    Projekt, Stack und Teststand klären
  2. 2
    Workshoptag bei euch
    Setup, Patterns und erste Tests im Team
  3. 3
    Praxistag optional
    Tests im eigenen Projekt und in CI
Roland Golla
Roland Golla
Fullstack Developer
Zum Cypress Workshop arrow_forward

Wir testen eure Seite bei 200 und 400 Prozent Zoom

Zoom und Reflow testen wir bei NCA nicht nur von Hand. Mit Cypress setzen wir Viewports auf 320 CSS Pixel Breite und finden abgeschnittene Inhalte automatisch. Aus eigenen Projekten kennen wir die Stellen, an denen Layouts beim Vergrößern brechen.

Bei der Prüfung gehen wir eure wichtigsten Seiten mit Browser Zoom, Nur Text Zoom und Bildschirmlupe durch und zeigen genau, wo Inhalte abgeschnitten werden oder seitlich wegrutschen. Die Ursachen beheben wir direkt im CSS, meist über relative Einheiten und ein sauberes Responsive Design. Das ist Teil unseres Accessibility Audit und unserer Arbeit im barrierefreien Webdesign. Damit es so bleibt, richten wir Reflow Tests in eurer Pipeline ein und beraten zu CSS und Barrierefreiheit und gut lesbaren Schriftarten.

Welche Arten von Vergrößerung es gibt

Vergrößerung ist nicht gleich Vergrößerung. Für die Entwicklung ist wichtig zu wissen, welche Form Nutzer verwenden, denn jede stellt andere Anforderungen an eine Seite.

  • Browser Zoom: Mit Strg und Plus oder Cmd und Plus wird die ganze Seite vergrößert. Das Layout bricht dabei auf schmalere Breakpoints um. Das ist die häufigste Form.
  • Nur Text Zoom: Firefox und Safari können nur die Schrift vergrößern. Hier zeigt sich, ob Container mit fester Höhe Text abschneiden.
  • Systemschriftgröße: Auf Smartphones stellen viele Menschen größere Schrift ein. Gute Seiten übernehmen diese Einstellung.
  • Bildschirmlupe: Die Lupe von Windows, macOS, iOS und Android vergrößert einen Ausschnitt des Bildschirms, oft 4 bis 16 fach. Nutzer sehen nur einen kleinen Teil der Seite.
  • Vergrößerungssoftware: Programme wie ZoomText oder SuperNova kombinieren Lupe, Kontrastfilter und Sprachausgabe.

Für Tests reicht eine Form allein nicht aus. Der Browser Zoom zeigt Probleme beim Umbruch, die Bildschirmlupe zeigt, ob Zusammenhänge auch im kleinen Ausschnitt verständlich bleiben.

Textgröße, Reflow und Textabstand nach WCAG 2.2

Vier Erfolgskriterien regeln, wie eine Seite mit Vergrößerung umgehen muss. Alle liegen auf Stufe AA und sind damit für BFSG und European Accessibility Act relevant.

  • 1.4.4 Textgröße ändern (AA): Text muss sich ohne Hilfstechnik auf 200 Prozent vergrößern lassen, ohne dass Inhalt oder Funktion verloren gehen.
  • 1.4.10 Reflow (AA): Bei einer Breite von 320 CSS Pixeln, das entspricht 400 Prozent Zoom bei 1280 Pixel Fensterbreite, darf kein horizontales Scrollen nötig sein. Ausnahmen gelten für Inhalte, die zweidimensional sein müssen, etwa Karten oder große Datentabellen.
  • 1.4.12 Textabstand (AA): Inhalte müssen funktionieren, wenn Nutzer Zeilenhöhe, Buchstaben und Wortabstand vergrößern.
  • 1.4.13 Inhalte bei Hover oder Fokus (AA): Tooltips und Popups müssen schließbar, mit der Maus erreichbar und stabil sein. Wer mit Lupe arbeitet, muss den Mauszeiger auf den Tooltip bewegen können, ohne dass er verschwindet.

Dazu kommt 1.4.5 Bilder von Text (AA): Text in Bildern wird beim Vergrößern pixelig. Echter Text skaliert scharf.

Wie viel Vergrößerung verträgt eure Seite?

Ob eine Seite Vergrößerung verträgt, lässt sich in vier Stufen prüfen. Jede Stufe ist anspruchsvoller als die vorherige. Ziel nach WCAG 2.2 AA ist Stufe drei, Stufe vier sorgt dafür, dass es so bleibt.

Zoom Prüfung von 200 bis 400 Prozent

Level Was geprüft wird Werkzeuge
1 Zoom 200 Prozent Text wächst mit, nichts wird abgeschnitten oder überlappt Browser Zoom, Nur Text Zoom in Firefox
2 Textabstand Größere Zeilenhöhe und Abstände zerstören das Layout nicht Bookmarklet für Textabstand, DevTools
3 Reflow 400 Prozent Bei 320 CSS Pixeln Breite kein horizontales Scrollen, alle Funktionen erreichbar Responsive Modus der DevTools, Bildschirmlupe
4 Getestet Reflow und Abschneiden laufen als automatisierte Tests in der Pipeline Cypress mit cy.viewport, GitHub Actions

Diese Code Beispiele machen eure Seite zoomfreundlich

Zoom nie sperren. Diese Zeile im Kopf verhindert auf vielen Smartphones das Vergrößern mit zwei Fingern. Sie ist ein direkter WCAG Verstoß.

Code: 
          
<!-- Falsch: blockiert Pinch Zoom -->
<meta name="viewport" content="width=device-width, maximum-scale=1, user-scalable=no">

<!-- Richtig -->
<meta name="viewport" content="width=device-width, initial-scale=1">

Relative Einheiten statt Pixel. Schriftgrößen in rem folgen der Einstellung des Nutzers. Container ohne feste Höhe wachsen mit dem Text. clamp() für fließende Schrift braucht einen rem Anteil, sonst wächst der Text beim Zoomen nicht mit.

Code: 
          
html {
  font-size: 100%; /* Browser Einstellung respektieren */
}

h1 {
  /* vw allein skaliert nicht mit Zoom, rem schon */
  font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}

.card {
  min-height: 10rem; /* min-height statt height */
  overflow-wrap: anywhere;
}

Zoom Sperre und abgeschnittene Texte automatisch finden. Dieser Cypress Test prüft, dass der Viewport Tag Vergrößern erlaubt und dass bei 320 Pixeln Breite kein Button seinen Text abschneidet.

Code: 
          
describe('Vergrößerung', () => {
  beforeEach(() => {
    cy.viewport(320, 640)
    cy.visit('/')
  })

  it('sperrt den Zoom nicht', () => {
    cy.get('meta[name=viewport]')
      .should('have.attr', 'content')
      .and('not.match', /user-scalable=no|maximum-scale=1(\.0)?\b/)
  })

  it('schneidet keine Button Texte ab', () => {
    cy.get('button, a.button').each(($el) => {
      expect($el[0].scrollWidth, $el.text()).to.be.at.most($el[0].clientWidth + 1)
    })
  })
})

Wenn beim Vergrößern Inhalte verschwinden

  1. Zoom per Meta Tag gesperrt. user-scalable=no oder maximum-scale=1 nehmen Nutzern die wichtigste Hilfe.
  2. Feste Höhen. Buttons, Karten und Banner mit height in Pixeln schneiden vergrößerten Text ab.
  3. Sticky Header und Cookie Banner. Bei 400 Prozent Zoom bedecken sie oft die halbe Seite. Das kollidiert auch mit dem WCAG 2.2 Kriterium Fokus nicht verdeckt.
  4. Breite Tabellen und Karussells. Datentabellen ohne Umbruch und horizontale Slider zwingen zum seitlichen Scrollen, auch wo das vermeidbar wäre.
  5. Abgeschnittene Beschriftungen. Buttons und Labels mit white-space: nowrap und overflow: hidden verlieren beim Vergrößern ihren Text.
  6. Statusmeldungen weit weg vom Fokus. Wer nur einen Ausschnitt sieht, bemerkt Hinweise am anderen Ende der Seite nicht.

When people zoom a page, it is typically because they want the text to be bigger.

Adrian Roselli, Accessibility Berater und Mitglied der W3C Arbeitsgruppen – Responsive Type and Zoom, adrianroselli.com

Zwei Durchgänge, die mehr zeigen als jeder Score

Der schnellste Test dauert eine Minute: Browser auf 400 Prozent zoomen und einmal die wichtigste Strecke durchgehen, etwa Suche, Produktseite und Kontaktformular. Danach dieselbe Strecke mit der Lupe des Betriebssystems. Beide Durchgänge zusammen zeigen mehr als jeder automatische Score.

Vergrößerung hängt eng mit anderen Themen zusammen. Wer zoomt, braucht guten Farbkontrast, eine klare Lesereihenfolge und einen sichtbaren Fokus bei der Tastaturnavigation. Für Bilder sorgen gute Alternativtexte dafür, dass ihr Inhalt auch ohne scharfe Darstellung ankommt.

Grundlage ist das Prinzip Wahrnehmbar aus den vier POUR Prinzipien. Für die Technik helfen CSS und Barrierefreiheit und semantisches HTML. Rechtlich ordnen wir das über das BFSG und den European Accessibility Act ein. Für Tests lohnen die Firefox Accessibility Tools.

CYPRESS.IO Ambassador und IT Consultant für QA Engenieering und Qualität in PHP Projekten.
Erreichen Sie unsere Spezialisten zu barrierefreien Webdesign

Wir sind hier, um Ihnen zu helfen. Gemeinsam meistern wir Ihre digitalen Herausforderungen und fördern die Inklusion im Internet. Lassen Sie uns Ihre Projekte mit barrierefreiem Webdesign erfolgreich machen.

Kostenlose Demo Jetzt anrufen

Häufige Fragen zu Lupe und Vergrößerung

Zoom Stufen, Reflow und Bildschirmlupen: was Website Teams über Vergrößerung wissen müssen.

Was ist eine Lupe in der digitalen Barrierefreiheit 2026?

Eine Lupe oder Magnification vergrößert Bildschirminhalte, damit Menschen mit Sehbehinderung sie erkennen können. Dazu zählen Browser Zoom, die Bildschirmlupen von Windows, macOS, iOS und Android sowie Vergrößerungssoftware wie ZoomText. Für Websites zählt 2026 vor allem, dass Inhalte bei starker Vergrößerung nach WCAG 2.2 benutzbar bleiben.

Wie weit muss eine Website 2026 vergrößerbar sein?

Nach WCAG 2.2 muss Text auf 200 Prozent vergrößerbar sein, ohne dass Inhalt oder Funktion verloren geht. Zusätzlich verlangt das Kriterium Reflow, dass bei 400 Prozent Zoom, also 320 CSS Pixeln Breite, kein horizontales Scrollen nötig ist. Beides liegt auf Stufe AA und ist damit für BFSG und EAA relevant.

Was bedeutet Reflow nach WCAG 2026?

Reflow ist das Erfolgskriterium 1.4.10. Es verlangt, dass Inhalte bei einer Breite von 320 CSS Pixeln in einer Spalte umbrechen und nur vertikal gescrollt werden muss. Ausnahmen gelten für Inhalte, die zweidimensional sein müssen, etwa Landkarten, Diagramme oder große Datentabellen. Responsive Layouts erfüllen Reflow oft schon weitgehend.

Darf ich 2026 den Zoom auf Smartphones sperren?

Nein. Angaben wie user-scalable=no oder maximum-scale=1 im Viewport Meta Tag verhindern das Vergrößern mit zwei Fingern. Das verstößt gegen WCAG 1.4.4 und nimmt Menschen mit Sehbehinderung eine zentrale Hilfe. Moderne Browser ignorieren die Sperre teilweise, verlassen solltet ihr euch darauf aber nicht.

Welche Bildschirmlupen gibt es 2026?

Alle großen Betriebssysteme bringen eine Lupe mit: die Bildschirmlupe in Windows, Zoom in macOS und iOS sowie die Vergrößerung in Android. Dazu kommen spezialisierte Programme wie ZoomText oder SuperNova, die Vergrößerung mit Kontrastfiltern und Sprachausgabe kombinieren. Für Tests reicht meist die eingebaute Lupe des eigenen Systems.

Was ist der Unterschied zwischen Browser Zoom und Bildschirmlupe?

Der Browser Zoom vergrößert die gesamte Seite und lässt das Layout neu umbrechen. Die Bildschirmlupe vergrößert dagegen nur einen Ausschnitt des Bildschirms, ohne das Layout zu verändern. Nutzer sehen dann nur einen kleinen Teil auf einmal. Deshalb müssen zusammengehörige Inhalte und Meldungen nah beieinander stehen.

Warum sollte ich Schriftgrößen in rem angeben?

Schriftgrößen in rem beziehen sich auf die Grundschrift, die Nutzer im Browser einstellen können. Wer dort eine größere Schrift wählt, bekommt sie dann auf der ganzen Seite. Pixelwerte übergehen diese Einstellung. Auch bei fließender Typografie mit clamp sollte immer ein rem Anteil enthalten sein, damit Zoom wirkt.

Welche Probleme machen Sticky Header beim Zoomen?

Bei 400 Prozent Zoom kann ein fest stehender Header schnell die Hälfte des sichtbaren Bereichs belegen. Inhalte und der Tastaturfokus verschwinden dahinter. Das verletzt das WCAG 2.2 Kriterium Fokus nicht verdeckt. Lösungen sind Header, die beim Zoomen nicht mehr fixiert sind, oder ein scroll-padding passend zur Headerhöhe.

Wie teste ich Reflow schnell selbst?

Öffnet die Seite in einem Fenster mit 1280 Pixeln Breite und zoomt auf 400 Prozent. Alternativ stellt ihr im Responsive Modus der DevTools 320 Pixel Breite ein. Prüft, ob horizontales Scrollen nötig ist, ob Text abgeschnitten wird und ob alle Funktionen erreichbar bleiben. Mit Cypress lässt sich das automatisieren.

Was ist WCAG 1.4.12 Textabstand?

Das Kriterium verlangt, dass Inhalte funktionieren, wenn Nutzer die Abstände vergrößern: Zeilenhöhe auf das 1,5 fache, Absatzabstand auf das 2 fache, Buchstabenabstand auf 0,12 und Wortabstand auf 0,16 der Schriftgröße. Viele Menschen mit Leseschwierigkeiten nutzen solche Einstellungen. Feste Höhen führen hier schnell zu abgeschnittenem Text.

Warum sind Bilder mit Text ein Problem beim Zoomen?

Text in Bildern wird beim Vergrößern pixelig und unscharf, weil er nicht neu gerendert wird. Außerdem lässt er sich weder in Farbe noch Abstand anpassen und ist für Screenreader nur über den Alternativtext zugänglich. WCAG 1.4.5 verlangt deshalb echten Text, wo immer das möglich ist. Logos sind ausgenommen.

Hilft Vergrößerung auch Menschen ohne Sehbehinderung?

Ja. Ältere Menschen, Nutzer mit Leseschwierigkeiten und alle, die auf kleinen Bildschirmen oder bei schlechtem Licht lesen, profitieren von gut skalierbaren Seiten. Wer Reflow sauber umsetzt, bekommt außerdem automatisch ein robustes Layout für Smartphones, schmale Fenster und Split Screen. Barrierefreiheit und gute Usability gehen hier Hand in Hand.