public/uni

Files

bit/byte/hex folien sync beide kurse + neue viz embeds

223015c (internettechnik):
- byte-aufbau ausgebaut (build-up tabelle 0..127..255 wie b)
- neue slides: why-8-bit, byte-flow, three-views nach byte-nibble-hex/hex-dec-table

223015b (dateiformate):
- byte-nibble-hex slide eingebaut
- neue slides: why-8-bit (vor hex-lead), hex-dec-table, byte-flow, three-views
- wo-begegnet-hex tabelle (CSS, MAC, fehlercodes, speicher, unicode)
- bit-vs-byte verwirrung (Mbit/s vs MB/s)

konvention: 'Byte' und 'Bit' invariant, kein plural-s

2026-04-26 22:05:32 +02:00

55 KiB

Raw Blame History

marp, theme, paginate, backgroundColor, header, footer, title

marp	theme	paginate	backgroundColor	header	footer	title
true	gaia	true		Grundlagen IT- und Internettechnik (223015c)	Michael Czechowski – HdM Stuttgart – SoSe 2026	Kapitel 1: Geschichte, Grundlagen & HTML

Grundlagen IT- und Internettechnik

223015c · Modul "Technik 1" · 1. Semester Digital- und Medienwirtschaft Hochschule der Medien Stuttgart

Sommersemester 2026

https://librete.ch/hdm/223015c/

Kursübersicht

Kapitel:

Geschichte, Grundlagen & HTML
Netzwerke, Protokolle, semantisches HTML & CSS
Interaktivität, Animationen & JavaScript

Ziel: "Gelernte Hilflosigkeit" ablegen

Ressourcen zum Selbstlernen

CODE CRISPIES: https://codecrispi.es/
Online Code-Editor: https://codepen.io/pen/
MDN (Mozilla Developer Network): https://developer.mozilla.org/de/
Flexbox-Spiel: https://flexboxfroggy.com/
Grid-Spiel: https://cssgridgarden.com/

Kapitel 1

Geschichte, Grundlagen & HTML

Die Geschichte des Computers

Vom ersten Algorithmus bis zum globalen Netzwerk

Ada Lovelace (1815–1852)

Die erste Programmiererin der Welt

Erste Programmiererin – 100 Jahre vor dem ersten Computer
Zusammenarbeit mit Charles Babbage an der Analytical Engine
Ihre Notizen: umfangreicher als sein Originaltext
Erst 1953 wiederentdeckt und gewürdigt

Herman Hollerith (1860–1929)

Erfinder der Lochkarten-Datenverarbeitung

Problem: Volkszählung 1880 brauchte 7 Jahre zur Auswertung
Lösung: Lochkarten + elektromechanische Tabelliermaschine
Ergebnis: 1890 Census in 2,5 Jahren – 5 Mio. Dollar gespart
Gründete Firma, die später zu IBM wurde

Die Geburt von IBM

Vom Einmannbetrieb zum Technologieriesen

1896: Hollerith gründet Tabulating Machine Company
1911: Fusion zur Computing-Tabulating-Recording Company (CTR)
1924: Umbenennung in International Business Machines (IBM)
Dominiert die nächsten 50 Jahre die Computerwelt

IBM und NS-Deutschland

Technologie im Dienst des Terrors

Dehomag: Deutsche Hollerith-Maschinen GmbH (IBM-Tochter)
Volkszählung 1933: Identifikation von Juden
Verwaltung der Konzentrationslager
Logistik der Deportationen

→ Edwin Black: "IBM and the Holocaust" (2001)

Vom Ende des Zweiten Weltkriegs

Geburt des modernen Computers

Alan Turing (1912–1954)

Begründer der theoretischen Informatik

1936: Turing-Maschine – definiert, was Computer können (und was nicht)
1940er: Enigma-Entschlüsselung mit elektromechanischen Maschinen
1950: Turing-Test – erste formale Definition von "Künstlicher Intelligenz"

Das Manhattan-Projekt (1942–1945)

Problem: Millionen von Berechnungen nötig für:

Ballistik-Berechnungen
Implosions-Simulationen
Nuklearphysik-Gleichungen

Lösung 1943: Menschliche "Computer" → Mathematikerinnen mit Taschenrechnern & IBM-Lochkarten

Zu langsam → Bedarf an automatischer Berechnung

Schlüsselfigur: John von Neumann (Mathematik & Stoßwellen)

John von Neumann (1903–1957)

Geboren in Budapest, Österreich-Ungarn
Mit 8: Konnte Telefonbücher auswendig
Mit 22: Doktor in Mathematik

Beiträge:

Quantenmechanik
Spieltheorie
Computerarchitektur

ENIAC (1945)

Electronic Numerical Integrator and Computer

30 Tonnen, 167 m² Fläche
18.000 Vakuumröhren
5.000 Additionen pro Sekunde
Programmierung durch Umstecken von Kabeln

Problem: Bei jedem neuen Problem → Wochen Umverkabelung

Von-Neumann-Architektur (1945)

Die zentrale Idee: Programme und Daten im selben Speicher

Vorher (z.B. ENIAC): Programme durch Umstecken von Kabeln → Tagelange Arbeit für jedes neue Problem

Nachher: Programme als austauschbare Daten im Speicher → Grundlage aller Computer: Laptop, Smartphone, Server

Von-Neumann: 5 Komponenten

Komponente	Funktion	Heute
Rechenwerk (ALU)	Führt Berechnungen durch	Teil der CPU
Steuerwerk	Interpretiert Befehle, steuert Ablauf	Teil der CPU
Speicherwerk	Speichert Programme UND Daten	RAM + SSD
Ein-/Ausgabe	Tastatur, Bildschirm, Netzwerk	USB, WiFi, HDMI
Bus-System	Verbindet alle Komponenten	PCIe, SATA, DDR

Kernprinzip: Programme und Daten teilen sich denselben Speicher. → Computer wird universell programmierbar (nicht mehr für ein Problem verdrahtet)

Bus = Adressbus (wohin?) + Datenbus (was?) + Steuerbus (lesen/schreiben?)

Von-Neumann-Architektur: Bedeutung

Ohne Von-Neumann-Architektur:

Kein Betriebssystem
Keine Apps
Kein Multitasking
Keine Updates bzw. Veränderungen am Computer System

Die meisten Computer basieren auf diesem Prinzip: Laptop, Smartphone, Server, Spielkonsole...

Ausnahme: Mikrocontroller & DSPs nutzen oft die Harvard-Architektur (separate Speicher für Code und Daten → schneller für Echtzeitanwendungen)

Grace Hopper (1906–1992)

"Amazing Grace" – Pionierin der Softwareentwicklung

1944: Programmierte den Mark I (Harvard)
1952: Entwickelte den ersten Compiler (A-0)
1959: Mitentwicklung von COBOL
Rear Admiral der US Navy

Der erste "Bug": 1947 fand sie eine echte Motte im Mark II → "Debugging" wurde zum Begriff

Kathleen Booth (1922–2022)

Die erste Stufe über Maschinencode

Entwickelt am Birkbeck College, London
Mnemonische Befehle statt Binärzahlen (MOV, ADD, JMP)
Jeder Befehl entspricht direkt einer CPU-Instruktion
Hardwarenah, aber für Menschen lesbar

Fun Fact: Chris Sawyer schrieb RollerCoaster Tycoon (1999) fast komplett in x86-Assembly

Margaret Hamilton (*1936)

Pionierin des Software Engineering

1965–1969: Leitete das Software-Team am MIT für Apollo
Entwickelte die Flugsoftware für Apollo 11
Prägte den Begriff "Software Engineering"
Software verhinderte Abbruch der Mondlandung

Apollo 11 (1969): Ihre Fehlererkennung rettete die Mission, als der Computer überlastet wurde

Lektionen für heute

Technologie ist nie neutral

Big Data ermöglicht Massenüberwachung
KI-Systeme übernehmen Entscheidungen über Menschen
Social Media schädigt nachweislich die psychische Gesundheit Minderjähriger
PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre

→ Verantwortung liegt bei denen, die Technologie bauen, einsetzen und regulieren

Vom Militär zum Netz

Die Entstehung des Internets

Kalter Krieg: Das Problem der Kommunikation

1957: Sputnik-Schock → USA investiert massiv in Forschung → ARPA (Advanced Research Projects Agency) wird gegründet

Das Problem: Zentrale Netzwerke sind verwundbar → Ein Treffer = gesamte Kommunikation tot

Die Idee (Paul Baran, 1964): Packet Switching → Nachrichten in kleine Pakete aufteilen → Jedes Paket findet seinen eigenen Weg → Kein einzelner Punkt kann das Netz zerstören

Internet-Timeline

Jahr	Meilenstein
1966	ARPANET-Projekt startet
1969	Erste Verbindung: UCLA <-> Stanford
1974	TCP/IP-Protokoll entwickelt
1983	ARPANET wechselt zu TCP/IP
1989	Tim Berners-Lee erfindet das WWW
1993	Erster grafischer Browser (Mosaic)
1995	Kommerzialisierung, Amazon/eBay gegründet

Das WWW (1989)

Tim Berners-Lee am CERN (Genf)

Problem: WissenschaftlerInnen können Dokumente nicht verlinken

Lösung:

HTML – Auszeichnungssprache für Dokumente
HTTP – Protokoll zum Übertragen
URL – Eindeutige Adressen

1991: Erste Webseite geht online

1,3 Millionen Kilometer Unterseekabel

Heute:

5,5 Milliarden Menschen online
>400 Unterseekabel weltweit
Daten reisen mit Lichtgeschwindigkeit (Glasfaser)

Keine "Cloud" ohne Kabel – das Internet ist physische Infrastruktur.

Five Eyes (USA, UK, Kanada, Australien, Neuseeland): → Zapfen Unterseekabel an – globale Massenüberwachung

Bit & Byte

Die Sprache der Computer

Das Bit

Kleinste logische Informationseinheit

0 oder 1
AN oder AUS
Strom fließt oder nicht

BIT = Binary DigIT (Binärziffer) Geprägt 1948 von Claude Shannon

Das Byte

Die kleinste adressierbare Informationseinheit

8 bit = 1 Byte

0 0 1 0 1 0 1 0                                                                              = 42

Das Byte

8 bit = 1 Byte

0 0 0 0 0 0 0 0                                                                               = 0
0 0 0 0 0 0 0 1                                                                               = 1
0 0 0 0 0 0 1 0                                                                               = 2
0 0 0 0 0 0 1 1                                                                               = 3
0 0 0 0 0 1 0 0                                                                               = 4

0 1 0 0 0 0 0 0                                                                               = 64
0 1 1 1 1 1 1 1                                                                               = 127
1 1 1 1 1 1 1 1                                                                               = ?

2 × 2 × 2 × 2 × 2 × 2 × 2 × 2 = 2⁸ = 256 mögliche Zustände

Was kann man mit 256 Zuständen machen?

256 Zeichen (Buchstaben, Zahlen, Symbole)
256 Graustufen (0 = Schwarz, 255 = Weiß)
256 Lautstärkestufen
Zahlen 0-255

Für Farbe: 3 Bytes pro Pixel (RGB) R=0-255, G=0-255, B=0-255 → 16,7 Millionen Farben

Hexadezimal: Lesbarkeit

Für den Menschen ungeeignet: 01001101 01010000 00110011

Hexadezimal (Base 16): 4D 50 33 (= "MP3" in ASCII)

Jede Hex-Ziffer = 4 Bits (ein "Nibble") 0-9, A-F (A=10, B=11, ..., F=15)

4 = 0100 D = 1101 5 = 0101 0 = 0000 3 = 0011 3 = 0011

Wo begegnet Ihnen Hex-Code?

Kontext	Beispiel
CSS-Farben	`#FF5733`
MAC-Adressen	`00:1A:2B:3C:4D:5E`
Fehlercodes	`0x80070005`
Speicheradressen	`0xA04F20`
Unicode	`U+00E4` (ä)

Bit vs. Byte: Die Verwirrung

1 Byte = 8 Bit → Bit ÷ 8 = Byte

Einheit (Bit)	Einheit (Byte)
1 Kbit = 1.000 Bit	1 KB = 1.000 Byte = 8.000 Bit
1 Mbit = 1.000.000 Bit	1 MB = 1.000.000 Byte = 8 Mbit
1 Gbit = 1 Mrd. Bit	1 GB = 1 Mrd. Byte = 8 Gbit

100 Mbit/s Bandbreite = 12,5 MB/s Downloadrate

Unsere erste Webseite

HTML-Grundlagen

Was ist HTML? (1/2)

HyperText Markup Language

Keine Programmiersprache
Am ehesten eine Formattierungssprache

Beschreibt Struktur und Aufbau einer Webseite

<p>Das ist ein Absatz.</p>

<input type="date"/>

Was ist HTML? (2/2)

Mit HTML werden HTML-Dokumente beschrieben (bspw. index.html)
Ein HTML-Dokument beschreibt das/den Document Object Model (DOM)
Der DOM ist eine hierarchische Baumstruktur (Kind- und Elternelemente)
- parent nodes / elements
- child nodes / elements
- sibling nodes / elements
- Während wir in HTML von Elementen bzw. elements sprechen, so werden sie in JavaScript (JS) eher als nodes gelesen.

HTML-Anatomie (1/2)

Formattierungssprache

HTML folgt einer strengen Syntax zur Formattieren von digitalen Inhalten
- Syntax: <element attribute="value"> ... </element>
- Öffnende und schließende HTML-Tags müssen identisch sein
- Das schließende Tag muss ein / nach der Spitzenklammer haben

HTML-Anatomie (2/2)

Wir unterscheiden zwischen umschließende und selbst-schließende HTML-Tags
- Umschließend
  - <b> ... </b> fett-gedruckter Text (inline)
  - <a> ... </a> Hyperlink (Verlinkung zu anderen Webseiten, Bildern)
  - <body> ... </body> Sichtbarer Teil eines HTML-Dokuments
  - <details> ... </details> Collapsable / Akkordion / Aufklapp-Text
- Selbst-schließend
  - <img /> Bild, Vektorgrafik etc.
  - <input /> Eingabefeld
  - <meta /> Metadaten

Darstellungsebene und Metadaten

<html>
  <head>
    METADATEN
  </head>
  
  <body>
    DARSTELLUNGSEBENE
  </body>
</html>

Ein HTML-Dokument besteht grundsätzlich aus zwei Teilen:
- <head> ... </head> Metadaten für den Browser, zum Teilen, für Suchmaschinen
- <body> ... </body> Darzustellender Inhalt, Text, Formulare

HTML Metadaten

<html>
  <head>
    <title>HdM Webseite - Hochschule der Medien</title>
    <meta name="description" content="Studieren. Wissen. Machen." />
    <meta name="og:image" content="https://...." />
    ...
  </head>
  ...
</html>

Webseiten besuchen nicht nur Menschen, sondern auch Suchmaschinen, Bots, Screen-Reader. Metadaten helfen beim "Verstehen" der Inhalte.

HTML Metadaten – Vertiefung

Der <head>-Bereich enthält Informationen über das Dokument, nicht den sichtbaren Inhalt. Diese Metadaten steuern Browser-Verhalten, Suchmaschinen-Indexierung und Social-Media-Vorschauen.

Kritische Meta-Tags:

Tag	Funktion	Beispiel
`<title>`	Browser-Tab, Suchergebnis-Titel	`<title>HdM Stuttgart</title>`
`<meta charset>`	Zeichenkodierung (Umlaute!)	`<meta charset="UTF-8">`
`<meta viewport>`	Mobile Darstellung	`width=device-width, initial-scale=1`
`<meta description>`	Suchergebnis-Snippet (max 160 Zeichen)	SEO-kritisch

Open Graph Protocol (Ehemals Facebook, 2010):

<meta property="og:title" content="Artikel-Titel">
<meta property="og:image" content="https://example.com/preview.jpg">

Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack ...

SEO-Relevanz: Google nutzt <title> und <meta description> für Ranking und Snippet-Anzeige. Fehlende Metadaten = schlechtere Auffindbarkeit.

HTML-Tags und Attribute

<body>
  <p class="wichtig">Das ist ein wichtiger Absatz.</p>
  <p>Das ist ein gewöhnlicher Absatz.</p>
</body>

Teil	Bezeichnung
`<p>`	Opening Tag (öffnendes Tag)
`class="wichtig"`	Attribut
`Das ist ein wichtiger Absatz.`	Inhalt
`</p>`	Closing Tag (schließendes Tag)

HTML-Tags und Attribute (selbst-schließend)

Geburtsdatum <input type="date" />

Teil	Bezeichnung
`<input ...`	Eingabefeld
`type="date"`	Attribut type mit dem Wert date
`... />`	Schließendes `/` im (öffnenden) Tag enthalten

Vollständiges Grundgerüst

<!DOCTYPE html>
<html lang="de">
<head>
  <title>Portfolio von ...</title>
  <meta name="description" content="Hier gibt es die besten ..." />
  <meta name="og:image" content="https://...." />
</head>
<body>
  <h1>Hallo Welt!</h1>
  <p>Das ist mein erster Absatz.</p>
</body>
</html>

Die wichtigsten Tags

Tag	Bedeutung
`<h1>` bis `<h6>`	Überschriften (h1 = größte)
`<p>`	Absatz (Paragraph)
`<a href="..."> ... </a>`	Hyper-Link
`<img src="..."/>`	Bild
`<ul>`, `<ol>`, `<li>`	Listen
`<div>`	Container/Box
`<span>`	Inline-Container
`<input type="...">`	Eingabefeld/Input

Natives HTML

Was noch üblicherweise mit Skriptsprachen wie JavaScript und anderen umgesetzt werden musste, kann nun HTML selber. Wer dieses dennoch verwendet, hat das einen sog. "Code smell".

Funktion	HTML-Element
Aufklapp-Text	`<details>` + `<summary>`
Popup/Modal	`<dialog>`
Fortschrittsbalken	`<progress>`
Datum-Auswahl	`<input type="date">`
Validierung	Attribute beliebig verknüpfbar `required`, `min`, `max`

Beispiel: Details/Summary

Akkordion · Accordion · Aufklappmenü · Collapsible · Collapsable · Expandible

<details>
  <summary>Klick mich!</summary>
  <p>Dieser Text ist versteckt.</p>
</details>

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Details/Summary (geöffnet)

<details open>
  <summary>Klick mich!</summary>
  <p>Dieser Text war versteckt.</p>
</details>

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Button

<button>Add to favorites</button>

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Input/Eingabefeld

<input
  type="text"
  maxlength="8"
  size="10" />

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

Beispiel: Dialog

Modal · Modales Fenster · Popup · Popup-Fenster · Overlay · Dialogfenster

<dialog open>
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

Dokumentation auf developer.mozilla.org

Code-Beispiel auf codecrispi.es

"Barrierefreiheit"

Wie nutzen Menschen das Web?

Eingabe	Nutzungsweise
Maus	Klicken, Scrollen
Tastatur	Tab-Navigation, Enter, Pfeiltasten
Screenreader	Vorlesen von Inhalten (NVDA, VoiceOver, TalkBack, Orca)
Sprachsteuerung	"Klicke auf Anmelden"
Augensteuerung	Eye-Tracking
Switch-Geräte	Ein-/Aus-Schalter

→ Nicht alle Menschen nutzen Maus oder Touchscreens gleichermaßen.

Web-Zugänglichkeit – Vertiefung

Die WHO schätzt, dass 15% der Weltbevölkerung eine Behinderung haben – das sind über 1 Milliarde potenzielle NutzerInnen.

Arten von Einschränkungen:

Typ	Permanent	Temporär	Situativ
Visuell	Blindheit	Nach Augen-OP	Grelle Sonne
Motorisch	Amputation	Gebrochener Arm	Baby auf dem Arm
Auditiv	Taubheit	Ohrenentzündung	Laute Umgebung
Kognitiv	Legasthenie	Müdigkeit	Ablenkung

Assistive Technologien:

Screenreader: NVDA & Narrator (Windows), VoiceOver (macOS/iOS), TalkBack (Android), Orca (Linux) – überwiegend builtin oder Open Source; JAWS (Windows) kommerziell
Braillezeilen: Taktile Ausgabe, ~40–80 Zeichen
Switch-Geräte: Ein-Knopf-Steuerung für motorische Einschränkungen
Eye-Tracking: Blicksteuerung für Bewegungsunfähige

Screenreader lesen den DOM sequenziell – semantisches HTML (<nav>, <main>, <button>) ermöglicht Navigation per Tastenkürzel.

Warum "Barrierefreiheit"?

Rechtlich:

EU: European Accessibility Act (seit Juni 2025 in Kraft!)
DE: BITV 2.0 (Behörden), Privatwirtschaft betroffen

Ethisch:

Teilhabe für alle Menschen
Digitale Inklusion

Praktisch:

Bessere UX für alle (SEO, Mobile, ältere Menschen, temporäre Einschränkungen)
Größerer Markt (~15% der Bevölkerung)

Rechtliche Anforderungen – Vertiefung

Der European Accessibility Act (EAA) trat am 28. Juni 2025 in Kraft und betrifft erstmals auch private Unternehmen – nicht nur öffentliche Stellen.

Betroffene Sektoren:

E-Commerce (Online-Shops)
Bankdienstleistungen
Telekommunikation
E-Books und E-Reader
Ticketing und Check-in-Terminals

WCAG 2.2 – Konformitätsstufen:

Level	Anforderung	Beispiel
A	Minimum	Alt-Texte für Bilder
AA	Gesetzlicher Standard	Kontrast 4,5:1, Tastaturnavigation
AAA	Optimal	Gebärdensprache für Videos

Sanktionen: Bis zu 100.000 € Bußgeld bei Verstößen

Curb-Cut-Effekt: Barrierefreiheit hilft allen. Bordsteinabsenkungen für Rollstühle nutzen auch Kinderwagen, Rollkoffer, Fahrräder. Untertitel helfen Gehörlosen, aber auch in lauten Umgebungen oder beim Sprachlernen.

WCAG: Der Standard

Web Content Accessibility Guidelines · Herausgeber: W3C / WAI · WCAG 2.2 (Okt. 2023) verbindlich · WCAG 3 Working Draft (März 2026)

4 Prinzipien (POUR):

Prinzip	Bedeutung
Perceivable	Wahrnehmbar – Inhalte müssen erkennbar sein
Operable	Bedienbar – Funktionen müssen nutzbar sein
Understandable	Verständlich – Inhalte müssen klar sein
Robust	Robust – Funktioniert mit verschiedenen Technologien

Konformitätslevel: A · AA (gesetzlicher Standard) · AAA · w3.org/WAI/WCAG22/quickref

Perceivable: Wahrnehmbar

Texte:

Kontrast: Mindestens 4,5:1 für Text
Untertitel: Videos brauchen Captions
Responsive: Inhalte bei 200% Zoom nutzbar

Textalternativen für Nicht-Text:

<img src="tankman.jpg"
     alt="Ein Mann mit Einkaufstüten steht
          allein vor einer Reihe Panzer –
          Tiananmen-Platz, Peking,
          5. Juni 1989">

Operable: Bedienbar

Tastaturzugänglich:

/* Fokus-Ring nur bei Tastatur-Navigation */
button:focus-visible {
  outline: 3px solid #d63384;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Anti-Pattern: Tastatur-Nutzer sind "blind" */
button:focus { outline: none; }

Genügend Zeit: Session-Timeouts ankündigen, Verlängerung ermöglichen

Kein Flackern: max. 3×/Sekunde (schützt vor epileptischen Anfällen)

Understandable: Verständlich

Sprache angeben:

<html lang="de">

Konsistente Navigation: Gleiche Elemente an gleicher Stelle

Fehler erklären:

<input type="email" aria-describedby="email-error">
<p id="email-error" role="alert">
    Bitte geben Sie eine gültige E-Mail-Adresse ein.
</p>

Robust: Technisch solide

Semantisches HTML:

<!-- Schlecht -->
<div class="button" onclick="...">Klick mich</div>

<!-- Gut -->
<button type="button">Klick mich</button>

ARIA nur wenn nötig:

<!-- Nötig: Custom-Komponente -->
<div role="tablist" aria-label="Produktkategorien">
    <button role="tab" aria-selected="true">Schuhe</button>
    <button role="tab" aria-selected="false">Jacken</button>
</div>

Barrierefreiheit testen

Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.

Tastatur-Test – Maus weglegen, nur diese Tasten nutzen:

Barrierefreiheit testen – Werkzeuge

Automatisierte Tools (finden ~30% der Verstöße):

Tool	Typ	Findet
WAVE	Browser-Extension	Kontrast, Struktur, Tab-Reihenfolge
Lighthouse	Chrome DevTools	Performance + A11y-Audit
Pa11y	CLI	CI/CD-Integration
axe DevTools	Browser-Extension (Pro · Profi-Tool)	Detailanalyse, Regel-Engine

Screenreader (OS-nativ oder OSS):

OS	Screenreader	Hinweis
macOS / iOS	VoiceOver (`Cmd + F5`)	builtin
Windows	NVDA · Narrator	NVDA OSS, Narrator builtin
Linux	Orca + espeak-ng	GNOME builtin
Android	TalkBack	builtin

Manueller Test: SR aktivieren, Formular ausfüllen. Einarbeitung nötig – "Augen schließen" bildet echte SR-Nutzung nicht ab.

Gold-Standard: Usability-Tests mit Menschen, die Assistive Technologien täglich nutzen.

Tastatur-Test:

Alle Funktionen sind nur mit Tab + Enter nutzbar
Fokus immer sichtbar: Textlinks, Buttons, Texteingabe etc.
Logische Tab-Reihenfolge: "Skip to main", Navigation, Hauptinhalt

Screenreader-Test:

VoiceOver (Mac): Cmd + F5
NVDA (Windows): Gratis-Download

Tools/Browser-Extensions:

WAVE, axe DevTools, Web Disability Simulator

Fragen & Diskussion

Kontakt: lb-czechowski@hdm-stuttgart.de

Lizenz

Diese Präsentation ist lizenziert unter Creative Commons Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)

Basiert auf Material von:

Michael Czechowski
Markus Thamm / Wolfgang Gruel (HdM Stuttgart)

Vollständige Lizenz: https://creativecommons.org/licenses/by-sa/4.0/

55 KiB Raw Blame History Unescape Escape

Grundlagen IT- und Internettechnik

Kursübersicht

Ressourcen zum Selbstlernen

Kapitel 1

Geschichte, Grundlagen & HTML

Die Geschichte des Computers

Vom ersten Algorithmus bis zum globalen Netzwerk

Ada Lovelace (1815–1852)

Herman Hollerith (1860–1929)

Die Geburt von IBM

IBM und NS-Deutschland

Vom Ende des Zweiten Weltkriegs

Geburt des modernen Computers

Alan Turing (1912–1954)

Das Manhattan-Projekt (1942–1945)

John von Neumann (1903–1957)

ENIAC (1945)

Von-Neumann-Architektur (1945)

Von-Neumann: 5 Komponenten

Von-Neumann-Architektur: Bedeutung

Grace Hopper (1906–1992)

Kathleen Booth (1922–2022)

Margaret Hamilton (*1936)

Lektionen für heute

Vom Militär zum Netz

Die Entstehung des Internets

Kalter Krieg: Das Problem der Kommunikation

Internet-Timeline

Das WWW (1989)

1,3 Millionen Kilometer Unterseekabel

Bit & Byte

Die Sprache der Computer

Das Bit

Kleinste logische Informationseinheit

Das Byte

Die kleinste adressierbare Informationseinheit

8 bit = 1 Byte

Das Byte

8 bit = 1 Byte

Was kann man mit 256 Zuständen machen?

Hexadezimal: Lesbarkeit

Wo begegnet Ihnen Hex-Code?

Bit vs. Byte: Die Verwirrung

Unsere erste Webseite

HTML-Grundlagen

Was ist HTML? (1/2)

Was ist HTML? (2/2)

HTML-Anatomie (1/2)

HTML-Anatomie (2/2)

Darstellungsebene und Metadaten

HTML Metadaten

HTML Metadaten – Vertiefung

HTML-Tags und Attribute

HTML-Tags und Attribute (selbst-schließend)

Vollständiges Grundgerüst

Die wichtigsten Tags

Natives HTML

Beispiel: Details/Summary

Beispiel: Details/Summary (geöffnet)

Beispiel: Button

Beispiel: Input/Eingabefeld

Beispiel: Dialog

"Barrierefreiheit"

Accessibility (a11y)

Wie nutzen Menschen das Web?

Wie nutzen Menschen das Web?

Web-Zugänglichkeit – Vertiefung

Warum "Barrierefreiheit"?

Rechtliche Anforderungen – Vertiefung

WCAG: Der Standard

Perceivable: Wahrnehmbar

Texte:

Textalternativen für Nicht-Text:

Operable: Bedienbar

Understandable: Verständlich

Robust: Technisch solide

Barrierefreiheit testen

Barrierefreiheit testen – Werkzeuge

Barrieren im Netz vermeiden (a11y)

55 KiB

Raw Blame History