public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ec800d28aea2852d22b50ba48a0dad2fc1db111d
uni/slides/223015c/01-geschichte-grundlagen-html.md

54 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
<style> :root { --color-foreground: #1a1a2e; --color-highlight: #d63384; --color-dimmed: #4a4a6a; } section.invert { --color-foreground: #fff; } section { font-size: 1.7rem; } h1 { color: #a02060; /* darker raspberry */ } section.invert h1 { color: #fff; } h2 { color: #1f2937; /* dark gray, almost black */ } pre { background: #0f0f23; color: #d63384; border-radius: 8px; border-left: 3px solid #d63384; } pre code { background: transparent; color: inherit; } code { background: #1a1a2e; color: #d63384; padding: 0.15em 0.4em; border-radius: 4px; } a { color: var(--color-highlight); } section.klausur { background: repeating-linear-gradient( 135deg, #fce4ec, #fce4ec 40px, #fff 40px, #fff 80px ) !important; } @media print { section.klausur { background: #fce4ec !important; } } section.aufgabe { background: #fce4ec !important; } section.aufgabe footer { display: none; } section.erklaerung { font-size: 1.1rem; /**background: repeating-linear-gradient( 135deg, #fce4ec, #fce4ec 40px, #fff 40px, #fff 80px ) !important;**/ } @media print { section.erklaerung { background: #fce4ec !important; } } section.erklaerung h1 { font-size: 1.5rem; color: #a02060; margin-bottom: 0.3rem; } section.erklaerung ul, section.erklaerung ol { font-size: 1.0rem; line-height: 1.4; } section.erklaerung p { font-size: 1.0rem; line-height: 1.4; } section.erklaerung table { font-size: 0.9rem; } </style>

bg fit opacity:0.2

Grundlagen IT- und Internettechnik

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

Sommersemester 2026

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

bg fit

Kursübersicht

Kapitel:

  1. Geschichte, Grundlagen & HTML
  2. Netzwerke, Protokolle, semantisches HTML & CSS
  3. Interaktivität, Animationen & JavaScript

Ziel: "Gelernte Hilflosigkeit" ablegen

Ressourcen zum Selbstlernen

bg cover

bg fit

Kapitel 1

Geschichte, Grundlagen & HTML

Die Geschichte des Computers

Vom ersten Algorithmus bis zum globalen Netzwerk

bg fit

bg right:30% contain

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

bg fit

bg right:30% contain

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

bg fit

bg fit

bg fit

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

bg fit

bg right:30% contain

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

bg fit

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"

bg contain

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)

bg right:40%

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

bg

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
Rechenwerk (ALU) Führt Berechnungen durch
Steuerwerk Interpretiert Befehle, steuert Ablauf
Speicherwerk Speichert Programme UND Daten
Ein-/Ausgabe Tastatur, Bildschirm, Netzwerk
Bus-System Verbindet alle Komponenten

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)

bg fit

bg fit

bg right:30% contain

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

Assembler (1947)

Die erste Stufe über Maschinencode

  • Erfunden von Kathleen Booth (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

Fortran (1957)

Die erste höhere Programmiersprache

  • Entwickelt bei IBM unter John Backus
  • Im Team: Lois Haibt – verantwortlich für die Control-Flow-Analyse
  • Name: Formula Translator
  • Ziel: Mathematische Formeln direkt als Code schreiben
  • Revolutionär: ~20 Assembler-Befehle → 1 Fortran-Zeile
  • Noch heute genutzt in Wissenschaft und Hochleistungsrechnen

bg fit

bg right:30% contain

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 die psychische Gesundheit Minderjähriger
  • PimEyes: RAF-Terroristin in 30 Minuten gefunden – Polizei brauchte 30 Jahre

→ Verantwortung liegt bei denen, die Technologie bauen und einsetzen

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

bg

bg

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

bg fit

bg cover

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

Bits & Bytes

Die Sprache der Computer

bg

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

8 Bit = 1 Byte

0 0 1 0 1 0 1 0

Wie viele Kombinationen? 2⁸ = 256 Möglichkeiten (0-255)

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

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

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

bg fit

bg fit

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

bg right:40% fit

<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

bg right:35%

<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)

bg right:35%

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

Vollständiges Grundgerüst

bg right:35%

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

bg right:35%

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

Dokumentation auf developer.mozilla.org

Beispiel: Details/Summary (geöffnet)

bg right:35%

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

Dokumentation auf developer.mozilla.org

Beispiel: Button

bg right:35%

<button>Add to favorites</button>

Dokumentation auf developer.mozilla.org

Beispiel: Input/Eingabefeld

bg right:35%

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

Dokumentation auf developer.mozilla.org

Beispiel: Dialog

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

bg right:35%

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

Dokumentation auf developer.mozilla.org

"Barrierefreiheit"

Accessibility (a11y)

bg fit

Wie nutzen Menschen das Web?

bg

bg

bg

bg

bg

Wie nutzen Menschen das Web?

Eingabe Nutzungsweise
Maus Klicken, Scrollen
Tastatur Tab-Navigation, Enter, Pfeiltasten
Screenreader Vorlesen von Inhalten (NVDA, VoiceOver, JAWS)
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

a11y = Accessibility (a + 11 Buchstaben + y). 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 (Windows, kostenlos), VoiceOver (Apple, integriert), JAWS (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)
  • 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

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

Perceivable: Wahrnehmbar

bg right:35% fit

Textalternativen für Nicht-Text:

<img src="team.jpg" alt="Unser Team bei der Weihnachtsfeier 2024">
  • Kontrast: Mindestens 4,5:1 für Text
  • Untertitel: Videos brauchen Captions
  • Responsive: Inhalte bei 200% Zoom nutzbar

Operable: Bedienbar

bg right:35%

Tastaturzugänglich:

/* Fokus-Indikator NIE entfernen! */
:focus {
    outline: 2px solid blue;
    outline-offset: 2px;
}

/* Wenn custom styling: */
button:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 100, 255, 0.5);
}

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

bg right:35%

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

bg right:35%

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:

w:1050 center

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.

bg

bg

Barrieren im Netz vermeiden (a11y)

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:

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/