Working Draft

Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer
Working Draft

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen. Mal mit, mal ohne Gast begeben wir uns in die Tiefen von HTML, CSS, JavaScript oder auch Frameworks wie React, Vue und Angular. Wir diskutieren über gute UX, Web Performance und Barrierefreiheit, sowie ab und an auch über Browser und Webstandards. Supported uns bei Patreon: https://patreon.com/workingdraft

  1. -16 Ч

    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.

    1 ч. 8 мин.

  2. 10 ФЕВР.

    Revision 648: Personal Web Sites

    Mit Matthias Ott (Web, Mastodon, Newsletter) quatschen Schepp und Peter über das Indie Web im Allgemeinen und persönliche Websites im Besonderen. SCHAUNOTIZEN [00:01:01] PERSONAL WEB SITES Matthias ist der Schöpfer des Newsletters Own Your Web, in dem (unter anderem) die persönliche, selbstentwickelte und keinen Regeln gehorchende Webseite eine prominente Rolle spielt. Warum man eine Personal Web Site statt Social Media haben wollen könnte und wie diese gebaut sein könnte, ist Kernthema der Sendung. Faustregel: alles kann, nichts muss! Wir schauen uns ein paar Beispiele an (von Lynn Fisher bis CSS-Tricks), sprechen über technische wie inhaltliche Herausforderungen (z.B. Leser-Kommentare) Publikations-Paradigmen wie POSSE und den Umgang mit großen Plattformen. Wir enden mit einer Diskussion rund um RSS als Abo-Kanal, Syndikations-Mechanismus (z.B. via RSS Parrot) und Styling-Ziel für eine sehr hippe und coole Technologie namens XSLT.

    1 ч. 24 мин.

  3. 4 ФЕВР.

    Revision 647: WCAG-Spezifikationen lesen und verstehen

    Zur Fortsetzung der Barrierefreiheits-Mini-Podcast-Serie hatten Hans und Peter dieses Mal Nina Jameson zu Gast! Nina ist digitale Barrierefreiheitsexpertin und Co-Gründerin der Gehirngerecht Digital GmbH. Folgt ihr und ihrem Mitgründer auf LinkedIn oder hört euch einfach an, mit welcher Leichtigkeit sie unbedarfte Podcaster durch den WCAG-Dschungel führt! UNSER SPONSOR Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um voneinander zu lernen. Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche. Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc. SCHAUNOTIZEN [00:02:17] WCAG-SPEZIFIKATIONEN LESEN UND VERSTEHEN Wir kreisen in dieser Revision um die Web Content Accessibility Guidelines sowie verwandte Dokumente und Regulierungen. Nina erklärt die Struktur der Spezifikationen und wie sie für Otto Normalwebentwickler:in zu lesen und zu verstehen sind. Wir quatschen unter anderem über die Szenarien für die Anwendung der WCAG-Specs, wie die Erfolgskriterien funktionieren und sogar über die Spezifikation von Spezifikations-Conformance-Claims. Jenseits der W3C-Bleiwüsten-Wegweiser kommen wir nicht umhin, auch ein wenig über das leidige Thema der Umsetzung im Alltag zu sprechen. Was bringen European accessibility act und Barrierefreiheitsstärkungsgesetz, welche Webdev-Patterns stehen der Barrierefreiheit grundsätzlich entgegen und wie lässt sich Accessibility in die tägliche Webentwicklungs-Arbeit integrieren? Nina empfiehlt die Handreichungen der Überwachungsstelle des Bundes für Barrierefreiheit von Informationstechnik (z.B. für typische Bedienelemente, Rest stehe Publikationen auf bfit-bund.de) sowie die in der WCAG stets mitverlinkten Understanding– und How to Meet-Dokumente für die jeweiligen Erfolgskriterien. Am Ende streifen wir noch kurz das in Revision 646 bereits ausführlich beackerte Thema „automatisches Testing“. Nina empfiehlt axe DevTools, ARC Toolkit und die WAVE Web Accessibility Evaluation Tools, hat für Lighthouse hingegen nicht ganz so viel Enthusiasmus übrig.

    1 ч. 5 мин.

  4. 29 ЯНВ.

    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. UNSER SPONSOR Am 13. Juni 2025 lädt mittwald zum Head in the Cloud Summit ein – ein Tag voller Inspiration und Austausch auf dem mittwald Campus. Hier treffen sich Webworker, Developer und Digitalagenturen, um voneinander zu lernen. Freu dich auf spannende Talks und Sessions zu Cloud & DevOps, Technology und Culture & Creativity. Von den Herausforderungen der digitalen Arbeitswelt bis hin zu den Trends von morgen – hier bekommst du Einblicke von den klügsten Köpfen der Branche. Die Tickets sind begrenzt, also schnell buchen auf mittwald.de/hitc. 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. LINKS WCAG QUICK REFERENCE Eine umfassende Übersicht der Web-Content-Accessibility-Guidelines. WAVE TOOL Ein Tool, das Web-Accessibility-Probleme identifiziert, um die Barrierefreiheit zu verbessern. ACCESSIBILITY INSIGHTS Ein Tool zur Analyse von Webseiten auf Barrierefreiheit und zur Unterstützung bei manuellem Testen. ANNAS AUTOMATED ACCESSIBILITY TESTING GITHUB REPO Ein Repository mit nützlichen Skripten und Beispielen zum automatisierten Testen von Barrierefreiheit.

    1 ч. 3 мин.

  5. 21 ЯНВ.

    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 , oder , 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. LINKS MEIN TALK: ACCESSIBILITY IST EINFACH Paul Hempels Vortrag, der zeigt, warum und wie Barrierefreiheit ganz einfach umgesetzt werden kann. OPERATON AUF GITHUB Das Open-Source-Projekt für barrierefreie Web-Apps. Noch nicht öffentlich, aber bald als Beispiel verfügbar. JAVALAND Die Konferenz für Java-Entwickler:innen – mit Talks zu Barrierefreiheit und mehr. JAVALAND 2025 – KONFERENZ Details und Anmeldung zur nächsten JavaLand-Konferenz im April 2025. WAVE VON WEBAIM Ein mächtiges Tool, um Barrierefreiheitsprobleme auf Webseiten aufzudecken. WAI PATTERNS UND TUTORIALS Offizielle Dokumentation von WAI-ARIA zu UI-Patterns – detailliert und praxisnah. INCLUSIVE COMPONENTS Eine Sammlung von Patterns für barrierefreie UI-Komponenten mit großartigen Beispielen. CSSWG ISSUES AUF GITHUB Verfolge die neuesten Diskussionen und Standards rund um CSS.

    1 ч. 5 мин.

  6. 14 ЯНВ.

    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! SCHAUNOTIZEN [00:01:08] DAS BARRIEREFREIHEITSSTÄRKUNGSGESETZ 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. Anschlisß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. LINKS RICHTLINIE (EU) 2019/882 (EAA) Die Grundlage des Barrierefreiheitsstärkungsgesetzes – der European Accessibility Act im EU-Amtsblatt. BARRIEREFREIHEITSSTÄRKUNGSGESETZ (BFSG) Der Gesetzestext, der Barrierefreiheit im digitalen Bereich in Deutschland regelt. VERORDNUNG ZUM BARRIEREFREIHEITSSTÄRKUNGSGESETZ (BFSGV) Die Verordnung zum BFSG mit genauen Vorgaben und Details zur Umsetzung. ACCESSIBILITY REQUIREMENTS FOR ICT PRODUCTS AND SERVICES (EN 301 549, V3.2.1 (2021-03)) PDF Europäische Norm für barrierefreie Produkte und Dienstleistungen im Bereich Informations- und Kommunikationstechnologie. EN 301 549 V3 – HARMONIZED EUROPEAN STANDARD FOR ICT ACCESSIBILITY, ETSI Mehr zur Norm EN 301 549 und wie sie im europäischen Kontext angewendet wird. WEB CONTENT ACCESSIBILITY GUIDELINES (WCAG) 2.2 Die neuesten Leitlinien für barrierefreie Webinhalte – ein unverzichtbarer Standard für Entwickler:innen. EUROPEAN ACCESSIBILITY ACT – BARRIEREFREIHEIT FÜR DIE PRIVATWIRTSCHAFT, BLOGARTIKEL, TOLLWERK.DE, JOSCHI KUPHAL, 17. JANUAR 2024 Ein tiefer Einblick in die Auswirkungen des EAA auf die Privatwirtschaft – praxisnah und verständlich erklärt. BEI HEISE WURDEN ONLINE-SHOPS AUF BARRIEREFREIHEIT GETESTET Ein spannender Bericht darüber, wie deutsche Online-Shops bei der Barrierefreiheit abschneiden. BITV-PRÜFERBUND Die Anlaufstelle für die Überprüfung von Websites auf Barrierefreiheit nach der deutschen BITV. OVERLAY FACTSHEET Warum Accessibility-Overlays oft mehr Schaden als Nutzen bringen – Fakten und Hintergründe. „WO WIR SIND IST VORNE“ PODCAST: ACCESSIBILITY-OVERLAYS MIT DANIELA KUBESCH In dieser Folge wird sich kritisch mit Accessibility-Overlays auseinandergesetzt.

    1 ч. 1 мин.

  7. 7 ЯНВ.

    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. LINKS WEB ACCESSIBILITY COOKBOOK 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. HTMHELL ADVENT CALENDAR 2024 Jeden Tag ein Türchen voller Accessibility-Tipps. Besser als Schokolade (okay, fast). POLYPANE Der Schweizer Taschenmesser-Browser für alle, die Frontend ernst nehmen. Accessibility? Check. Multi-Viewport? Check. MANUEL IM FEBRUAR BEIM CSS CAFÉ Eine Tasse Kaffee und ein tiefes Gespräch über Farben, Farbräume und warum das alles nicht so einfach ist, wie es aussieht.

    1 ч. 28 мин.

  8. 31.12.2024

    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!✨

    8 мин.
См. все (669)

Об этом подкасте

Wöchentlicher Podcast für Frontend Devs, Design Engineers und Web-Entwickler:innen. Mal mit, mal ohne Gast begeben wir uns in die Tiefen von HTML, CSS, JavaScript oder auch Frameworks wie React, Vue und Angular. Wir diskutieren über gute UX, Web Performance und Barrierefreiheit, sowie ab und an auch über Browser und Webstandards. Supported uns bei Patreon: https://patreon.com/workingdraft

Информация

  • Автор
    Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer
  • Годы выхода
    2010 - 2025
  • Выпуски
    669
  • Ограничения
    Без ненормативной лексики
  • Авторские права
    © CreativeCommons Attribution-Noncommercial-Share Alike 2.5 http://creativecommons.org/licenses/by-nc-sa/2.5/
  • Сайт подкаста
    Working Draft

Вам может также понравиться

Чтобы прослушивать выпуски с ненормативным контентом, войдите в систему.

Следите за новостями подкаста

Войдите в систему или зарегистрируйтесь, чтобы следить за подкастами, сохранять выпуски и получать последние обновления.
Выберите страну или регион

Африка, Ближний Восток и Индия

Азиатско-Тихоокеанский регион

Европа

Латинская Америка и страны Карибского бассейна

США и Канада