Progressive Enhancement (progressive Verbesserung) ist eine Strategie der Webentwicklung, bei der eine Website schichtweise aufgebaut wird: Die Basis ist semantisches HTML, das in jedem Browser funktioniert. Darüber liegt CSS für Layout und Design, ganz oben JavaScript für zusätzliche Interaktivität. Fällt eine Schicht aus, bleibt die darunterliegende nutzbar.
Die drei Schichten
- Inhalt und Struktur (HTML): Überschriften, Links, Formulare, native Buttons – funktioniert immer.
- Darstellung (CSS): Layout, Farben, Typografie; Feature Queries (
@supports) für moderne Funktionen. - Verhalten (JavaScript): Komfortfunktionen wie Live-Validierung, Animationen, dynamisches Nachladen.
Warum Progressive Enhancement barrierefrei ist
Native HTML-Elemente bringen Tastaturbedienung, Rollen und Zustände für Screenreader automatisch mit. Wer zuerst darauf baut, braucht weniger ARIA und vermeidet Barrieren, wenn Skripte langsam laden oder blockiert werden. Zudem profitieren SEO, KI-Crawler und Performance.
Häufige Fragen
Was ist der Unterschied zu Graceful Degradation?
Graceful Degradation baut zuerst die volle Version und sorgt dann für Rückfallebenen. Progressive Enhancement beginnt mit der Basis und erweitert sie – das ist robuster.
Ist Progressive Enhancement mit React oder Vue möglich?
Ja, etwa durch serverseitiges Rendering, echte Formulare und Links als Basis und Hydration als Erweiterung.
Verwandte Begriffe: Semantisches HTML, Robust, Web Performance, Responsive Design