3D-Websites barrierefrei — damit niemand vor dem Canvas steht.
Ein 3D-Modell ist für Screenreader zunächst nur eine leere Fläche, ohne Maus oft nicht bedienbar und für Menschen mit Schwindel eine Zumutung. Das muss nicht so sein. Mit ein paar Grundregeln wird 3D ein zusätzliches Angebot statt einer Hürde. Seit Juni 2025 ist das für viele Shops auch keine Kür mehr.
Das 3D-Canvas selbst ist für Hilfstechnik unsichtbar. Barrierefrei wird es durch: alle Informationen auch als Text, Bedienelemente als echte Buttons statt nur Mausgesten, Tastatursteuerung, Rücksicht auf „Bewegung reduzieren“, ausreichend Kontrast und ein Ersatz, wenn 3D nicht läuft. Grundregel: 3D ergänzt, es ersetzt keine Information.
Dieser Ratgeber beschreibt die technische Umsetzung. Ob und wie das Barrierefreiheitsstärkungsgesetz für dein Unternehmen gilt, klärt eine rechtliche Beratung.
Das Problem mit dem Canvas.
Three.js und andere 3D-Bibliotheken zeichnen in ein einziges HTML-Element, das Canvas. Was darin zu sehen ist — Produkt, Farben, Beschriftungen — existiert für den Browser nur als Pixel. Ein Screenreader liest nichts vor, eine Tastatur kann nichts auswählen, eine Suchmaschine findet nichts. Dazu kommt die Bedienung per Ziehen und Zoomen mit der Maus, die ohne Maus nicht geht. Nichts davon ist unlösbar, aber es passiert nicht von selbst.
Was das BFSG bedeutet.
Seit dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz. Es verpflichtet unter anderem Anbieter von Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern — also typischerweise Online-Shops — ihre Angebote barrierefrei zu gestalten. Kleinstunternehmen, die Dienstleistungen erbringen, sind unter bestimmten Voraussetzungen ausgenommen. Für einen Shop mit 3D-Produktansicht oder Konfigurator heißt das: Der Kaufprozess muss ohne 3D funktionieren und alle kaufrelevanten Informationen müssen zugänglich sein. Ein Konfigurator, der nur mit der Maus bedienbar ist, wird zum Problem. Die technische Grundlage bilden die Anforderungen der europäischen Norm EN 301 549, die sich an den WCAG orientiert.
Grundregel: alles auch als Text.
- Produktbeschreibung, Maße, Materialien und Varianten stehen als normaler Text auf der Seite — nicht nur im 3D-Modell.
- Hotspot-Inhalte gibt es zusätzlich als Liste neben dem Modell (3D-Hotspots).
- Im Konfigurator werden Optionen über normale Formularelemente gewählt, das 3D-Modell zeigt nur das Ergebnis.
- Der aktuelle Stand, etwa „Farbe: Anthrazit, Größe: L, Preis: 1.290 €“, steht als Text und wird bei Änderung angesagt.
Das hat einen Nebeneffekt: Diese Texte liest auch Google. Barrierefreiheit und SEO ziehen hier an einem Strang.
Tastatur und Buttons.
Alles, was man mit der Maus am Modell tun kann, braucht eine Alternative: Buttons für „nach links drehen“, „nach rechts drehen“, „vergrößern“, „zurücksetzen“, „Explosionsansicht“. Alle Buttons sind per Tab erreichbar, haben einen sichtbaren Fokus und einen verständlichen Namen. Wird das Canvas selbst fokussierbar gemacht, können Pfeiltasten das Modell drehen — dann muss aber klar sein, wie man wieder herauskommt, und die Pfeiltasten dürfen das Scrollen der Seite nicht unbemerkt blockieren.
<figure>
<canvas id="produkt-3d" tabindex="0" role="img"
aria-label="3D-Ansicht Kaminofen Nova, drehbar mit den Pfeiltasten"></canvas>
<figcaption>Kaminofen Nova in Anthrazit, 98 cm hoch, mit Sichtfenster auf drei Seiten.</figcaption>
</figure>
<div class="steuerung">
<button type="button" data-dreh="-15">Nach links drehen</button>
<button type="button" data-dreh="15">Nach rechts drehen</button>
<button type="button" data-reset>Ansicht zurücksetzen</button>
</div>
<p id="status" aria-live="polite"></p>
<script>
const canvas = document.getElementById('produkt-3d');
canvas.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') { model.rotation.y -= 0.26; e.preventDefault(); }
if (e.key === 'ArrowRight') { model.rotation.y += 0.26; e.preventDefault(); }
});
</script>Der Bereich mit aria-live sagt Änderungen an, etwa „Farbe geändert: Weiß“. Nur Änderungen ansagen, die für den Nutzer relevant sind, nicht jede Drehung.
Screenreader.
Das Canvas bekommt eine Rolle als Bild und eine kurze Beschreibung, was es zeigt. Die eigentliche Information steckt aber im umgebenden Text und in den Bedienelementen. Wechselt der Nutzer eine Variante, sagt ein Live-Bereich die Änderung an. Hotspots sind echte Buttons mit Namen. Dekorative 3D-Hintergründe, die keine Information tragen, werden dagegen mit aria-hidden="true" vor dem Screenreader versteckt — sonst stolpert er über eine sinnlose Grafik (3D-Hintergrund).
Bewegung reduzieren.
Automatische Drehungen, Kamerafahrten und Parallax-Effekte können bei Menschen mit Gleichgewichtsstörungen Schwindel auslösen. Wer im Betriebssystem „Bewegung reduzieren“ eingeschaltet hat, sollte keine automatischen Bewegungen bekommen: Die Szene bleibt stehen, Übergänge werden zu weichen Überblendungen oder entfallen. Zusätzlich sollte jede automatische Bewegung, die länger als fünf Sekunden läuft, pausierbar sein. Besonders bei Scroll-Animationen lohnt eine Variante ohne Kamerafahrt.
Kontrast und Farben.
- Texte und Buttons über dem 3D-Modell brauchen ausreichend Kontrast — bei bewegtem Hintergrund mit einer ruhigen Fläche dahinter.
- Hotspots müssen auf hellen und dunklen Stellen des Modells erkennbar sein.
- Informationen nie nur über Farbe vermitteln: Eine rot markierte Baugruppe braucht zusätzlich eine Beschriftung.
- Der Fokus-Rahmen darf nicht wegdesignt werden.
Ersatz, wenn 3D nicht läuft.
Auf alten Geräten, bei deaktivierter Hardwarebeschleunigung oder mit bestimmten Hilfsmitteln läuft 3D nicht. Dann darf keine leere Fläche bleiben. Ein Standbild mit Beschreibung, eine Bildergalerie der wichtigsten Ansichten oder eine 360-Grad-Ansicht sind gute Ersatzlösungen. Im Shop muss der Kauf auch ohne 3D vollständig möglich sein.
So prüfst du es.
- Maus weglegen: Kommst du nur mit Tab, Enter und Pfeiltasten an alle Funktionen?
- Screenreader einschalten: VoiceOver auf Mac und iPhone, NVDA unter Windows, TalkBack auf Android. Verstehst du, was das Modell zeigt und was du tun kannst?
- „Bewegung reduzieren“ aktivieren und die Seite neu laden.
- WebGL im Browser abschalten: Was bleibt übrig?
- Automatisierte Prüfung mit Werkzeugen wie Lighthouse oder axe für Kontrast, Namen und Struktur — ergänzt, nicht ersetzt durch die manuellen Tests.
Wenn du Unterstützung brauchst.
Ich baue 3D-Ansichten und Konfiguratoren von Anfang an mit Tastatursteuerung, Textalternativen und Ersatzlösung — und prüfe bestehende auf Lücken. Einen Überblick über alle Themen gibt die Seite 3D-Webentwicklung, Preisrahmen stehen unter 3D-Konfigurator: Kosten.
Wer das schreibt.
Ich bin Manuel Killert, Web- und 3D-Entwickler aus Quakenbrück. Ich baue interaktive 3D-Anwendungen mit Three.js und Blender — Produktkonfiguratoren, Explosionsansichten, digitale Zwillinge und Scroll-Storys — und bringe sie in WordPress und WooCommerce. Die Live-Demos unten habe ich selbst gebaut, vom Blender-Modell bis zum fertigen Viewer im Browser. Die Probleme in diesem Ratgeber kenne ich deshalb nicht aus der Theorie, sondern aus eigenen Projekten.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — 3D-Websites barrierefrei gestalten.
Sind 3D-Inhalte auf Websites barrierefrei?
Nicht von selbst. Das Canvas ist für Screenreader und Tastatur zunächst unzugänglich. Mit Textalternativen, echten Buttons, Tastatursteuerung, Rücksicht auf Bewegung reduzieren und einem Ersatz ohne 3D werden sie es.
Gilt das Barrierefreiheitsstärkungsgesetz für 3D-Konfiguratoren?
Für Online-Shops mit Verbrauchern gilt das BFSG seit dem 28. Juni 2025, Kleinstunternehmen mit Dienstleistungen sind unter Voraussetzungen ausgenommen. Kaufrelevante Informationen und der Kaufprozess müssen dann auch ohne 3D zugänglich sein. Die rechtliche Einordnung klärt eine Beratung.
Wie mache ich ein 3D-Modell per Tastatur bedienbar?
Mit Buttons für Drehen, Zoomen und Zurücksetzen, die per Tab erreichbar sind, und optional mit Pfeiltasten auf dem fokussierbaren Canvas. Alle Funktionen, die mit der Maus gehen, brauchen eine Tastaturalternative.
Was liest ein Screenreader bei einem 3D-Modell vor?
Ohne Anpassung nichts. Das Canvas bekommt deshalb eine Rolle als Bild und eine Beschreibung, die eigentliche Information steht als Text daneben, und Änderungen werden über einen Live-Bereich angesagt.
Was tun Websites bei aktivierter Einstellung Bewegung reduzieren?
Sie verzichten auf automatische Drehungen, Kamerafahrten und Parallax oder ersetzen sie durch weiche Überblendungen. Lange automatische Bewegungen sollten zudem pausierbar sein.
Was passiert, wenn 3D auf einem Gerät nicht läuft?
Dann sollte ein Standbild mit Beschreibung, eine Galerie oder eine 360-Grad-Ansicht erscheinen. Im Shop muss der Kauf auch ohne 3D vollständig möglich sein.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de