Shoppable Video, das dein ganzes Publikum nutzen kann
Storistas Widgets und Player sind nach WCAG 2.2 Level AA gebaut: Jede Kachel, jeder Pfeil und jedes Bedienelement ist per Tastatur erreichbar, wird von Screenreadern angesagt und berücksichtigt die Einstellung für reduzierte Bewegung der Shopper. Untertitel sind in deinem Tarif enthalten.
Nichts zu konfigurieren. Barrierefreiheit ist in jedem Tarif Teil der App, auch in Free.
Von Anfang an eingebaut, nicht nachgerüstet
Barrierefreiheit darf kein Patch sein, der nach dem Launch kommt, wenn Tastatur- und Screenreader-Nutzer längst abgesprungen sind. Hier sind vier Dinge, die jede barrierefreie Shoppable-Video-Oberfläche auf Shopify richtig machen sollte – und wie Storista jedes davon ab der ersten Installation löst.
Per Tastatur, von Anfang bis Ende
Mit Tab erreichst du jede Video-Kachel, jeden Pfeil, jeden Pagination-Punkt und jeden In-den-Warenkorb-Button – jeweils genau ein Stopp, nie ein Stopp innerhalb eines Stopps. Enter oder Leertaste öffnet ein Video, Escape schließt den Player, und der Fokus kehrt zur Kachel zurück, von der du gekommen bist.
Richtig angesagt
Bedienelemente tragen echte Namen statt nur „Button“: Kacheln sind mit dem Beitragstitel beschriftet, Pfeile nennen ihre Richtung, Punkte geben an, zu welcher Folie sie führen und welche gerade aktiv ist. Dekorative Bildunterschriften sind für Screenreader ausgeblendet, damit nichts doppelt vorgelesen wird.
Reduzierte Bewegung wird respektiert
Wenn das System eines Shoppers reduzierte Bewegung anfordert, starten automatisch scrollende Karussells und Stories gar nicht erst – die Animation wird nicht einmal geladen, statt gestartet und wieder gestoppt zu werden. Alle anderen erhalten eine Pause-Steuerung, die pausiert bleibt, bis sie fortgesetzt wird.
Ziele, die du triffst
Schließen-Buttons, Pause-Steuerungen und Pagination-Punkte erfüllen die Mindestgröße von 24× 24 px, jeweils mit sichtbarem Fokusring.
Untertitel in jedem Tarif
Untertitel sind für barrierefreies Shoppable Video auf Shopify unverzichtbar: Viele schauen ohne Ton, und gehörlose oder schwerhörige Kunden sind darauf angewiesen. Wir decken sie auf zwei Wegen ab: Lade für jedes Video eine eigene Spur hoch, oder lass die Tarife Growth und Scale Untertitel automatisch erzeugen.
Free und Starter
Eigene Untertitel hochladen
Hänge an jedes veröffentlichte Video eine Untertitelspur an. Der Player zeigt überall dort einen Untertitel-Schalter, wo eine Spur vorhanden ist – so bekommen Shopper, die Untertitel brauchen oder ohne Ton schauen, die Worte.
Growth und Scale
Automatisch erzeugte Untertitel in 60 Sprachen
Untertitel werden automatisch mit einem erstklassigen Spracherkennungsmodell transkribiert, das 60 Sprachen erkennt – ein Video in einer dieser Sprachen erhält also eine Untertitelspur in derselben Sprache, ohne dass du ein Wort schreibst. Du kannst jederzeit eine eigene Spur hochladen, wenn du den Wortlaut lieber selbst bestimmst.
Untertitel sind nach WCAG 1.2.2 für aufgezeichnete Videos vorgeschrieben. Ein Video ohne Spur – hochgeladen oder erzeugt – wird von einem automatisierten Audit trotzdem beanstandet, daher lohnt es sich, sie zu aktivieren.
Jedes Widget, nicht nur das wichtigste
Barrierefreiheitsarbeit, die nur das Flaggschiff-Karussell abdeckt, lässt den Großteil der Shoppable Videos eines Shopify-Shops außen vor. Storista wendet dieselben Regeln für Tastatur, Beschriftung und Fokus auf jedes Format an:
Karussell
Ein Tabstopp pro Kachel, benannt nach dem Beitragstitel. „In den Warenkorb“ und das Produkt-Overlay im Vollbild sind eigene Stopps und nie in der Kachel verschachtelt.
Spotlight
Die ganze Karte aktiviert die Kachel, die Stummschaltung liegt außerhalb, damit sich beide nie in die Quere kommen. Pfeile sind echte Buttons.
Stories und Kreise
Jeder Kreis ist ein beschrifteter Stopp; die sichtbare Bildunterschrift ist für Screenreader ausgeblendet, sodass der Name nur einmal angesagt wird.
Video- und Karussell-Raster
Der Tastaturfokus löst dieselbe Vorschau aus wie das Hovern, sodass Tastaturnutzer sehen, was Mausnutzer sehen. „Mehr laden“ ist ein echtes Bedienelement.
Popup
Der Popup-Inhalt und sein Schließen-Button sind unabhängige Stopps, und das Schließen-Ziel erfüllt das Minimum von 24 px.
Vollbild-Player
Der Fokus bleibt im Player, solange er geöffnet ist, der Rest der Seite ist für Hilfstechnologien ausgeblendet, und beim Schließen kehrt der Fokus dorthin zurück, wo er begonnen hat. Schließen, Lautstärke, Zurück und Weiter sind alle beschriftet.
Geprüft und erneut geprüft
Behauptungen brauchen eine Methode dahinter. Unsere besteht aus einem automatisierten axe-Scan jedes Widgets plus einer manuellen Prüfung mit Tastatur und Screenreader, die bei jedem Release wiederholt wird – damit dein Shoppable Video auf Shopify Release für Release barrierefrei bleibt. Jeder Audit-Zyklus folgt derselben Abfolge
0
axe-Verstöße über alle 9 Widget-Typen
Jedes Widget wird aus Live-Shopdaten gerendert und gegen die WCAG-2.0-, 2.1- und 2.2-A/AA-Regelsätze sowie die Best-Practice-Regeln von axe geprüft.
149
Knoten auf verschachtelte Bedienelemente geprüft
Die Regel „nested-interactive“ besteht bei allen: Kein Widget setzt ein fokussierbares Element in ein anderes fokussierbares Element – so geraten Tastaturnutzer in Video-Rastern üblicherweise in eine Falle.
36
Regelgruppen bestehen auf der ganzen Seite
Der Scan der gesamten Seite meldet null Verstöße, nicht nur für das Widget-Markup isoliert.
Automatisierte Scans finden strukturelle Fehler schnell, können aber nicht beurteilen, ob ein Videoplayer für jemanden, der ihn hört, Sinn ergibt – deshalb bekommt jedes Release weiterhin eine menschliche Prüfung statt einer jährlichen Überprüfung.
Was wir nicht versprechen
Wenn es um barrierefreies Shoppable Video auf Shopify geht, ist das hier, was wir nicht versprechen. Storista kontrolliert seine eigenen Widgets und den Player, aber manche Teile eines Shops liegen außerhalb unserer Reichweite:
Farbkontrast legst du selbst fest
Widget-Text und Farben der Bedienelemente stammen aus deinen eigenen Stil-Einstellungen, sodass eine Kombination möglich ist, die die Kontrastanforderung von 4,5:1 verfehlt. Nichts in unserem Code kann das garantieren – wähle Farben, die bestehen, und prüfe sie, wenn Barrierefreiheit für dich eine Compliance-Anforderung ist.
Untertitel brauchen eine Spur
Der Player zeigt Untertitel überall dort, wo eine Spur vorhanden ist, und in Growth und Scale erzeugen wir sie für dich. Ein Video ohne Spur in Free oder Starter hat nichts anzuzeigen, und ein automatisiertes Audit wird es beanstanden.
WCAG 2.2 AA ist das Ziel, kein Zertifikat
Wir testen gegen die Kriterien von Level AA der Version 2.2 und veröffentlichen, was besteht und was nicht. Das ist nicht dasselbe wie ein Audit durch Dritte oder ein signiertes VPAT – wenn dein Einkaufsprozess eines braucht, sprich mit uns darüber, was wir teilen können.
Dein Theme ist Teil der Seite
Storista ist für seine eigenen Widgets und den Player verantwortlich. Überschriftenreihenfolge, Landmarks, Kontrast und Fokusverhalten an anderer Stelle der Seite gehören zu deinem Theme, und ein Shop kann bei diesen Punkten ein Audit nicht bestehen, während jedes Widget besteht.
Fragen zur Barrierefreiheit
Welchem Standard folgt ihr?
Muss ich etwas konfigurieren?
Wie funktionieren Untertitel in den einzelnen Plänen?
Können Käufer die Widgets ohne Maus bedienen?
Was passiert, wenn ein Käufer reduzierte Bewegung aktiviert?
Beeinträchtigt mein eigenes CSS die Barrierefreiheit?
Könnt ihr ein VPAT oder eine Barrierefreiheitserklärung bereitstellen?
Immer noch Fragen?
Shoppable Video hinzufügen, ohne ein Compliance-Problem zu schaffen
Installiere kostenlos und sieh dir an, wie sich die Widgets in deinem eigenen Shop verhalten – mit Tastatur, Screenreader und allem, was dazugehört.