SPEAKER NOTES: - Code Crispies = unser Material - Codepen = sofort CSS ausprobieren - MDN = DIE Referenz schlechthin - Spiele für Flexbox/Grid – später relevant

Ada Lovelace, Daguerreotypie 1843 Antoine Claudet

Babbage: Mathematiker, besessen von Rechenmaschinen. Erste Maschine: Difference Engine (reine Rechenmaschine). Zweite Maschine: Analytical Engine – programmierbar, mit Lochkarten gesteuert. Nie fertig gebaut, aber revolutionär im Konzept. Ada: Tochter von Lord Byron, dem Dichter. Die Mutter – selbst Mathematikerin – hatte Angst, Ada könnte den "Wahnsinn" des Vaters erben. Also: strikte naturwissenschaftliche Erziehung. Weg von der Poesie, hin zur Logik. 5. Juni 1833, Ada ist 17: Sie trifft Babbage bei seinen legendären »Saturday night soirées«. Elitekreise. Er zeigt ihr seine Maschine – und sie versteht sie. Besser als fast alle anderen. 1835 heiratet sie William King → Ada King, Countess of Lovelace. Das Zusammenspiel dieser beiden: Ein Ingenieur, der Hardware baut. Eine Dichterstochter, die Software denkt. 100 Jahre vor den ersten echten Computern. Programmiersprache "Ada" (1980) nach ihr benannt.

Herman Hollerith, ca. 1890

Hollerith: Deutsch-amerikanischer Ingenieur, Statistiker am US Census Bureau. Das Problem: Die USA wuchsen so schnell, dass die Volkszählung von 1880 erst 1887 fertig ausgewertet war – die nächste Zählung stand schon bevor. Inspiration: Jacquard-Webstuhl. Dieser französische Webstuhl nutzte seit 1804 Lochkarten zur Steuerung komplexer Muster. Hollerith übertrug das Prinzip auf Daten. Seine Innovation: Eine Lochkarte = ein Datensatz (eine Person). Die Position der Löcher codierte Informationen (Alter, Geschlecht, Beruf etc.). Elektromechanische Maschine las die Karten und zählte automatisch. 1896 gründete er die Tabulating Machine Company. Nach mehreren Fusionen entstand daraus 1924 IBM – International Business Machines. Die Lochkarte blieb bis in die 1970er das Standardformat für Dateneingabe.

Hollerith-Lochkartenmaschine, ca. 1908 US Census Bureau

Hollerith-Lochkartenmaschine

Hollerith-Lochkartenmaschine, ca. 1940 US Census Bureau

Thomas J. Watson Sr. übernahm 1914 die Führung und prägte IBM entscheidend. Sein Motto: "THINK" – stand auf Schildern in jedem IBM-Büro. Warum "Big Blue"? IBMs Firmenfarbe war dunkelblau, ihre Großrechner hatten blaue Gehäuse. Der Spitzname entstand in den 1960ern. Geschäftsmodell: IBM verkaufte nicht nur Maschinen, sondern vermietete sie – inklusive Wartung. Kunden waren abhängig. Ein frühes "Software-as-a-Service"-Modell. Lochkarten blieben Standard bis in die 1970er. Die 80-Spalten-Karte prägte sogar frühe Bildschirmbreiten (80 Zeichen). Heute: IBM hat sich neu erfunden – Cloud-Computing, KI (Watson), und 2019 Übernahme von Red Hat für 34 Milliarden Dollar.

Hollerith-Maschinen im Dritten Reich Dehomag = Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)

Die Volkszählung 1933 fragte erstmals systematisch nach "Rasse" und Religion. Lochkarten ermöglichten die schnelle Auswertung – wer war Jude, wer Halbjude, wer mit wem verheiratet? Dehomag war IBMs profitabelste Auslandstochter. IBM lieferte nicht nur Maschinen, sondern auch maßgeschneiderte Lochkarten und Wartung. Die Maschinen in den KZs trugen IBM-Seriennummern. Edwin Blacks Buch basiert auf tausenden Dokumenten. IBM bestritt die Vorwürfe, zahlte aber 2001 Entschädigungen an Holocaust-Überlebende. Die Frage für MedienarbeiterInnen: Hätte IBM "Nein" sagen können? Sollen? Müssen? Technologie ist nie neutral – sie wird von Menschen für Zwecke eingesetzt.

Alan Turing, ca. 1940 Bletchley Park

Alan Turing war seiner Zeit Jahrzehnte voraus. Mit 24 Jahren definierte er, was "Berechnung" mathematisch bedeutet – bevor es echte Computer gab. Bletchley Park: Geheimes Entschlüsselungszentrum 80 km nördlich von London. 10.000 Menschen arbeiteten dort, darunter viele Frauen. Streng geheim bis in die 1970er. Seine Arbeit verkürzte den Krieg um geschätzte 2-4 Jahre und rettete Millionen Leben. Aber er durfte nie darüber sprechen. 1952 wurde Turing wegen Homosexualität verurteilt – damals illegal in Großbritannien. Er wurde chemisch kastriert. 1954 starb er an Zyanidvergiftung, vermutlich Suizid. Er war 41. 2009: Offizielle Entschuldigung von Premierminister Gordon Brown. 2013: Königliche Begnadigung durch Queen Elizabeth II. 2021: 50-Pfund-Schein mit Turings Porträt.

Der Turing-Test (1950): Ein Interrogator kommuniziert per Text mit einem Menschen und einer Maschine. Kann er nicht zuverlässig unterscheiden, wer wer ist, besteht die Maschine den Test.

Los Alamos, New Mexico – geheimes Labor, beste WissenschaftlerInnen der Welt. "Computer" war ein Job-Titel! Meist Mathematikerinnen. Richard Feynman leitete eine Abteilung davon. Von Neumann kam 1943 als Berater. Seine mathematischen Fähigkeiten waren legendär. Das ENIAC-Projekt in Philadelphia sollte die Berechnungen beschleunigen.

Neumann János Lajos → John von Neumann Sprach 7 Sprachen fließend Legendäre Anekdoten über sein Gedächtnis Arbeitete am Manhattan-Projekt mit

ENIAC (1945) Electronic Numerical Integrator and Computer University of Pennsylvania

Kam zu spät für Manhattan-Projekt (Krieg war vorbei) Aber bewies: Elektronische Berechnung möglich Programmiert durch 6 Frauen (ENIAC Girls) → Erste ProgrammiererInnen der Geschichte

John von Neumann beschrieb 1945 das Prinzip im "First Draft of a Report on the EDVAC". Vorher (ENIAC): Programme durch Umstecken von Kabeln – tagelange Arbeit für jedes neue Problem. Nachher: Programme als Daten im Speicher – austauschbar in Sekunden. Das Revolutionäre: Programme liegen im selben Speicher wie Daten. Das klingt selbstverständlich, war aber ein Paradigmenwechsel. Vorher war ein Computer eine Maschine für genau ein Problem. Der "Von-Neumann-Flaschenhals": CPU und Speicher teilen sich einen Bus – die Bandbreite begrenzt die Geschwindigkeit. Moderne CPUs umgehen das mit Caches (L1/L2/L3).

VON-NEUMANN-ARCHITEKTUR (1945): Grundlage aller modernen Computer 5 KOMPONENTEN: - ALU (Arithmetic Logic Unit): Rechnet (+, -, ×, ÷) und vergleicht (>, <, =) - Steuerwerk: Holt Befehle, dekodiert sie, steuert Ausführung (Fetch-Decode-Execute) - Speicherwerk: RAM (flüchtig) + ROM (permanent), enthält Code UND Daten - Ein-/Ausgabe (I/O): Tastatur, Maus, Bildschirm, Netzwerk, USB, Sensoren - Bus-System: Adressbus (wo), Datenbus (was), Steuerbus (wie) KERNPRINZIP: Stored Program Concept - Programme im selben Speicher wie Daten VORHER (z.B. ENIAC): Programme durch Umstecken von Kabeln, tagelange Arbeit NACHHER: Programme als austauschbare Daten → Flexibilität, Software-Industrie möglich PRÜFUNGSRELEVANT: 5 Komponenten benennen und erklären können, Stored Program Concept

BEDEUTUNG VON-NEUMANN-ARCHITEKTUR: - Betriebssystem möglich: Lädt verschiedene Programme aus gleichem Speicher - Apps installierbar: Können gelöscht/installiert werden ohne Hardware-Änderung - Multitasking: Mehrere Programme gleichzeitig im Speicher - Updates: Software austauschbar, Hardware bleibt gleich - Universalrechner: Gleiche Hardware für Text, Spiele, Video, Wissenschaft HARVARD-ARCHITEKTUR (Alternative): - Separate Speicher für Code und Daten - Vorteil: Schneller (paralleler Zugriff), sicherer (Code nicht überschreibbar) - Nachteil: Weniger flexibel, aufwändiger - Anwendung: Mikrocontroller (Arduino, ESP32), DSPs, einige ARM-Chips MODERNE CPUs: Modified Harvard (L1-Cache getrennt für Speed, RAM gemeinsam für Flexibilität) PRÜFUNGSRELEVANT: Warum Von-Neumann revolutionär, Unterschied zu Harvard, Beispiele

Grace Hopper, ca. 1984 US Navy

Compiler: Übersetzt menschenlesbare Sprache in Maschinencode COBOL läuft heute noch auf Bankensystemen "It's easier to ask forgiveness than permission"

KATHLEEN BOOTH (1922–2022): Kathleen Hylda Valerie Booth (geb. Britten), BSc Mathematik (Royal Holloway, London), PhD Applied Mathematics (King's College London). Arbeitete ab 1946 mit Andrew Booth (später ihr Ehemann) am Birkbeck College – eines der kleinsten Computing-Teams Großbritanniens: nur Andrew, Kathleen und Xenia Sweeting. WAS SIE TAT: Kathleen baute die Hardware des ARC (Automatic Relay Calculator) mit auf und entwickelte dann die Programmierarchitektur. 1947 reiste sie mit Andrew nach Princeton, wo sie John von Neumann trafen und die Stored-Program-Architektur kennenlernten. Sie schrieb "Coding for A.R.C." – die erste veröffentlichte Beschreibung einer Assembly-Sprache. Statt roher Binärzahlen (z.B. 10011) konnten Programmierende nun mnemonische Kürzel verwenden (z.B. M -> cR). Ein konzeptioneller Sprung – die erste Abstraktionsschicht zwischen Mensch und Maschine. VOR ASSEMBLER: ENIAC (1943–46) wurde durch physisches Umstecken von Kabeln programmiert – Programmwechsel dauerten Tage. Danach kamen Stored-Program-Computer, aber Programme mussten als rohe Binärzahlen eingegeben werden. Jeder Tippfehler in einer 0/1-Folge konnte den Befehl komplett verfälschen. WEITERE LEISTUNGEN: - Mitentwicklung von Booth's Multiplication Algorithm (heute in Milliarden CPUs) - Pionierin der neuronalen Netze (1958/59 – nur ~4 Jahre nach den allerersten) - Erste öffentliche Demonstration maschineller Übersetzung (Französisch→Englisch, 1955) - Wurde 100 Jahre alt ROLLERCOASTER TYCOON: Chris Sawyer, schottischer Entwickler, schrieb RCT zu 99% in x86-Assembly (MASM), nur 1% C für Windows-Schnittstellen. Warum? Assembler war seine "Muttersprache" seit Kindheit, und Performance war kritisch: Tausende Besucher mit eigenem Verhalten, Fahrgeschäfte, Pathfinding – alles in Echtzeit. Das Spiel lief auf einem Pentium 90 MHz mit 16 MB RAM. Sawyer verdiente ca. 30 Mio. Dollar an Royalties und hat über 700 Achterbahnen weltweit selbst gefahren.

Margaret Hamilton mit dem Quellcode der Apollo-Flugsoftware, 1969 MIT/NASA

Das Foto zeigt sie neben dem ausgedruckten Quellcode – größer als sie selbst Die Software priorisierte kritische Aufgaben automatisch 2016 erhielt sie die Presidential Medal of Freedom

Aktuelle Beispiele (in Reihenfolge der Folie): 1. Big Data / Palantir: US-Firma liefert Überwachungssoftware an Polizei und Geheimdienste. In Deutschland nutzen es bereits Hessen, NRW, Bayern und Baden-Württemberg. Kritiker warnen vor "Rasterfahndung auf Knopfdruck". Quellen: https://www.zdfheute.de/politik/deutschland/palantir-einsatz-polizei-deutschland-alternative-100.html https://www.heise.de/en/news/Baden-Wuerttemberg-decides-on-the-use-of-Palantir-11075477.html 2. KI-Systeme: Algorithmen entscheiden über Kreditvergabe, Bewerbungen, Sozialleistungen. Oft intransparent, oft diskriminierend. Beispiel: Niederlande "Toeslagenaffaire" – Steuerbehörde nutzte Algorithmus, der Familien mit Migrationshintergrund systematisch als Betrüger einstufte. Regierung Rutte trat 2021 zurück. Quelle: https://netzpolitik.org/2021/kindergeldaffaere-niederlande-zahlen-millionenstrafe-wegen-datendiskriminierung/ 3. Social Media: 2026 verloren Meta und Google einen Prozess in Kalifornien – ihre Plattformen schädigen nachweislich die psychische Gesundheit Minderjähriger. Quelle: https://www.latimes.com/california/story/2026-03-25/social-media-lawsuit-trial-meta-google-verdict 4. PimEyes/Clearview: Gesichtserkennungsdienste mit Milliarden Fotos aus dem Internet. Februar 2024: Ein Journalist fand RAF-Terroristin Daniela Klette in 30 Minuten – die Polizei hatte 30 Jahre gesucht. Beide Dienste gelten in der EU als illegal. Quelle: https://netzpolitik.org/2024/nancy-faeser-was-das-innenministerium-zur-gesichtserkennung-plant/ Weitere Beispiele: Cambridge Analytica (2018): Facebook-Daten von 87 Mio. Nutzern wurden für politische Werbung genutzt. Ob das tatsächlich Wahlen beeinflusst hat, ist umstritten – die Firmen behaupten es gerne, Belege fehlen. China Social Credit System: Punktesystem für "gutes Verhalten". Wer zu oft bei Rot geht, bekommt keinen Kredit mehr. Die Frage: Wer entscheidet, was mit Technologie gemacht wird? Die Entwickelnden? Die Firmen? Die Politik? Wir alle?

Sputnik-Schock (4. Oktober 1957): Die Sowjetunion schießt den ersten künstlichen Satelliten ins All – "Sputnik 1". Die USA sind schockiert: Wenn die Sowjets Satelliten in den Orbit bringen können, können sie auch Atomwaffen über Kontinente schießen. Die gefühlte technologische Überlegenheit der USA ist über Nacht zerstört. Reaktion: Präsident Eisenhower gründet 1958 ARPA (Advanced Research Projects Agency) im Pentagon. Auftrag: Die USA sollen nie wieder technologisch überrascht werden. ARPA finanziert Grundlagenforschung an Universitäten – daraus entsteht später das Internet. Paul Baran (RAND Corporation, 1964): Entwickelt das Konzept des "Packet Switching". Statt einer durchgehenden Verbindung (wie beim Telefon) werden Nachrichten in kleine Pakete zerlegt. Jedes Paket wird unabhängig durchs Netz geroutet. Fällt ein Knoten aus, finden die Pakete einen anderen Weg. Das macht das Netz resilient gegen Angriffe. Parallel und unabhängig: Donald Davies am britischen National Physical Laboratory entwickelt dasselbe Konzept und prägt den Begriff "Packet Switching". ARPA wird später zu DARPA (Defense Advanced Research Projects Agency) umbenannt.

ARPANET: 4 Knoten anfangs Erste Nachricht: "LO" (Login, Absturz nach 2 Buchstaben!) WWW ≠ Internet (WWW ist eine Anwendung AUF dem Internet)

ARPANET-Karte 1969 4 Knoten: UCLA, Stanford, UCSB, Utah

CERN = Europäische Organisation für Kernforschung Berners-Lee wollte Forschungspapiere verlinken WWW war NICHT kommerziell geplant! Kostenlos freigegeben → darum existiert es

Unterseekabel-Karte: Über 400 Kabel verbinden die Kontinente. Quelle: TeleGeography Submarine Cable Map

Google, Meta, Microsoft besitzen eigene Kabel Sabotage-Risiko (Russland, Anker) Latenz: Frankfurt → New York = ~80ms Five Eyes: Geheimdienstallianz aus dem Zweiten Weltkrieg (UKUSA-Abkommen, 1946). Die fünf Länder teilen systematisch Überwachungsdaten. 2013 durch Edward Snowden enthüllt: NSA und GCHQ zapfen Unterseekabel direkt an (Programm "Tempora" des GCHQ, "Upstream" der NSA). Über diese Kabel läuft fast der gesamte internationale Internetverkehr – wer sie anzapft, kann potenziell alles mitlesen. Erweiterte Allianzen: Nine Eyes (+Dänemark, Frankreich, Niederlande, Norwegen), Fourteen Eyes (+Deutschland, Belgien, Italien, Spanien, Schweden). Deutschland ist also kein Five-Eyes-Mitglied, aber Teil der Fourteen Eyes. Der BND kooperiert eng mit der NSA (Operation Eikonal: BND leitete Daten vom Frankfurter Internetknoten DE-CIX an die NSA weiter).

Bit = Binary Digit Demonstration: Glühbirne AN/AUS = 1 Bit

Alles Digitale basiert darauf Transistoren in CPUs: Milliarden Bits schalten Millionen Mal pro Sekunde Shannon: Begründer der Informationstheorie

BYTE = Wortspiel aus "Bit" + "Bite" (Bissen) — Begriff geprägt von Werner Buchholz (IBM, 1956) Schreibweise mit "y" statt "i": bewusste Änderung zur Vermeidung von Verwechslung mit "Bit" binary 00101010 = decimal 42

- 1964: IBM System/360 setzte den 8-Bit-Byte-Standard — vorher 6-Bit/7-Bit-Systeme - ASCII (1963) brauchte 7 Bit für 128 Zeichen - 8 Bit = praktisch für Hardware (Zweierpotenz: 2³ = 8) - 8 Bit = 2 Hexadezimalziffern (elegante Darstellung) - Kleinste adressierbare Einheit im Speicher: Prozessor kann nicht einzelne Bits direkt ansprechen, immer Bytes

1 Byte ist limitiert Farbbild: Rot + Grün + Blau 256³ = 16.777.216 Farben

Kernidee: jedes Byte lässt sich sauber in zwei 4-Bit-Hälften (Nibbles) zerlegen. Jede Hälfte hat 2⁴ = 16 Zustände – und genau 16 Symbole hat Hex (0-F). Deshalb passt Hex perfekt: 1 Nibble = 1 Hex-Ziffer, 1 Byte = 2 Hex-Ziffern. Keine krumme Umrechnung.

Warum gerade 8 Bit? - CPU adressiert byteweise — kleinste adressierbare Einheit - Halbe Byte (z.B. 0x0000.5) existieren nicht - Speichercontroller, Bus, CPU-Register sind alle auf 8-Bit-Häppchen ausgelegt - Einzelne Bit lesen: erst Byte holen, dann mit Bitmaske isolieren (byte & 0b1000_0000) - Hardware-Geschichte: IBM System/360 (1964) setzte 8-Bit-Standard, 7-Bit-ASCII + 1 Paritätsbit

# Zahlensysteme **Eine Ziffer — wie viele Werte?** | System | Basis | Ziffern | Beispiel | |--------|-------|---------|----------| | **Dezimal** | 10 | 0-9 | `42` = 4×10 + 2 | | **Binär** | 2 | 0-1 | `101010` = 42 | | **Hexadezimal** | 16 | 0-F | `2A` = 2×16 + 10 | → Alle drei beschreiben dieselbe Zahl: **42**

Dezimal = was wir im Alltag nutzen (10 Finger → 10 Ziffern) Binär = was Computer nutzen (Strom an/aus → 2 Zustände) Hexadezimal = Kompromiss: kompakter als Binär, aber passt perfekt auf Bytes (2 Hex-Ziffern = 1 Byte = 8 Bit) Die Basis bestimmt, wie viele Symbole pro Stelle zur Verfügung stehen: - Dezimal: 10 (0–9) - Binär: 2 (0, 1) - Hex: 16 (0–9 + A–F, wobei A=10, B=11, ..., F=15)

Hex = Shortcut für Menschen 1 Byte = 2 Hex-Ziffern (00-FF) "Nibble" = 4 Bits = halbes Byte (Wortspiel: nibble = knabbern, byte = beißen) CSS (Cascading Style Sheets)-Farben nutzen Hex: #FF0000 = Rot

1 Byte = 8 Bit = 2 Hex-Ziffern = 1 ASCII-Zeichen - Dieselbe Datei, drei Schreibweisen - Jeder Rahmen = ein Byte - Byte ändern sich nicht, nur unsere Anzeige - ↵ (0x0A) = nicht druckbar → Hex-Editoren zeigen . als Platzhalter

Dieselben 8 Byte (PNG-Dateianfang: 89 50 4E 47 0D 0A 1A 0A) — drei Perspektiven: 1. Bitstream — was wirklich gespeichert wird (unleserlich) 2. Hex — gruppiert in 8-Bit-Häppchen (kompakt) 3. Bedeutung — was die Byte signalisieren: - 89: Magic Byte (>127 → "ich bin Binärdatei") - 50 4E 47: P N G (ASCII-Format-Kürzel) - 0D 0A 1A 0A: CR LF EOF LF (erkennt kaputte Übertragung)

Präfixe: - 0x = "das ist Hexadezimal" (C, JavaScript, Python) - U+ = Unicode-Codepoint (Standard für Zeichenkodierung) - # = CSS (Cascading Style Sheets)-Konvention für Farben ABKÜRZUNGEN: - MAC = Media Access Control (eindeutige Hardware-Adresse einer Netzwerkkarte) - CSS = Cascading Style Sheets - Unicode = universeller Zeichensatz für alle Schriftsysteme Speicheradressen erklärt: - 64-Bit-System → Adresse hat 64 Bit = 16 Hex-Ziffern - Beispiel vollständig: 0x0000000000A04F20 ^^^^^^^^^^ └── führende Nullen, meist ungenutzt - Tools kürzen zu: 0xA04F20 (führende Nullen weggelassen) - "0x" = Präfix, sagt nur "jetzt kommt Hex" MAC-Adresse = eindeutige Hardware-ID der Netzwerkkarte Fehlercodes: Windows zeigt diese bei Bluescreens

Bits = kleines b, Bytes = großes B Internetanbieter: Mbit/s (klingt größer!) 100 Mbit/s ÷ 8 = 12,5 MB/s Warum? Marketing - 100 klingt besser als 12,5

HTML = Auszeichnungssprache (wie Markdown) Erfunden 1989 von Tim Berners-Lee Aktuelle Version: HTML5 (seit 2014)

HEAD-BEREICH: Metadaten, nicht sichtbar im Browser-Fenster WICHTIGE META-TAGS: - <title>: Browser-Tab, Lesezeichen, Suchergebnis-Titel - <meta name="description">: Suchergebnis-Snippet (max. 160 Zeichen) - <meta name="viewport">: Mobile Darstellung (width=device-width) - <meta charset="UTF-8">: Zeichenkodierung (Umlaute!) OPEN GRAPH (og:*): Social Media Vorschau (Facebook, LinkedIn, WhatsApp) - og:title, og:description, og:image, og:url TWITTER CARDS: twitter:card, twitter:title, twitter:image SEO-RELEVANZ: Google nutzt title + description für Ranking und Snippet ACCESSIBILITY: <html lang="de"> für Screenreader-Aussprache PRÜFUNGSRELEVANT: Was gehört in <head>, Unterschied zu <body>, wichtigste Meta-Tags

Semantische Tags wichtig für Accessibility h1 sollte nur einmal pro Seite vorkommen a = anchor (Anker)

--- # Hands-On: Werkzeuge einrichten **Option 1: Texteditor + Browser** - Notepad, TextEdit oder DreamWeaver - Speichern als `index.html` → Im Browser öffnen **Option 2: VS Code** (empfohlen) - [https://code.visualstudio.com](https://code.visualstudio.com) - Extension: "Live Server" **Option 3: Online-Editoren** - [https://codepen.io/pen/](https://codepen.io/pen/)

Progressive Enhancement HTML kann mehr als die meisten denken JavaScript nur wenn wirklich nötig Accessibility ist eingebaut

ACCESSIBILITY (a11y): a + 11 Buchstaben + y STATISTIK: ~15% der Weltbevölkerung haben eine Behinderung (WHO) ARTEN VON EINSCHRÄNKUNGEN: - Permanent: Blindheit, Taubheit, motorische Einschränkungen - Temporär: Gebrochener Arm, Augen-OP, Ohrenentzündung - Situativ: Helle Sonne (Kontrast), laute Umgebung (kein Audio), Baby auf Arm (eine Hand) ASSISTIVE TECHNOLOGIEN: - Screenreader: NVDA (Windows, kostenlos), VoiceOver (Apple), JAWS (kommerziell) - Braillezeilen: Taktile Ausgabe für Blinde - Switch-Geräte: Für motorische Einschränkungen - Spracheingabe: Dragon NaturallySpeaking, Siri, Google Assistant WCAG: Web Content Accessibility Guidelines (A, AA, AAA) EUROPEAN ACCESSIBILITY ACT: Seit Juni 2025 verpflichtend! PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG

RECHTLICHER RAHMEN: - European Accessibility Act (EAA): EU-Richtlinie, seit 28. Juni 2025 in Kraft - Betrifft: E-Commerce, Banking, Telekommunikation, Transport, E-Books - BITV 2.0: Barrierefreie Informationstechnik-Verordnung (DE, öffentliche Stellen) - BFSG: Barrierefreiheitsstärkungsgesetz (DE-Umsetzung des EAA) - Strafen: Bis zu 100.000€ Bußgeld möglich CURB-CUT-EFFEKT: - Bordsteinabsenkung für Rollstuhlfahrer → hilft auch Kinderwagen, Rollkoffern, Fahrrädern - Untertitel für Gehörlose → helfen in lauter Umgebung, beim Sprachlernen - Kontrastreiche Farben → besser bei Sonnenlicht, für ältere Menschen BUSINESS CASE: - 15% Zielgruppe (Menschen mit Behinderung) - +20% ältere Menschen (Sehschwäche, motorische Einschränkungen) - SEO-Vorteile: Alt-Texte, semantisches HTML = besser für Google PRÜFUNGSRELEVANT: EAA kennen, Curb-Cut-Effekt erklären können, Business Case

WCAG vom W3C (World Wide Web Consortium) Aktuelle Version: WCAG 2.2 (2023) Level: A (minimal), AA (Standard), AAA (optimal) Gesetzlich meist Level AA gefordert

Leeres alt="" für dekorative Bilder Contrast-Checker: WebAIM Contrast Checker Captions ≠ Untertitel (Captions = auch Geräusche beschrieben)

Tab-Reihenfolge = DOM-Reihenfolge Skip-Links: "Zum Hauptinhalt springen" :focus-visible = nur bei Tastatur-Navigation

Screenreader nutzen lang für korrekte Aussprache Konsistenz reduziert kognitive Last Fehlermeldungen: konkret, hilfreich, am Feld

ARIA = Accessible Rich Internet Applications Erste Regel von ARIA: Wenn möglich, natives HTML nutzen! button hat eingebaute Tastatur-Unterstützung div-Button braucht JavaScript für Enter/Space

Aufgabe: hdm-stuttgart.de öffnen, Maus/Touchpad weglegen. Nur mit Tab/Shift+Tab/Enter/Pfeiltasten navigieren. Fokus-Indikator immer sichtbar? Logische Reihenfolge? Alle Elemente erreichbar?

WAVE Tab-Reihenfolge: visualisiert DOM-Reihenfolge als Tab-Pfad. Wenn Pfad kreuz und quer → schlechte Struktur für Tastatur-/Screenreader-Nutzende.

Automatische Tests finden ~30% der Probleme Manuelles Testen unverzichtbar Echte NutzerInnen einbeziehen = Gold-Standard