Barrierefreiheit und Performance

Tenora ist so gebaut, dass alle es nutzen können und dass es auf Smartphones schnell lädt. Auf dieser Seite erklären wir, was das Theme für dich erledigt und was du tun kannst, damit dein Shop barrierefrei und schnell bleibt.

Was das Theme für die Barrierefreiheit tut

Tenora wurde anhand der Web Content Accessibility Guidelines (WCAG) 2.2, Stufe AA, getestet – mit automatisierten Prüfungen und Tastaturtests auf jeder Vorlage.

Bedienung per Tastatur

• Alle Links, Buttons, Menüs, Einschübe und Formulare lassen sich allein mit der Tastatur bedienen.
• Einschübe (Menü, Warenkorb, Filter, Abholorte, Land und Sprache) halten den Tastaturfokus im Inneren, solange sie geöffnet sind. Die Taste Esc schließt sie, und der Fokus kehrt an seine vorherige Stelle zurück.
• Die Punkte von Shop the Room, das Formular „Passt es?“, der Bildzoom und der cm/in-Umschalter funktionieren alle mit der Tastatur.
• Entfernen Kunden einen Artikel aus dem Warenkorb, springt der Fokus zum nächsten Artikel oder zur Überschrift des Warenkorbs.

Sichtbarer Fokus

Bewegen sich Kunden mit der Taste Tab durch die Seite, hat das fokussierte Element einen deutlichen Umriss. Die Fokusreihenfolge folgt der Reihenfolge der Seite.

Sprunglink

Wenn Kunden zum ersten Mal Tab drücken, erscheint der Link Direkt zum Inhalt. Er springt am Header vorbei zum Hauptinhalt der Seite.

Reduzierte Bewegung

Manche Menschen aktivieren auf ihrem Gerät die Einstellung „Bewegung reduzieren“. Für diese Kunden:

• schaltet das Theme Animationen und Übergänge aus, etwa das Einblenden von Abschnitten
• stoppt es den automatischen Wechsel der Ankündigungsleiste
• schaltet es weiches Scrollen aus

Farbkontrast

• Alle Text- und Hintergrundfarben in den Presets Tenora, Terrace und Lantern erreichen ein Kontrastverhältnis von mindestens 4.5:1 (WCAG AA). Rahmen und Symbole erreichen mindestens 3:1.
• Fehler- und Erfolgsmeldungen verwenden die Textfarbe des Farbschemas mit einem farbigen Symbol. Sie bleiben in jedem Farbschema lesbar.
• Wenn du die Farben änderst, halte ein Kontrastverhältnis von mindestens 4.5:1 zwischen Text und Hintergrund ein. Ein Farbpaar kannst du mit jedem Online-Kontrastprüfer testen.

Screenreader

• Seiten verwenden korrekte Überschriften und Landmarks wie Header, Hauptinhalt und Fußzeile.
• Preise, Grundpreise, reduzierte Preise und Lagerstatus haben klare Beschriftungen für Screenreader.
• Die Ergebnisse von „Passt es?“ und die Anzahl der Länder, die die Ländersuche findet, werden angesagt.
• Buttons und Formularfelder haben Beschriftungen, auch in den 30 übersetzten Sprachen.
• Touch-Ziele sind mindestens 24 x 24 Pixel groß.

Textrichtung und Sprache

Seitensprache und Textrichtung ergeben sich aus der Storefront-Sprache. Sprachen mit Schreibrichtung von rechts nach links werden automatisch gespiegelt. Siehe International verkaufen.

Was du tun kannst: Alt-Texte

Ein Alt-Text (Alternativtext) beschreibt ein Bild für Menschen, die es nicht sehen können. Screenreader lesen ihn vor, und Suchmaschinen nutzen ihn.

Wo du Alt-Texte hinzufügst

• Produktbilder: Öffne ein Produkt im Shopify-Adminbereich, wähle ein Bild und dann Alt-Text hinzufügen.
• Bilder in Abschnitten und Dateien: Öffne Inhalt → Dateien, wähle das Bild und bearbeite seinen Alt-Text.
• Kollektionsbilder: Öffne die Kollektion im Shopify-Adminbereich und bearbeite das Bild.

So schreibst du gute Alt-Texte

• Beschreibe, was das Bild zeigt und warum es wichtig ist. Zum Beispiel: „Esstisch aus Eiche mit sechs Leinenstühlen in einem hellen Raum“.
• Fasse dich kurz, meist in einem Satz.
• Beginne nicht mit „Bild von“ oder „Foto von“.
• Nenne Details, die Kunden bei der Wahl helfen, etwa Farbe, Material oder Größe.
• Wiederhole nicht den Produkttitel, wenn das Bild nichts Neues zeigt. Beschreibe stattdessen die Ansicht, zum Beispiel „Seitenansicht mit den schlanken Eichenbeinen“.

Was das Theme automatisch erledigt

• Produktbilder ohne Alt-Text verwenden in der Produktgalerie den Produkttitel.
• Manche Bilder sind dekorativ, etwa Materialbilder in den Karten von Materialien und Pflege und das Musterbild neben seinem Titel. Das Theme verbirgt sie vor Screenreadern, weil der Text daneben sie bereits benennt.
• Das Logo verwendet den Shopnamen, wenn das Logobild keinen Alt-Text hat.

Was das Theme für die Geschwindigkeit tut

• Seiten werden auf dem Server erstellt. Das Theme verwendet wenig JavaScript, und jeder Abschnitt lädt sein eigenes Script nur, wenn der Abschnitt auf der Seite ist. So lädt zum Beispiel das Script von „Passt es?“ nur bei Produkten mit Maßen.
• Seitenspezifische Styles, etwa für Produktseiten und Filter, laden nur auf den Seiten, die sie brauchen.
• Bilder werden in mehreren Größen bereitgestellt, sodass jedes Gerät die passende Größe herunterlädt. Bilder unterhalb des ersten Bildschirms laden erst, wenn Kunden in ihre Nähe scrollen.
• Das erste große Bild der Seite (zum Beispiel das Bild-Banner) lädt zuerst, sodass die Seite früher fertig aussieht.
• Videos von YouTube und Vimeo laden erst, wenn Kunden sie abspielen.
• Ähnliche Produkte laden, wenn Kunden in ihre Nähe scrollen.
• Schriftarten stammen aus der Shopify-Schriftbibliothek und zeigen Text sofort an, während die Schrift lädt.

Was du tun kannst: Deinen Shop schnell halten

Die richtigen Bildgrößen verwenden

Shopify skaliert Bilder für jedes Gerät, aber ein gutes Originalbild hilft. Verwende diese Größen:

Wo	Empfohlene Größe
Bild-Banner	2400 x 1350px .jpg
Bild-Banner, mobiles Bild (optional)	1080 x 1350px .jpg
Bild mit Text	1500 x 1875px .jpg
Shop the Room	Format 3:2, zum Beispiel 2400 x 1600px .jpg
Mega-Menü-Aktion	Format 4:3
Titelbild des Videos	Format 16:9
Produktbilder	Mindestens 2000px an der längsten Seite, alle im selben Format
Logoliste	Transparente .png- oder .svg-Datei
Favicon	.png-Datei mit 32 x 32px

Tipps

• Verwende .jpg für Fotos und .png oder .svg für Logos.
• Komprimiere Fotos vor dem Hochladen. Ziel sind weniger als 500 KB pro Foto.
• Lege bei wichtigen Bildern einen Fokuspunkt fest. Wähle im Theme-Editor das Bild und bestimme den Fokuspunkt. Tenora verwendet ihn beim Zuschneiden des Bildes.

Weniger Apps installieren

Viele Apps fügen jeder Seite eigene Scripts und Styles hinzu, auch wenn du sie nicht siehst. Das kann deinen Shop verlangsamen.

• Tenora enthält bereits Maße, „Passt es?“, Materialien, Muster, Lieferdetails und Shop the Room. Für diese Funktionen brauchst du keine App.
• Entferne Apps, die du nicht nutzt. Prüfe nach der Deinstallation einer App, ob sie Code in deinem Theme hinterlassen hat. Ist das der Fall, wende dich an den App-Entwickler.
• Prüfe die Geschwindigkeit deines Shops, bevor du eine App installierst, und danach noch einmal.

Videos mit Bedacht einsetzen

• Füge dem Abschnitt Video ein Titelbild hinzu. Das Titelbild wird angezeigt, bis Kunden das Video abspielen, und erst dann lädt der Player.
• Halte auf Shopify gehostete Videos kurz und achte auf eine vernünftige Dateigröße.
• Verwende kein Video als erstes Element der Startseite, wenn ein Bild denselben Zweck erfüllt. Bilder laden schneller.

Die Startseite fokussiert halten

Jeder Abschnitt fügt Inhalte hinzu, die geladen werden müssen. Verwende die Abschnitte, die Kunden am meisten helfen, und entferne die, die du nicht brauchst.

Deine Geschwindigkeit prüfen

Öffne in deinem Shopify-Adminbereich Onlineshop → Themes und sieh dir den Geschwindigkeitsbericht deines Shops an. Prüfe ihn nach größeren Änderungen, etwa neuen Apps oder neuen Abschnitten auf der Startseite.