LIAM DAHL UX Research & Product Optimization
ENGINEERING · ACCESSIBILITY · 2025

Accessible PDF Reader

Eine Web-App, die PDFs per Frage beantwortet — mit Barrierefreiheit als Fundament.

PDF hochladen, eine Frage zum Dokument stellen, die Antwort bei Bedarf vorlesen lassen. Konzipiert von der schwierigsten Nutzung her gedacht — blinde Screenreader-Nutzer — und durchgehend barrierefrei umgesetzt.

Accessible PDF Reader App Mockup
ROLLE

Konzept · Architektur · Frontend · Accessibility

ZEITRAUM

2025

TOOLS

Python · FastAPI · OpenAI (gpt-4.1-nano) · pypdf · HTML/CSS/JS

METHODEN

Screenreader-Test (NVDA)

01 - Überblick

Was für ein Projekt ist es überhaupt

ÜBERBLICK

Ein Dokument befragen, statt es durchzulesen

Eine kleine, fokussierte Anwendung: Dokument hochladen, befragen, vorlesen. Dahinter eine bewusst entkoppelte Architektur – fünf Module, jede Datei mit einer Aufgabe. Zwei Entscheidungen prägen das Projekt: eine klar definierte Naht für späteres RAG und eine Barrierefreiheit, die von der blinden Nutzung her gedacht ist statt nachträglich aufgesetzt.

02 - Vorgehen

Ablauf des Projekts

01 Kontext Definition Nutzergruppe definiert, erste Ideen entwickelt.
02 Nutzungskontextanalyse Interviews durchgeführt, Persona erstellt, User Storys & Aufgabenmodelle erstellt.
03 Anforderungsermittlung Erfordernisse aus Nutzungskontextanalyse in Anforderungen formuliert.
04 Informationsarchitektur Navigationsstruktur, Skizzen, Aufgabenobjekte & Attribute erstellt.
05 Interaktionsdesign Wireframes und Low-Fidelity-Skizzen der Zustände erstellt.
06 Interface Design High-Fidelity-Prototyp erstellt.
07 Frontend HTML/CSS/JS umgesetzt, mit Fokus auf Screenreader-Zugänglichkeit.
08 Test & Betrieb End-to-End getestet und auf Render deployt.
09 Dokumentation & Präsentation Dokumentation erstellt, Präsentation erstellt.
03 - System

Bild für dich

Accessible PDF Reader – Poster
Accessible PDF Reader – Workflow
Accessible PDF Reader – Screen
AUDIO

Vorlesen bewusst degradiert

Für Screenreader-Nutzer redundant – ihre Software liest selbst. Der Vorlesen-Button ist auf Seh- und Leseschwäche zugeschnitten: nur manueller Start, nie Auto-Play – sonst doppelte Stimme.

FOKUS

Antwort = Hinspringen

Kommt die Antwort, springt der Fokus direkt hinein – und sie wird nicht zusätzlich per Live-Region angesagt. Beides zusammen würde sie doppelt vorlesen.

ANSAGEN

Live-Regionen nach Dringlichkeit

Verlauf höflich (role=log), Fehler bestimmt (role=alert). Während der KI-Latenz hält „Antwort wird erstellt…" die Stille auf; Senden ist solange gesperrt.

DIALOG

PDF wechseln nur mit Bestätigung

Modaler Dialog mit Fokus-Falle, Esc bricht ab, der Fokus kehrt zurück. Bei „Laden": Verlauf leeren, Fokus auf die Empty-State-Überschrift.

STRUKTUR

Semantik als Fundament

Semantisches HTML, Landmarks, Skip-Link, ein Label an jedem Feld, sichtbare Fokusringe – und Farbe ist nie der alleinige Bedeutungsträger.

ROBUST

Für alle nutzbar

Touch-Ziele ≥ 44px, Reflow bis 320px und 200% Zoom, prefers-reduced-motion respektiert, fetch statt Reload für nahtlose Updates.

04 - Test & Betrieb

End-to-End mit einer Test-PDF geprüft

4/4

Testfälle bestanden

5

entkoppelte Module

100 %

Antworten dokumentbasiert

0

Halluzinationen im Test

Wie getestet wurde

Geprüft wurde auf vier Dinge: korrekte Fakten, korrekte Details, sauberes Abweisen einer Frage ohne Antwort im Dokument, und deutsches Vorlesen per Web Speech API.

05 - Details

Zusammenfassung und Projektdetails zum nachschauen

ERGEBNIS

Eine lauffähige, barrierefreie App – sauber gebaut

PDF hochladen, befragen, vorlesen. End-to-End getestet, deployt, mit einer Architektur, die für RAG vorbereitet ist. Das System antwortet nur auf Basis des Dokuments – und sagt ehrlich, wenn etwas fehlt.