Diese Website

Ausgangslage. Ein Portfolio soll eine neue Spezialisierung belegen: Anleitungen, die im Anwendungsmoment tatsächlich benutzt werden. Die meisten Portfolios beschreiben solche Kompetenzen aber nur.

Problem. Behauptete Qualität ist für Arbeitgeber nicht prüfbar. Screenshots zeigen Ergebnisse, aber keine Entscheidungen – und sagen nichts über Verständlichkeit, Barrierefreiheit oder Sorgfalt im Detail.

Ziel. Eine Website, die selbst das Arbeitsergebnis ist: strukturiert wie eine gute technische Anleitung, nachweisbar barrierefrei, rechtlich sauber, schnell – und in jedem Detail begründbar.

Zielgruppe und Nutzungskontext. Recruiter und Fachverantwortliche mit wenig Zeit, auf Desktop und Smartphone, oft zwischen zwei Terminen. Konsequenz: Die Positionierung ist ohne Scrollen erfassbar, jede Seite beantwortet eine Frage, nichts lenkt ab.

Konzept. Die Website übernimmt die Logik einer Anleitung: nummerierte Abschnitte statt loser Sektionen, Statusangaben statt Dekoration, Sicherheits- und Rechtsinformationen als Teil des Produkts. Gestaltung nach dem Prinzip „Editorial Tech“: reines Weiß, Anthrazit, ein gezielt eingesetztes Signalrot, große Typografie, technisches Raster.

Umsetzung und geprüfte Qualität. Statisch generiert. Jede Datei kommt von der eigenen Domain, beim Seitenaufruf geht keine einzige Anfrage an einen fremden Server – im Netzwerk-Tab des Browsers nachprüfbar. Deshalb braucht diese Seite keinen Cookie-Banner. Barrierefreiheit nach WCAG 2.2 AA: axe-core meldet auf allen Seiten null Verstöße, Kontraste sind in allen sechs Farbmodus-Kombinationen nachgemessen, der Reflow von 320 bis 1440 Pixel ebenso. Ladezeit, Kontraste und Tastaturbedienung sind harte Abnahmekriterien, keine Absichtserklärungen. Details: Barrierefreiheitserklärung.

Bewusste Entscheidungen. Die Website startet in der dunklen Ansicht – ein heller Farbmodus und eine farbenblind-freundliche Palette stehen als bewusste Wahl unter „Ansicht anpassen“ bereit, gespeichert ausschließlich auf dem eigenen Gerät. Keine Animation ohne Funktion. Kein Captcha im Formular – Spam wird unsichtbar abgefangen, statt Nutzer arbeiten zu lassen. Kein Satz auf dieser Website behauptet eine Qualität, die man nicht selbst nachsehen kann. Und: Die vier Assistenz-Modi (Vorlesen, Erklär-Tour, Gesten- und Sprachsteuerung) sind eine Komfort-Schicht über einer bereits barrierefreien Basis – optional, nie Voraussetzung.

Arbeitsweise mit KI. Diese Website ist im Zusammenspiel mit einem KI-Sprachmodell entstanden – Texte, Code und die schematischen Abbildungen der Fallstudien. Die Rollenverteilung war dabei die eines Redaktionsprozesses: Ich habe Konzept, Fachinhalte und Regeln vorgegeben, die Umsetzung geprüft und jede Abweichung zurückgewiesen. Verbindlich war ein Regelwerk, das im Projekt mitgeführt und bei jeder Änderung geprüft wurde – null Fremdanfragen, WCAG 2.2 AA, semantisches HTML zuerst, jede Bewegung mit Funktion. Was die Regeln verletzte, kam nicht in die Seite, unabhängig davon, wer es vorgeschlagen hatte. Belastbar wurde das erst durch Prüfwerkzeuge: automatische Kontrollen für Links, Semantik, Kontraste und die Antwortqualität des Seitenassistenten liefen bei jeder Änderung mit und haben mehrfach Fehler gefunden, die im Lesen nicht auffielen. Genau das ist die Erfahrung, die ich aus dem Projekt mitnehme – KI beschleunigt die Ausführung, sie ersetzt weder die fachliche Entscheidung noch die Prüfung. Offengelegt ist das auch im Impressum; das Porträtfoto ist eine Fotografie, keine KI-Erzeugung.

Learnings. Barrierefreiheit früh als Abnahmekriterium zu setzen, war die günstigste Entscheidung im Projekt: Was von Anfang an für Tastatur und Screenreader gedacht ist, muss später nicht nachgerüstet werden. Und jede Ausnahme von einer selbst gesetzten Regel kostet mehr als die Regel: Die einzige bewusste Abweichung von „jede Bewegung hat eine Funktion“ – der verzögerte Einstieg auf der Startseite – hat mehr Nacharbeit erzeugt als alle übrigen Interaktionen zusammen.