Braucht es für Responsive Design noch Media Queries in 2026?

Seit August 2025 ist das CSS-Werkzeug in allen großen Browsern nutzbar, das Media Queries in vielen Fällen überflüssig macht: Container Queries. Viele Websites nutzen es trotzdem nicht.

Responsive Design galt jahrelang als gelöstes Problem. Ein fließendes Raster mit Flexbox und drei Media Queries reichte aus. Dann kamen Container Queries, neue Viewport-Einheiten für Smartphones und die Barrierefreiheitsrichtlinien WCAG 2.2. Viele Websites wirken seither älter, als sie sind, obwohl sie technisch sauber gebaut sind. Dieser Beitrag zeigt, was heute zum Stand der Technik gehört, welche alten Faustregeln Sie streichen können und wo die typischen Stolperfallen liegen.

Wir haben alle Angaben im November 2026 neu geprüft, die Browserdaten anhand von caniuse.com (Datenstand 29. Oktober 2026), die Rechtslage anhand der EU-Richtlinien und der Norm EN 301 549.

Was heißt Responsive Design 2026 eigentlich?

Die klassische Definition lautet: Responsive Design sorgt dafür, dass sich eine Website automatisch an verschiedene Bildschirmgrößen anpasst. Heute meint der Begriff mehr, nämlich eine Arbeitsweise: Inhalte sollen auf jedem Gerät sinnvoll gegliedert, gut lesbar und bedienbar sein, ob mit Maus, Finger, Tastatur oder Screenreader.

Den passenden Denkrahmen hat die Webentwicklerin Jen Simmons „Intrinsic Web Design“ genannt. In diesem Modell richten sich Layouts nicht nur nach der Breite des Browserfensters. Sie reagieren auch auf den Platz im jeweiligen Container, auf die Menge des Inhalts, auf die Einstellungen der Nutzer und auf das Eingabegerät. Responsive Design ist damit ein Teil eines umfassenderen Ansatzes, nicht mehr das ganze Konzept.

Responsive gegen Adaptive: eine überholte Diskussion?

Vielleicht sind Sie schon über den Begriff adaptives Design gestolpert. Adaptive Websites liefern feste Layouts für bestimmte Geräteklassen aus und erkennen dafür beim Aufruf, ob ein Smartphone oder ein Desktop-Rechner anfragt. Responsive Design skaliert dagegen stufenlos. Die Unterscheidung hat sich damit weitgehend erledigt. Mit Container Queries passt sich jede Komponente an ihren Platz an, eine Geräteweiche braucht es dafür nicht.

Drei neue Bausteine

Die drei klassischen Bausteine fließendes Raster, flexible Bilder und Media Queries gelten weiter. Drei neuere ergänzen sie:

• Container Queries für Komponenten, die an mehreren Stellen mit unterschiedlich viel Platz eingesetzt werden
• Intrinsische Größen mit clamp(), min() und max() für Schriftgrößen und Abstände ohne ein Dickicht aus Umbruchpunkten
• Die Viewport-Einheiten svh, lvh und dvh für bildschirmfüllende Bereiche, die auch auf Smartphones passen

Warum Container Queries Media Queries aus der Pole Position verdrängen?

Container Queries sind für Responsive Design das wichtigste CSS-Werkzeug der letzten Jahre. Seit August 2025 führt die Web Platform Baseline sie als „Widely Available“. Das heißt: Sie funktionieren seit mindestens 30 Monaten in allen vier Kernbrowsern der Baseline gleich, also in Chrome, Edge, Firefox und Safari. Laut caniuse.com unterstützen sie 95,8 Prozent der genutzten Browser, ein Polyfill ist nicht mehr nötig.

Media Queries fragen den Viewport ab, also das Browserfenster. Container Queries fragen den Container ab, in dem eine Komponente sitzt. Der Browser passt eine Produktkarte dann daran an, ob sie in einer breiten Rasterzelle liegt oder in einer schmalen Seitenleiste.

So sieht das in der Praxis aus

Zuerst erklären Sie ein Elternelement zum Container. Danach schreiben Sie die Abfrage mit @container statt mit @media:

Dieselbe Karte erscheint so in der Seitenleiste schmal mit untereinander gestapelten Inhalten und auf der Übersichtsseite breit mit Bild und Text nebeneinander. Dafür braucht es keine einzige Media Query. Die Komponente bringt ihr Verhalten selbst mit, und Sie pflegen eine Komponente statt mehrerer Varianten.

Container Query Units: cqw, cqi, cqh

Zu Container Queries gehören eigene Längeneinheiten. 1cqw entspricht einem Prozent der Containerbreite, 1cqh einem Prozent der Höhe und 1cqi einem Prozent der Inline-Größe, bei waagerecht laufender Schrift also ebenfalls der Breite. Mit cqi wächst eine Schrift innerhalb einer Komponente mit ihrem Container:

Laut caniuse.com verstehen 95,9 Prozent der genutzten Browser diese Einheiten.

Wann Sie weiterhin Media Queries brauchen

Container Queries ersetzen Media Queries nicht vollständig. Für Entscheidungen über die ganze Seite, etwa ob die Navigation als Leiste oder als Menüknopf erscheint, bleibt @media das richtige Mittel. Das gilt erst recht für Nutzereinstellungen wie prefers-reduced-motion, prefers-color-scheme oder prefers-contrast. Diese Einstellungen lassen sich nur per Media Query abfragen:

Eine einfache Faustregel hilft bei der Wahl: Media Queries für das Seitenlayout und den Nutzerkontext, Container Queries für die einzelnen Komponenten.

Wie bauen Sie ein modernes Fluid Grid mit CSS Grid und Subgrid?

CSS Grid ist für zweidimensionale Layouts gemacht. Zusammen mit auto-fit, minmax() und clamp() entsteht ein fließendes Raster, das ganz ohne Umbruchpunkt auskommt:

Das Raster zeigt so viele Spalten, wie mit mindestens 280 Pixeln Breite in den Container passen. Ist der Container schmaler als 280 Pixel, greift min(100%, 280px), und das Raster bricht sauber auf eine Spalte um.

Subgrid für verschachtelte Layouts

Subgrid funktioniert seit September 2023 in allen Kernbrowsern und gilt seit März 2026 als „Baseline Widely Available“. Laut caniuse.com unterstützen es 94,4 Prozent der genutzten Browser.

Mit Subgrid übernimmt ein verschachteltes Raster die Spalten oder Zeilen seines Elternrasters. Auch bei unterschiedlich langen Titeln stehen Titel, Text und Knopf dann über alle Karten hinweg auf gleicher Höhe.

Jede Karte belegt drei Zeilen des Elternrasters und übernimmt deren Höhen. Titel, Beschreibung und Knopf stehen damit auf einer Linie mit den Nachbarkarten. Früher ging das nur mit JavaScript oder festen Höhen.

Welche Viewport Units lösen das 100vh-Problem auf dem Smartphone?

Jahrelang war height: 100vh die Standardlösung für einen bildschirmfüllenden Startbereich. Auf Smartphones führte das zu einem bekannten Problem. Mobile Browser berechnen 100vh für den größten möglichen Viewport, also für den Zustand mit eingefahrener Adressleiste. Beim ersten Laden ist die Adressleiste aber sichtbar. Der Startbereich wird dann höher als der sichtbare Ausschnitt, und der wichtigste Knopf rutscht aus dem Bild. Seit Juni 2025 führt die Baseline die Einheiten svh, lvh und dvh als „Widely Available“. Laut caniuse.com unterstützen sie 95,9 Prozent der genutzten Browser. Für neue Projekte ist das Problem damit gelöst.

Der Vergleich im Überblick

Welche Einheit Sie wann einsetzen

Für einen Startbereich mit Handlungsaufforderung ist svh die richtige Wahl, weil der Knopf dann auch bei sichtbarer Adressleiste sofort im Bild liegt. Gerade bei einer Landing Page, deren Erfolg an genau diesem einen Knopf hängt, entscheidet die richtige Einheit über Klick oder Absprung. Für bildschirmfüllende Bildflächen ohne wichtige Bedienelemente am unteren Rand passt lvh.

dvh klingt verlockend, doch der Wert ändert sich, sobald die Adressleiste beim Scrollen ein- oder ausfährt, und der Browser muss das Layout neu berechnen. Laut web.dev aktualisieren die Browser den Wert dabei nicht mit 60 Bildern pro Sekunde, manche unterdrücken die Aktualisierung je nach Geste ganz. Inhalte können dadurch ruckeln oder springen. Setzen Sie dvh gezielt ein, nicht pauschal.

Für ältere Browser setzen Sie einen Ersatzwert davor. Browser, die svh nicht kennen, überspringen die zweite Zeile und nutzen 100vh:

Wie skalieren Sie Typografie ohne Media Queries?

Feste Pixelwerte für Schriftgrößen verraten alten Code. Fließende Typografie nutzt clamp() und skaliert stufenlos mit der Breite des Browserfensters oder des Containers. Laut caniuse.com verstehen 97 Prozent der genutzten Browser die Funktionen min(), max() und clamp().

clamp(Minimum, Wunschwert, Maximum) liest sich so: Die Schriftgröße fällt nie unter das Minimum und steigt nie über das Maximum. Dazwischen folgt sie dem mittleren Wert. Die Mischung aus rem und vw im mittleren Wert sorgt dafür, dass die Schrift mitwächst, wenn Nutzer im Browser eine größere Grundschrift einstellen. Ein reiner vw-Wert würde diese Einstellung übergehen.

Prüfen Sie die Werte trotzdem mit dem Browserzoom. WCAG verlangt, dass sich Text ohne Funktionsverlust auf 200 Prozent vergrößern lässt (Erfolgskriterium 1.4.4). Ein großer vw-Anteil wächst beim Zoomen nicht mit, und die Schrift erreicht die 200 Prozent dann womöglich nicht.

Optimale Zeilenlänge im Blick behalten

Die Lesbarkeit hängt weniger von der Bildschirmgröße ab als von der Zeilenlänge. Als Faustregel gelten 45 bis 75 Zeichen pro Zeile:

Die Einheit ch entspricht der Breite der Ziffer „0“ in der aktuellen Schrift. Sie richtet sich also nach dem Text, nicht nach Bildschirmpixeln. Bei 70ch passen in den meisten Schriften etwas mehr als 70 Zeichen in eine Zeile, weil viele Buchstaben schmaler sind als die Null.

Welche Touch-Target-Größen fordert WCAG 2.2 wirklich?

Viele Ratgeber nennen seit Jahren 48 × 48 Pixel als Mindestgröße für klickbare Elemente. Das ist die Empfehlung von Googles Material Design für Android (48 × 48 dp, geräteunabhängige Pixel), keine Forderung der WCAG. Viele Ratgeber verwechseln außerdem, was die WCAG verlangen und was das Gesetz vorschreibt.

Was WCAG 2.2 tatsächlich vorgibt

Das Erfolgskriterium 2.5.8 „Target Size (Minimum)“ aus den im Oktober 2023 verabschiedeten WCAG 2.2 verlangt auf Stufe AA, dass Klickflächen für Maus-, Stift- oder Fingereingaben mindestens 24 × 24 CSS-Pixel groß sind. Kleinere Klickflächen sind erlaubt, wenn ein Kreis mit 24 Pixeln Durchmesser um ihre Mitte weder eine andere Klickfläche noch den Kreis einer anderen kleinen Klickfläche schneidet.

Zwei Knöpfe mit 20 Pixeln Kantenlänge und 4 Pixeln Abstand bestehen die Prüfung also, ohne Abstand fallen sie durch.

Ausgenommen sind Links im Fließtext, Bedienelemente in der unveränderten Standardgröße des Browsers, Klickflächen mit einer gleichwertigen größeren Alternative auf derselben Seite und Fälle, in denen eine bestimmte Darstellung wesentlich oder gesetzlich vorgeschrieben ist. Erst das Kriterium 2.5.5 „Target Size (Enhanced)“ verlangt 44 × 44 CSS-Pixel, es gehört zur strengsten Stufe AAA.

Was in der EU rechtlich gilt (Stand: November 2026)

Seit dem 28. Juni 2025 gilt der European Accessibility Act (Richtlinie (EU) 2019/882), in Deutschland umgesetzt durch das Barrierefreiheitsstärkungsgesetz (BFSG). Es erfasst unter anderem Onlineshops und andere Dienstleistungen im elektronischen Geschäftsverkehr für Verbraucher, dazu Bankdienstleistungen, E-Books und Teile des Personenverkehrs. Ausgenommen sind Kleinstunternehmen, die Dienstleistungen erbringen: weniger als zehn Beschäftigte und höchstens zwei Millionen Euro Jahresumsatz oder Jahresbilanzsumme.

Welche WCAG-Version gilt, steht nicht im Gesetz. Sie ergibt sich aus der harmonisierten Norm EN 301 549. Für den European Accessibility Act hat die EU-Kommission bislang keine Norm im Amtsblatt genannt. Als Maßstab gilt in der Praxis die Fassung V3.2.1, die für Webinhalte auf WCAG 2.1 Stufe AA verweist. WCAG 2.1 kennt eine Mindestgröße für Klickflächen nur auf Stufe AAA.

Die 24-Pixel-Regel ist damit heute keine gesetzliche Pflicht.

Für öffentliche Stellen gilt eine eigene Grundlage, die Richtlinie (EU) 2016/2102 über barrierefreie Websites und mobile Anwendungen öffentlicher Stellen. Im Bund setzt die BITV 2.0 sie um, in den Ländern tun das eigene Verordnungen. Dort ist EN 301 549 V3.2.1 seit August 2021 per Durchführungsbeschluss (EU) 2021/1339 im Amtsblatt genannt, also ebenfalls mit WCAG 2.1.

ETSI, CEN und CENELEC haben EN 301 549 V4.1.1 am 24. August 2026 angenommen und am 2. September 2026 veröffentlicht. Sie stützt sich auf WCAG 2.2 und übernimmt deren sechs neue Kriterien der Stufen A und AA, darunter die 24-Pixel-Regel.

Die Nennung im Amtsblatt erwarten Fachbeobachter bis Ende 2026, es gibt aber keinen offiziellen Termin (Stand: 4. November 2026).

Die Marktüberwachung kann Verstöße gegen das BFSG je nach Art mit Bußgeldern bis 10.000 oder bis 100.000 Euro ahnden (§ 37 BFSG). Dieser Abschnitt ordnet die Lage ein und ersetzt keine Rechtsberatung.

Mindestgrößen für Klickflächen im Vergleich

Praktische Umsetzung

Als Grundmaß empfehlen sich 44 Pixel, auch wenn WCAG 2.2 auf Stufe AA 24 Pixel genügen lässt. Mit 44 Pixeln erfüllen Sie Stufe AAA und die Apple-Empfehlung zugleich:

min-height wirkt nur auf Elemente, die eine Höhe annehmen. Ein Link ist von Haus aus ein Inline-Element und braucht deshalb display: inline-flex oder inline-block. Links im Fließtext lassen Sie dagegen, wie sie sind, denn für sie gilt die Ausnahme.

Wie machen Sie Bilder und Videos 2026 responsive?

Weiterhin gilt: Liefern Sie nie ein einziges Bild für alle Bildschirmgrößen aus. Mit dem Attribut srcset wählt der Browser die passende Auflösung selbst:

Das Attribut sizes teilt dem Browser mit, wie breit das Bild im Layout erscheint, hier ab 768 Pixeln Fensterbreite in halber Breite, darunter in voller. Daraus berechnet der Browser, welche Datei aus srcset genügt.

Für das größte Bild im sichtbaren Bereich, oft das Titelbild, gilt eine Ausnahme. Laden Sie es nicht mit loading=“lazy“, sonst verzögert sich der Largest Contentful Paint, einer der drei Core Web Vitals.

AVIF ergänzt WebP

WebP ist längst Standard. AVIF liefert bei vergleichbarer Qualität meist kleinere Dateien. Wie viel kleiner, hängt vom Motiv und von den Einstellungen ab. Laut caniuse.com unterstützen 96,3 Prozent der genutzten Browser AVIF. Mit dem picture-Element bieten Sie beide Formate an, und jeder Browser nimmt das erste, das er kennt:

aspect-ratio verhindert Layout Shift

Bilder ohne festes Seitenverhältnis verursachen Cumulative Layout Shift, ebenfalls einen der drei Core Web Vitals. Die CSS-Eigenschaft aspect-ratio löst das:

Der Browser reserviert den Platz sofort, und der Text rutscht nicht nach, sobald das Bild geladen ist. Ebenso wirksam sind die Attribute width und height direkt am img-Element. Aus ihnen berechnen moderne Browser das Seitenverhältnis selbst. Für Videos gilt dasselbe. Mit aspect-ratio und width: 100% am video- oder iframe-Element skaliert auch ein eingebettetes Video mit dem Layout, ohne beim Laden den Text zu verschieben.

Welche fünf Fehler kosten Sie 2026 Rankings und Nutzer?

Fehler 1: Zu viele Breakpoints

Ein CSS mit eigenen Regeln für iPhone SE, iPhone 17, iPad mini und iPad Pro wird schnell zum Wildwuchs, den niemand mehr pflegen kann. Setzen Sie Umbruchpunkte nach dem Inhalt, nicht nach Geräten. Die Frage lautet: Ab welcher Breite bricht das Layout unschön um? Dort gehört der Umbruchpunkt hin. Drei bis vier Umbruchpunkte reichen für die meisten Websites.

Fehler 2: Feste Pixelwerte statt relativer Einheiten

Ein Layout mit font-size: 16px und width: 1200px übergeht, dass Nutzer ihre Standardschriftgröße ändern können. Nutzen Sie rem für Schriftgrößen und Abstände, Prozent oder fr für Breiten, ch für Textbreiten und clamp() für fließende Übergänge. Stellt jemand im Browser 20 statt 16 Pixel als Grundschrift ein, wächst ein Layout in rem mit. Kästen mit fester Pixelbreite wachsen dagegen nicht mit, und größerer Text quillt heraus.

Fehler 3: Container Queries ignorieren

Viele Komponenten erscheinen in Seitenleiste, Raster und Dialogfenster und bekommen dafür drei Layouts über Media Queries. Das ist mehr Code als nötig, und jede neue Einbausituation braucht eine weitere Regel. Eine Container Query erledigt das in einer Abfrage.

Fehler 4: 100vh auf Mobilgeräten

Startbereiche mit height: 100vh sind auf dem Smartphone fast immer zu hoch. Nehmen Sie 100svh mit 100vh als Ersatzwert.

Fehler 5: Klickflächen zu klein oder zu eng

Knöpfe mit 20 Pixeln Höhe ohne Abstand zum Nachbarn verfehlen WCAG 2.2 Stufe AA. Pflicht wird die Regel zwar erst mit der neuen Normfassung.

Nutzer tippen an zu kleinen Knöpfen aber schon heute vorbei. Prüfen Sie Ihre Website in den Entwicklerwerkzeugen des Browsers gegen die 24-Pixel-Regel, besser gegen 44 Pixel.

Was kommt nach Responsive Design?

Responsive Design ist kein Ziel mehr, sondern Grundausstattung. Das erste große Thema danach ist Progressive Enhancement: Die Website funktioniert auf jedem Gerät, und leistungsfähigere Browser bekommen zusätzliche Funktionen.

Das zweite große Thema ist Barrierefreiheit. Nicht jeder nutzt eine Maus oder einen Touchscreen. Screenreader, Tastaturbedienung, gute Kontraste und die Rücksicht auf Nutzereinstellungen wie prefers-reduced-motion oder prefers-color-scheme gehören dazu, ebenso ein Fokus, den nichts verdeckt: Nach dem WCAG-2.2-Kriterium 2.4.11 darf eine eingeblendete Leiste das gerade fokussierte Element nicht vollständig verdecken.

Die View Transitions API für Übergänge innerhalb einer Seite ist im Oktober 2025 mit Firefox 144 in allen Kernbrowsern angekommen, Übergänge zwischen zwei Seiten beherrscht Firefox noch nicht vollständig.

Container Style Queries fragen statt der Größe die Werte von CSS-Eigenschaften eines Containers ab. Chrome und Safari können das bislang nur für benutzerdefinierte Eigenschaften (CSS-Variablen), Firefox seit Version 151 vollständig. Bei neuen Projekten lohnt es sich, View Transitions und Style Queries als Zusatz für moderne Browser einzuplanen.

FAQ: Häufige Fragen zu Responsive Design

Glossar: Wichtige Begriffe zu Responsive Design

aspect-ratio

CSS-Eigenschaft, die das Seitenverhältnis eines Elements festlegt, zum Beispiel aspect-ratio: 16 / 9. Verhindert Cumulative Layout Shift, weil der Browser den Platz reserviert, bevor das Bild geladen ist.

Baseline Widely Available

Status der Web Platform Baseline. Eine Webfunktion erhält ihn, wenn sie seit mindestens 30 Monaten in allen Kernbrowsern (Chrome, Edge, Firefox, Safari) gleich funktioniert. Die Viewport-Einheiten svh, lvh und dvh erreichten ihn im Juni 2025, Container Queries im August 2025, Subgrid im März 2026.

Breakpoint

Umbruchpunkt: eine festgelegte Breite, ab der sich das Layout per Media Query oder Container Query ändert. Umbruchpunkte gehören dorthin, wo der Inhalt umbricht, nicht an die Bildschirmbreiten bestimmter Geräte. Drei bis vier reichen für die meisten Projekte.

clamp()

CSS-Funktion mit drei Werten: Minimum, Wunschwert, Maximum. Sie hält einen fließenden Wert zwischen Minimum und Maximum, etwa für fließende Typografie: font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem). Ersetzt viele Media Queries.

Container Query

CSS-Abfrage, die die Größe eines Containers prüft statt die des Viewports. Sie beginnt mit @container und setzt ein Elternelement mit container-type: inline-size voraus. So passt sich jede Komponente an ihren tatsächlichen Platz an.

Container Query Units

Längeneinheiten, die sich auf den aktuellen Container beziehen. 1cqw entspricht einem Prozent der Containerbreite, 1cqi einem Prozent der Inline-Größe, 1cqh einem Prozent der Höhe. Einsatz vor allem für Schriftgrößen innerhalb einer Komponente.

Viewport-Einheiten svh, lvh, dvh

Einheiten für die Viewport-Höhe auf Mobilgeräten: svh (klein, mit eingeblendeter Adressleiste), lvh (groß, mit eingefahrener Adressleiste) und dvh (dynamisch, wechselt zwischen beiden). Seit Juni 2025 „Baseline Widely Available“. Sie lösen das 100vh-Problem auf Smartphones.

EN 301 549

Europäische Norm für die Barrierefreiheit von Informations- und Kommunikationstechnik. Für Webinhalte verweist die Fassung V3.2.1 auf WCAG 2.1 Stufe AA, die im September 2026 veröffentlichte Fassung V4.1.1 auf WCAG 2.2. Rechtlich maßgeblich wird eine Fassung, wenn die EU-Kommission sie im Amtsblatt nennt.

European Accessibility Act

EU-Richtlinie 2019/882 über Barrierefreiheitsanforderungen für Produkte und Dienstleistungen, anzuwenden seit dem 28. Juni 2025. In Deutschland setzt das Barrierefreiheitsstärkungsgesetz (BFSG) sie um. Welche WCAG-Version gilt, regelt nicht die Richtlinie, sondern die harmonisierte Norm EN 301 549.

Fluid Grid

Rasterlayout mit relativen Einheiten statt fester Pixelwerte. Moderne Umsetzung mit CSS Grid: grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)). Die Spaltenzahl passt sich automatisch an den verfügbaren Platz an.

Intrinsic Web Design

Von Jen Simmons geprägter Begriff für Layouts, die auf mehr reagieren als auf die Breite des Browserfensters: auf Inhaltsmenge, verfügbaren Platz, Nutzereinstellungen und Eingabegerät. Weiterentwicklung des klassischen Responsive Designs.

Media Query

Die klassische CSS-Abfrage für responsive Layouts, eingeleitet mit @media. Weiterhin das richtige Mittel für Entscheidungen über die ganze Seite und für Nutzereinstellungen wie prefers-color-scheme oder prefers-reduced-motion.

Progressive Enhancement

Entwicklungsstrategie, bei der eine Website zuerst mit einer soliden Grundlage entsteht und dann für leistungsfähigere Browser erweitert wird. Jeder Nutzer bekommt eine brauchbare Fassung, moderne Browser bekommen zusätzliche Funktionen.

Subgrid

CSS-Technik, mit der ein verschachteltes Raster die Spalten oder Zeilen seines Elternrasters übernimmt. Seit September 2023 in allen Kernbrowsern, seit März 2026 „Baseline Widely Available“. Subgrid bringt Titel, Text und Knöpfe in Kartenrastern auf eine Linie.

Touch Target

Klickfläche: ein Bedienelement, das per Finger, Stift oder Maus ausgelöst wird. WCAG 2.2 verlangt auf Stufe AA mindestens 24 × 24 CSS-Pixel oder ausreichenden Abstand, auf Stufe AAA 44 × 44. In der EU wird die 24-Pixel-Regel verbindlich, sobald EN 301 549 V4.1.1 im Amtsblatt genannt ist.

Viewport

Der sichtbare Bereich einer Website im Browserfenster. Seine Größe hängt von Bildschirm und Browsereinstellungen ab. Für die mobile Darstellung unverzichtbar ist die Angabe <meta name=“viewport“ content=“width=device-width, initial-scale=1″> im Kopf der Seite.

WCAG 2.2

Web Content Accessibility Guidelines in Version 2.2, vom W3C im Oktober 2023 verabschiedet. Neu sind unter anderem die Kriterien 2.5.8 „Target Size (Minimum)“ und 2.4.11 „Focus Not Obscured (Minimum)“. Rechtlich maßgeblich wird die Version in der EU mit der Normfassung EN 301 549 V4.1.1, sobald diese im Amtsblatt genannt ist.

Quellen

• W3C WAI: WCAG 2.2 Success Criterion 2.5.8 Target Size (Minimum), besucht am 04.11.2026
• W3C: Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, www.w3.org/TR/WCAG22/; Understanding Success Criterion 2.5.5 Target Size (Enhanced) und 2.4.11 Focus Not Obscured (Minimum), besucht am 04.11.2026
• web.dev: Baseline monthly digest, August 2025, besucht am 04.11.2026
• web.dev: The large, small, and dynamic viewport units, besucht am 04.11.2026
• web.dev: Same-document view transitions are now Baseline Newly available, 16.10.2025, web.dev/blog/same-document-view-transitions-are-now-baseline-newly-available, besucht am 04.11.2026
• Web Platform DX: web-features explorer, Eintrag Subgrid, web-platform-dx.github.io/web-features-explorer/features/subgrid, besucht am 04.11.2026
• Can I Use: CSS Container Queries (Size), besucht am 04.11.2026
• Can I Use: Viewport unit variants, CSS Container Query Units, CSS Subgrid, CSS math functions, AVIF, View Transitions API, CSS Container Style Queries (Datenstand 29.10.2026), caniuse.com, besucht am 04.11.2026
• Richtlinie (EU) 2019/882 über die Barrierefreiheitsanforderungen für Produkte und Dienstleistungen (European Accessibility Act), eur-lex.europa.eu, besucht am 04.11.2026
• Barrierefreiheitsstärkungsgesetz (BFSG), § 2 Nr. 17, § 3 Abs. 3 und § 37, www.gesetze-im-internet.de/bfsg/, besucht am 04.11.2026
• Richtlinie (EU) 2016/2102 über den barrierefreien Zugang zu den Websites und mobilen Anwendungen öffentlicher Stellen; Durchführungsbeschluss (EU) 2021/1339 der Kommission vom 11.08.2021, eur-lex.europa.eu, besucht am 04.11.2026
• Davis Wright Tremaine: New Technical Standard for European Accessibility Act Compliance Released, 18.09.2026, www.dwt.com/insights/2026/09/european-accessibility-act-ict-standards-update, besucht am 04.11.2026
• sitebrunch: EN 301 549, versions, V4.1.1 and legal status, Stand 16.09.2026, www.sitebrunch.com/en/facts/en-301-549, besucht am 04.11.2026
• Microsoft Learn: Guidelines for touch targets (Windows-Apps), learn.microsoft.com/windows/apps/design/input/guidelines-for-targeting; Apple: Human Interface Guidelines, Accessibility; Google: Material Design 3, Accessibility, besucht am 04.11.2026