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

STACK

Python · FastAPI · OpenAI · pypdf · HTML/CSS/JS

SCHWERPUNKT

Barrierefreiheit (Blind-first)

Ü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 Architektur

ARCHITEKTUR & ENGINEERING

Jede Datei eine Aufgabe

Fünf Module, klar geschnitten. Kein Modul kennt mehr als es muss: pdf.py weiß nichts von der KI, ai.py nichts vom Web-Framework. Das macht jede Komponente einzeln testbar und austauschbar.

DIE MODULE

Vier Bausteine – plus die entscheidende Naht

main.py

Routes & HTTP

FastAPI-Endpunkte. Verbindet die Module und kümmert sich um HTTP – sonst nichts.

pdf.py

PDF → Text

Extrahiert Text mit pypdf. Erkennt nicht lesbare oder gescannte PDFs und meldet sie klar.

ai.py

KI gekapselt

Kapselt die OpenAI-Anbindung samt vollständiger Fehlerbehandlung – der Rest der App kennt die KI nicht.

config.py

Einstellungen

.env-Konfiguration, getippt, mit validate() beim Start – fehlende Keys fallen sofort auf.

DIE ENTSCHEIDENDE NAHT

context.py – ein Erweiterungspunkt

context.get_context()

Eine Funktion, ein Umbaupunkt

Die ganze App greift nur über diese eine Funktion auf den Dokumentkontext zu. Heute liefert sie den Volltext in den Prompt. Ein späterer RAG-Umbau – Embeddings, Vektorsuche – berührt ausschließlich diese Funktion. Die Signatur bleibt, main.py und ai.py merken nichts. Architektur ist die Entscheidung, was sich später nicht ändern muss.

03 Barrierefreiheit

NUTZERVERSTÄNDNIS

Johanna Wendt – Hauptpersona

Johanna Wendt Illustration
Zitat

„Ich will eine Frage stellen können – nicht ein halbes Buch durchhören."

Alter 28
Sehkraft Blind, von Geburt an
Nutzung Tastatur + Screenreader
Screenreader NVDA · VoiceOver
Tätigkeit Berufsbegleitendes Studium
Kontext Lange PDFs aller Art
Geräte Laptop & Smartphone
Arbeitsweise Rein per Tastatur
Hintergrund

Johanna studiert berufsbegleitend und ist von Geburt an blind. Lange Dokumente – Skripte, Verträge, Behördenpost – arbeitet sie mit dem Screenreader durch. Statt sie linear durchzuhören, will sie sie gezielt befragen.

Ziele
  • Eine konkrete Frage ans Dokument stellen, statt es von vorn durchzuhören.
  • Mit der eigenen Screenreader-Stimme und -Geschwindigkeit arbeiten.
  • Jederzeit wissen, wo sie im Ablauf steht.
Frustrationen
  • Lange Dokumente komplett durchhören kostet enorm Zeit.
  • Auto-Play-Audio und doppelte Ansagen kollidieren mit dem Screenreader.
  • Inkonsistente Fokus-Reihenfolge, fehlende Labels, kontextlose Buttons.
BARRIEREFREIHEIT (BLIND-FIRST)

Entscheidungen, die direkt aus der Persona folgen

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.

ZUSTÄNDE & ANSAGEN

Wie das Interface durch den Ablauf führt

Jeder Zustand hat eine definierte Ansage und ein klares Fokusziel – damit ein Screenreader-Nutzer nie im Unklaren ist, was gerade passiert.

LEER Startzustand Empty-State mit klarer Aufforderung „Stell eine Frage". Der Fokus liegt direkt im Eingabefeld.
UPLOAD Dokument laden Datei wählen; der Upload wird per Status „Dokument geladen" angesagt, Fehler bestimmt gemeldet.
FRAGE Eingabe Frage eintippen und senden – klar beschriftet, vollständig per Tastatur erreichbar.
WARTEN KI-Latenz „Antwort wird erstellt…" füllt die Stille, Senden ist gesperrt – kein doppeltes Absenden.
ANTWORT Fokus springt hin Die Antwort erscheint im Verlauf, der Fokus springt hinein. Optional vorlesbar – nie automatisch.

04 Test & Betrieb

TEST & BETRIEB

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

Vier Fragetypen, ein Ziel: Antwortet das System nur auf Basis des Dokuments – und sagt es ehrlich, wenn etwas nicht drinsteht?

4/4

Testfälle bestanden

5

entkoppelte Module

100 %

Antworten dokumentbasiert

0

Halluzinationen im Test

VORGEHEN

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.

ERGEBNISSE

Was der Test zeigte

FAKTENFRAGE

Korrekt beantwortet

Direkte Fakten aus dem Dokument wurden präzise wiedergegeben.

DETAILFRAGE

Korrekt beantwortet

Auch speziellere Detailfragen fanden die richtige Stelle im Text.

HALLUZINATION

Sauber abgewehrt

Auf eine Frage ohne Antwort im Dokument sagte das Modell das offen – statt zu raten.

BETRIEB

Deployment & Kostenschutz

RENDER

Web Service

Laufender Server mit serverseitigem Key. Free-Tier schläft nach ~15 Min – Kaltstart 30–60 s, PDF danach neu laden.

KOSTEN

Hartes Limit

OpenAI Auto-Recharge aus – die öffentliche Demo kann keine unbegrenzten Kosten verursachen.

05 Ergebnis

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.

LEARNINGS

Was ich aus dem Projekt mitnehme

01

Eine gute Naht schlägt ein fertiges Feature

Die context.py-Schnittstelle erlaubt den Sprung zu echtem RAG, ohne die App umzubauen. Den Erweiterungspunkt früh und sauber zu setzen war wertvoller, als RAG sofort hinzustellen.

02

Barrierefreiheit gehört ins Fundament

Von der blinden Nutzung her zu denken hat Semantik, Fokus und Ansagen von Anfang an geformt. Nachträglich wäre das nie so konsistent geworden.