Mit zwölfjähriger Geschichte und über 5.000 Downloads pro Folge ist Working Draft
der etablierteste Podcast für Webentwickler im deutschsprachigen Raum.
Wenn ihr neue Entwicklerkollegen sucht oder ein Produkt für Webentwickler
anbietet, schreibt uns unter sponsoring@workingdraft.de.
4. März 2025 | Kommentare deaktiviert für Revision 651: Accessible Rich Internet Applications (ARIA)
In dieser Episode sprechen wir mit Marco Bretschneider über den ARIA-Standard und dessen Bedeutung für Barrierefreiheit bei dynamischen Webinhalten. Ein Accessibility-Audit war für sein Team der Ausgangspunkt, ARIA intensiver zu nutzen – daraus entstanden in seiner Firma die „ARIA of the week“-Sessions, die bis heute wertvolle Ergebnisse liefern.
Wir starten mit einem historischen Exkurs zur Entstehung von ARIA und werfen einen Blick darauf, welche bestehenden Standards als Vorbild dienten. ARIA wurde nämlich stark von Accessibility-APIs aus der Desktop-Welt inspiriert, darunter Microsoft Active Accessibility (MSAA) und Apples Accessibility API. Diese Ansätze wurden auf das Web übertragen, um mit Technologien wie JavaScript, React und Angular umzugehen, die für assistive Technologien lange Zeit schwer zugänglich waren.
Marco erklärt, wie ARIA den Accessibility-Tree eines Browsers beeinflusst und assistiven Technologien wie Screenreadern wichtige Zusatzinformationen liefert, die mit reinem HTML nicht immer verfügbar sind.
Anschließend gehen wir auf die Funktionsweise einer Auswahl des ARIA-Vokabulars ein. Wir sprechen etwa darüber, wie Tabs mit Rollen wie role="tablist" und Attributen wie aria-controls korrekt umgesetzt werden und warum bestimmte Tastatur-Interaktionen bei ARIA ein absolutes Muss sind. Außerdem reden wir über die Unterschiede zwischen Toggle-Buttons, Checkboxen und Switches sowie die Einsatzmöglichkeiten von Live-Regions mit aria-live.
Am Ende bleibt die zentrale Erkenntnis: ARIA ist ein mächtiges Werkzeug, aber es muss gezielt und mit Bedacht eingesetzt werden. Wichtig ist ein grundlegendes Verständnis des Accessibility-Trees. Gut umgesetztes ARIA macht dynamische Webinhalte nicht nur zugänglicher, sondern erleichtert auch Entwickler*innen die Arbeit, indem es Barrierefreiheit strukturiert und nachvollziehbar macht.
25. Februar 2025 | Kommentare deaktiviert für Revision 650: Sustainable Web Design
In dieser Episode sprechen wir mit der freiberuflichen UX/UI-Designerin und Nachhaltigkeitsforscherin Sandy Dähnert (Web / LinkedIn) über die Herausforderungen und Chancen im nachhaltigen UX- und UI-Design.
Schaunotizen
[00:02:08] Sustainable Web Design
Sandy beschäftigt sich seit 2018 intensiv mit diesem Thema und erklärt uns, was nachhaltiges Design bedeutet – und warum es weit über den ökologischen Aspekt hinausgeht. Wir richten unseren Blick auf die drei Dimensionen der Nachhaltigkeit: ökologisch, ökonomisch und sozial. Dabei wird schnell klar, dass der Fokus oft nur auf der Umwelt liegt, während Themen wie Barrierefreiheit, Diversität und ethisches Design genauso wichtig sind.
Ein zentraler Punkt unserer Diskussion ist die Rolle der Nutzerforschung. Wir müssen verstehen, wie unterschiedliche Interessen und Bedürfnisse die Gestaltung von Interfaces beeinflussen. Eine divers zusammengesetzte Nutzergruppe sorgt nicht nur für bessere Produkte, sondern macht auch unsere Verantwortung als Designer:innen deutlich. Sandy schlägt darüberhinaus aber auch vor, Personas nicht nur für Menschen, sondern auch für nicht-menschliche Elemente wie die Natur zu erstellen (sogenannte „Non-Human-Personas“), um die Auswirkungen unserer Designs auf die Umwelt besser zu berücksichtigen.
Natürlich schauen wir uns auch technische Entscheidungen an, die einen CO₂-Fußabdruck hinterlassen. Wie viel Daten eine Website überträgt, welche Hosting-Anbieter wir wählen und wie sich Design-Entscheidungen auf den Stromverbrauch auswirken – all das spielt eine Rolle. Sandy zeigt uns, dass minimalistisches Design nicht nur ästhetische Vorteile hat, sondern auch einen positiven Einfluss auf die Umwelt haben kann. Wir sprechen über Tools wie Website Carbon oder EcoGrader, die uns dabei helfen, die Performance und Nachhaltigkeit von Webseiten zu analysieren.
Zum Schluss reflektieren wir noch über unsere Verantwortung als Designer:innen und Unternehmen. Wir diskutieren, wie wir ethische Überlegungen in den Designprozess integrieren können, welche konkreten Schritte sich umsetzen lassen und warum es wichtig ist, sich kontinuierlich weiterzubilden. Nur wenn wir verschiedene Perspektiven einbeziehen und bewusste Entscheidungen treffen, können wir die Herausforderungen der Nachhaltigkeit meistern und echten Wandel vorantreiben. 🌱
Dieser Vortrag zeigt, wie der Dark Mode den Energieverbrauch von OLED-Displays reduziert, und auch, dass blaue Pixel mehr Strom verbrauchen als andere Farben.
18. Februar 2025 | Kommentare deaktiviert für Revision 649: Engineering KPIs
Schepp und Hans erörtern in dieser Revision, anlässlich eines Gastbeitrags zum Adventskalender des Engineering Kiosk Podcasts, die vielfältigen Aspekte von Engineering KPIs, deren Bedeutung für Benutzerinteraktion und Nutzererfahrung sowie die Notwendigkeit regelmäßiger Anpassungen im Einklang mit Unternehmenszielen.
Schaunotizen
[00:01:13] Engineering KPIs
Los geht’s mit einem Rückblick auf die Weihnachtsepisode beim Engineering Kiosk, in der sie erste Gedanken zu KPIs geteilt hatten. Schnell wird klar: KPIs sind genauso vielfältig wie die Perspektiven der beiden.
Hans bringt ein Beispiel aus der Praxis und erklärt, wie man die Performance eines Produkts messen kann – etwa in einem Online-Shop: Wie viele Besucher:innen kaufen wirklich etwas? Oder bei einer Video-Streaming-Plattform: Wie viele schauen regelmäßig und wie lange bleiben sie dran? Solche KPIs helfen nicht nur Entwicklerteams, sondern auch Produktverantwortlichen, die richtigen Entscheidungen zu treffen. Schepp wiederum macht deutlich, dass KPIs mehr als reine Technik sein sollten. Sie sollen auch die Benutzererfahrung verbessern. Ein Highlight in der Diskussion: die Core Web Vitals wie Largest Contentful Paint oder Cumulative Layout Shift – unverzichtbare Metriken für die Optimierung der User Experience (höre dazu auch Revision 533: Frontend Performance Metriken – Die Core Web Vitals). Am Ende sind sich beide einig: KPIs sollten immer aus der Sicht der Nutzer:innen betrachtet werden.
Ein weiterer wichtiger Punkt ist das regelmäßige Überprüfen und Anpassen bestehender KPIs. Hans plädiert für regelmäßige Meetings, um Metriken und Ziele auf Kurs zu halten. Auch das Thema Alerting thematisieren wir: Was tun, wenn KPIs plötzlich aus der Reihe tanzen? Schnelles Handeln ist hier entscheidend. Aber Achtung: Zu viele Metriken gleichzeitig sind kontraproduktiv. Ein Fokus auf die wirklich relevanten KPIs den größten Nutzen bringt – für Unternehmen und Nutzer:innen.
29. Januar 2025 | Kommentare deaktiviert für Revision 646: (Automatisiertes) Testing von Barrierefreiheit
In dieser Folge geht es darum, wie man Barrierefreiheit in der Web-Entwicklung richtig testet – mit Fokus auf praxisnahe Tipps. Anna Maier (LinkedIn / Mastodon), eine erfahrene Web-Entwicklerin und IT-Consultant, zeigt Hans und Schepp, worauf es wirklich ankommt.
Schaunotizen
[00:02:00] (Automatisiertes) Testing von Barrierefreiheit
Wir starten direkt Mal mit der Feststellung, dass automatisierte Tests zwar ein guter Anfang, aber bei weitem nicht genug sind. Denn Tools wie WAVE oder Accessibility Insights können nämlich nur 20-30 Prozent der Barrieren erkennen. Anna erklärt, warum der Rest einfach menschliches Augenmaß und echte Nutzererfahrung braucht. Ohne manuelle Tests geht’s nicht – da kommen Maschinen einfach an ihre Grenzen.
Konsequenterweise lautet Annas Empfehlung, echte Nutzerinnen und Nutzer in den Testprozess einzubinden. Vor allem Menschen, die regelmäßig assistive Technologien wie Screenreader nutzen, liefern Einblicke, die kein Tool bieten kann. Außerdem gibt es Agenturen, die auf solche Benutzer-Tests spezialisiert sind. Das lohnt sich, um echte Probleme zu erkennen und zu lösen.
Wir sprechen über Linter-Tools, die schon während der Entwicklung helfen, typische Fehler zu vermeiden. Das ist ein einfacher Weg, Barrieren früh zu reduzieren.
Beim Thema AI-Tools bleibt Anna kritisch. Generische Lösungen können helfen, bieten aber oft nicht die nötige Tiefe. Stattdessen empfiehlt sie spezialisierte Tools, die auf Barrierefreiheit ausgerichtet sind. Sie ist optimistisch, dass solche Tools in Zukunft durch AI noch besser werden könnten, indem sie gezielte Vorschläge basierend auf echten Nutzeranalysen liefern.
Kurz gesagt: Automatisierte Tests sind nur der Einstieg. Für echte Barrierefreiheit braucht es manuelles Testing, Nutzerfeedback und gute Tools.
21. Januar 2025 | Kommentare deaktiviert für Revision 645: Barrierefreiheit kann so einfach sein
In dieser Episode sprechen Vanessa und Schepp mit ihrem Gast Paul Hempel über die praktische Umsetzung von Barrierefreiheit im Web aus Sicht eines normalen Frontend-Entwicklers. Paul, der langjährige Erfahrung als Entwickler mitbringt, zeigt uns, dass Barrierefreiheit weder kompliziert noch teuer sein muss und in jedem Projekt berücksichtigt werden kann.
Schaunotizen
[00:01:06] Barrierefreiheit kann so einfach sein
Paul betont, dass barrierefreie Entwicklung nicht nur Menschen mit Behinderungen zugutekommt, sondern auch den Entwicklungsprozess vereinfachen kann. Oft machen sich Entwickler:innen unnötig viel Arbeit, weil sie nicht wissen, was mit semantischem HTML und CSS bereits möglich ist.
Ein Schwerpunkt der Diskussion liegt auf der Tastaturnavigation, die nicht nur für Barrierefreiheit essenziell ist, sondern auch Poweruser:innen hilft, effizienter zu arbeiten. Paul zeigt anhand von Beispielen wie <details>, <menu> oder <mark>, wie Webstandards genutzt werden können, um Barrierefreiheit zu erhöhen und gleichzeitig den Code wartbarer und übersichtlicher zu machen.
Paul spricht außerdem über seine aktuellen Projekte, darunter die Entwicklung neuer, barrierefreier Web-Apps als Open-Source-Software im Rahmen von „Operaton„. Dabei betont er, dass die eigentliche Herausforderung nicht in der Umsetzung, sondern im Erlernen der Prinzipien liegt – und dass Barrierefreiheit Hand in Hand mit einem korrekten Einsatz von Webstandards geht.
Ein weiteres Thema ist die Dokumentation von UI-Patterns, etwa durch die WAI. Die offiziellen Guidelines können abstrakt wirken, sind aber eine wertvolle Grundlage, wenn sie mit praktischen Beispielen kombiniert werden. Paul empfiehlt daher, sich intensiv mit den Grundlagen wie Landmarks, Page Regions und semantischem HTML auseinanderzusetzen, um barrierefreie Anwendungen effizient und effektiv zu entwickeln.
Schließlich werfen wir einen Blick auf Standardprobleme wie Kontraste, Textskalierung und die Verwendung von REM/EM, die oft vernachlässigt werden, obwohl sie mit den richtigen Ansätzen einfach zu lösen sind. Paul gibt dabei praktische Tipps und verweist auf hilfreiche Tools und Ressourcen, die die Umsetzung erleichtern.
14. Januar 2025 | Kommentare deaktiviert für Revision 644: Das Barrierefreiheitsstärkungsgesetz (BFSG)
In dieser Episode spricht Schepp mit Gästin und IAAP zertifizierter Barrierefreiheitsexpertin Sonja Weckenmann (LinkedIn) über das Barrierefreiheitsstärkungsgesetz (BFSG) – ein Gesetz, das darauf abzielt, Barrieren für Menschen mit Behinderungen abzubauen, und das am 28. Juni 2025 in Kraft tritt. Also höchste Eisenbahn, sich damit zu beschäftigen!
Zum Start gibt Sonja uns Einblicke in die Hintergründe und Ziele des BFSG und erklärt, warum es einen wichtigen Schritt in Richtung einer inklusiveren digitalen Welt darstellt.
Anschließend diskutieren wir, welche digitalen Produkte und Dienstleistungen unter die Regelungen fallen und welche Branchen besonders davon betroffen sind. Dabei wird deutlich, dass das Gesetz weitreichende Auswirkungen haben kann – von der Gestaltung von Websites über digitale Verkaufsplattformen bis hin zu mobilen Apps.
Ein weiterer Schwerpunkt ist die praktische Umsetzung der Anforderungen, die das BFSG an Unternehmen stellt. Sonja erläutert, welche Maßnahmen erforderlich sind, um den gesetzlichen Vorgaben zu entsprechen.
Neben der Theorie widmen sich Sonja und Schepp noch den typischen Stolpersteinen bei der Umsetzung. Sie sprechen darüber, wie sich Barrierefreiheit in bestehende digitale Systeme integrieren lässt und welche internen Prozesse angepasst werden müssen, um langfristig erfolgreich zu sein.
7. Januar 2025 | Kommentare deaktiviert für Revision 643: Das Web Accessibility Cookbook
Wir haben diesmal Manuel Matuzović zu Gast – Frontend-Entwickler, Berater, Auditor, Trainer und Autor des „Web Accessibility Cookbook“. Gemeinsam tauchen wir ein in die Welt der Barrierefreiheit und hangeln uns dazu am Aufbau seines Buches entlang.
Schaunotizen
Was macht eine saubere HTML-Dokumentstruktur aus?
Manuel erklärt, warum die Struktur eines HTML-Dokuments mehr ist als nur ein technisches Detail. Von Head-Elementen bis zu einer sinnvollen Organisation des Bodys – wir beleuchten, wie man das Fundament für zugängliche und benutzerfreundliche Webseiten legt.
Wie nutzt man Landmarks wie Header, Main und Footer richtig?
Landmarks bieten Orientierungshilfen für Nutzer:innen mit Screenreadern. Wir sprechen darüber, wann sie Sinn machen, wie man sie richtig einsetzt und warum eine gut strukturierte Seitenhierarchie für alle Nutzer:innen wichtig ist.
Warum sind Links und Buttons öfter kaputt, als sie sein sollten?
Links, die ins Leere führen, und Buttons, die nicht klicken wollen – wir reden darüber, warum diese Probleme so häufig sind und wie man sie vermeidet, um barrierefreie und funktionale Interfaces zu schaffen.
Wie werden Formulare und Tabellen barrierefrei?
Formulare und Tabellen können komplex und frustrierend sein – für Entwickler:innen und Nutzer:innen gleichermaßen. Wir diskutieren Best Practices, häufige Fehler und wie man diese wichtigen Elemente zugänglicher gestaltet.
Accessibility bei Custom Elements und Shadow DOM?
Web Components sind ein mächtiges Tool, aber sie kommen mit Herausforderungen. Wir sprechen über Vor- und Nachteile von Shadow DOM, warum es manchmal besser ist, darauf zu verzichten, und welche Rolle Custom Elements bei modernen Webprojekten spielen.
Gewinnspiel!
Manuel verlost zwei digitale Exemplare seines Buchs! 🎉 Schreib uns bis 31. Januar, was dein Lieblingselement in HTML ist und warum – auf Slack, per Mail oder auf unseren Social-Media-Kanälen Bluesky oder Mastodon.
Praktischer Leitfaden, der Entwickler:innen dabei unterstützt, barrierefreie Websites zu gestalten, mit klaren Beispielen, Best Practices und einfache Erklärungen für komplexe Themen.
31. Dezember 2024 | Kommentare deaktiviert für Outtakes 2024
Seit nunmehr gut fünf Jahren unterstützt uns Autorin, Sprecherin und Radiomoderatorin Sabine bei der Post-Produktion unserer Podcastfolgen. Das hat nicht nur für lang ersehnte Entlastung bei uns Hosts gesorgt, sondern auch die Qualität unseres Audio deutlich nach oben geschraubt. Sabine gibt uns nämlich Tipps für besseres Sprechen und nimmt sich auch immer die Zeit, jede Folge im Detail abzuhören und überflüssige Pausen und „Ähms“ herauszuschneiden.
Dafür von uns tausend Dank an Dich, Sabine!🙏🥰 Und ebenso tausend Dank an Euch Hörer*innen und Sponsor*innen, dass wir durch Euch die notwendigen finanziellen Mittel dafür haben ❤️.
Sabines akribisches Durchhören der Episoden hat außerdem noch einen tollen Nebeneffekt: Wir bekommen am Ende eines jeden Jahres nun immer Outtakes, die sie über das Jahr verteilt sammelt und uns und Euch als Weihnachtsgeschenk zusammenschnürt 🎄🎁. Und die sind immer fantastisch – hört selbst und rutscht anschließend gut!✨
10. Dezember 2024 | Kommentare deaktiviert für Revision 641: Passwörter & Passkeys
In dieser Revision haben wir erneut die Entwicklerin und Trainerin Martina Kraus (LinkedIn / Bluesky) zu Gast und diskutieren mit ihr über das Thema Passwörter und die passwortlose Zukunft mit Passkeys.
Schaunotizen
[00:02:15] Passwörter & Passkeys
In unserer Diskussion über Passwörter greifen wir zunächst die Empfehlung des Bundesamts für Sicherheit in der Informationstechnik (BSI) auf, das dazu rät, Passwörter nicht allzu komplex zu gestalten. Wir waren uns allerdings einig, dass die derzeitige Best Practice von mindestens zwölf Zeichen mit einer Kombination aus Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen eine gute Empfehlung sind, Komplexität hin oder her. Viele Nutzer können sich solche Passwörter allerdings schwer merken, was dazu führt, dass sie Passwörter wieder verwenden oder auf unsichere Weise speichern. Und auch auf Seitenbetreiber-Seite werden Passwörter nicht immer so sorgsam behandelt, wie es erforderlich wäre.
Genau hier kommen wir auf Alternativen wie Passkeys, die komplett ohne Passwörter auskommen und damit viele der Probleme von passwort-basierter Authentifizierung nicht kennen. Passkeys müssen nicht manuell eingegeben werden und sind individuell je spezifischer Website, dem sogenannte Origin. Sie bieten damit nicht nur eine bessere Sicherheit, sondern sind auch viel benutzerfreundlicher. Wir klären, wie Passkeys technisch funktionieren und welche Herausforderungen es bei deren Einführung möglicherweise gibt.
3. Dezember 2024 | Kommentare deaktiviert für Revision 640: CSS4, CSS5 und CSS Next
In dieser Episode sprechen wir mit Quentin Albert (LinkedIn, GitHub, Twitter) über die Entwicklung von CSS4, CSS5 und CSS Next und ergründen, warum es nach all der Zeit nun doch mit den CSS-Versionsnummern weitergehen soll.
Obwohl CSS3 einst als finale Version angekündigt war, machen stetige Neuerungen immer deutlicher, dass dieser Begriff dem Stand der Dinge nicht mehr gerecht wird. Was meinen Blogposts, Artikel oder Lernkurse, wenn sie versprechen, einem „modernes CSS“ oder CSS3 beizubringen? Runde Ecken? Flexbox und Grid? Oder vielleicht sogar Container Queries? Sowohl fürs Marketing als auch beim Lernen von CSS fehlt es an Nuance und zeitgemäßer Begrifflichkeit. An diesem Punkt setzt die CSS-Next Community Group an.
Bei den CSS-Versionsnummern stehen der Kontext und die Origin-Story neuer Technologien im Vordergrund, während das schon existierende Baseline-Projekt der WebDX Community Group eher die praktische Implementierung unterstützt. Ein Beispiel wäre Subgrid: Obwohl es noch nicht überall einsetzbar ist und damit von Baseline als neu eingestuft wird, gehört es konzeptionell doch in denselben Bucket wie Grid, das es schon lange gibt. Dementsprechend gehört Subgrid wie Grid zu CSS4. Die Versionsnummer markieren dabei größere Umbrüche, respektive Äras in den Fähigkeiten von CSS.
Abschließend blicken wir auf die nächsten Schritte: Die Integration der Levels in die offiziellen Spezifikationen der CSS Working Group schreitet voran, und erste Entwürfe liegen bereits vor. Des Weiteren lädt die CSS-Next Community Group alle ein, Teil dieser spannenden Weiterentwicklung von CSS zu werden, die nicht nur technische Neuerungen, sondern auch eine stärkere Zugänglichkeit für alle Nutzergruppen verfolgt.
Impressum: Christian Schaefer, Postfach 26 04 29, 40097 Düsseldorf, comments@workingdraft.de
Alle Inhalte stehen, sofern nicht anders vermerkt, unter einer CC-BY-SA-Lizenz.
