# Softwareprojekt: Entwicklung eines interaktiven Web-Editors zur Analyse und Manipulation von Webseiten mit Integration in Easy-Web-Check
## Hintergrund
Die Prüfung von Webseiten auf Barrierefreiheit ist ein ressourcenintensiver Prozess, der derzeit überwiegend manuell durchgeführt wird. Bestehende unterstützende Werkzeuge sind häufig als separate Plugins oder betriebssystemgebundene Anwendungen realisiert, was zu Sicherheitsproblemen führen kann und deren Einsatz in sensiblen IT-Umgebungen einschränkt.
Eine zentrale Herausforderung besteht darin, Webseiten in einer sicheren, isolierten Umgebung analysieren und manipulieren zu können, ohne auf externe Tools angewiesen zu sein.
## Themenstellung
Im Rahmen dieses Projekts soll ein interaktiver Web-Editor entwickelt werden, der vollständige Webseiten rendert und eine direkte Interaktion mit deren Quellcode ermöglicht. Der Editor wird nahtlos in das bestehende System Easy-Web-Check integriert und unterstützt den Prüfprozess zur Barrierefreiheitsanalyse.
Zentrale Aufgaben:
- Rendering einer Webseite: Umsetzung einer isolierten und sicheren Darstellung einer Webseite, beispielsweise mithilfe von Canvas-Elementen, iFrames oder alternativen Technologien.
- Interaktive Quellcode-Manipulation: Entwicklung von Funktionen, die es Nutzenden ermöglichen, den HTML- und DOM-Code der dargestellten Seite direkt zu bearbeiten und Änderungen unmittelbar zu visualisieren.
- Integration von Prüfwerkzeugen: Anbindung und Integration bestehender Barrierefreiheits-Tools wie Taba11y, um erste technische Prüfungen innerhalb des Editors zu ermöglichen.
Das Projekt kann zusätzlich um UX-Aspekte erweitert werden:
- UX-Design: Entwicklung eines konzeptionellen Designs (z. B. Wireframes oder Mockups) für den Web-Editor, das eine intuitive und benutzerfreundliche Bedienung ermöglicht.
- Prototyping: Implementierung eines funktionalen Prototyps auf Basis der entwickelten UX-Konzepte, um das Zusammenspiel von Usability und technischer Funktionalität frühzeitig zu evaluieren.
- Nahtlose Einbettung in Easy-Web-Check: Implementierung des Editors als Bestandteil der bestehenden Next.js- und Node.js-basierten Architektur von Easy-Web-Check.
- Technologieanalyse: Vergleich und Bewertung geeigneter Technologien für das Rendering und die Interaktion (z. B. Canvas, iFrame, Shadow DOM), unter Berücksichtigung von Sicherheit, Performance und Wartbarkeit.
## Anforderungen
- Solide Kenntnisse in der Webentwicklung, insbesondere mit Next.js und Node.js
- Erfahrung in der Frontend- und Backend-Entwicklung, insbesondere in der DOM-Manipulation und im Umgang mit Rendering-Techniken
- Grundlegendes Verständnis von Barrierefreiheitsanforderungen (z. B. WCAG) und Interesse an automatisierten Prüfverfahren
- Fähigkeit zur strukturierten technologischen Analyse und Dokumentation
- Für den freiwilligen UX-Teil: Grundkenntnisse in UI/UX-Design-Tools (z. B. Figma, Adobe XD) von Vorteil
## Nutzen des Projekts
Dieses Softwareprojekt bietet die Möglichkeit, eine innovative, praxisnahe Lösung für die Barrierefreiheitsprüfung von Webseiten zu entwickeln. Studierende erhalten vertiefte Einblicke in moderne Webtechnologien, in die sichere Bearbeitung und Analyse von Webseiteninhalten sowie in die Entwicklung benutzerfreundlicher Webanwendungen.
