Toegankelijkheid en prestaties

Tenora is gemaakt om door iedereen te kunnen worden gebruikt en om snel te laden op telefoons. Op deze pagina lees je wat het thema voor je doet en wat je zelf kunt doen om je winkel toegankelijk en snel te houden.

Wat het thema doet voor toegankelijkheid

Tenora is getest volgens de Web Content Accessibility Guidelines (WCAG) 2.2, niveau AA, met geautomatiseerde controles en toetsenbordtests op elke sjabloon.

Gebruik met het toetsenbord

• Elke link, knop, elk menu, elke lade en elk formulier kan met alleen het toetsenbord worden gebruikt.
• Lades (menu, winkelwagen, filters, afhaallocaties, land en taal) houden de toetsenbordfocus binnen de lade zolang die open is. De toets Esc sluit ze en de focus keert terug naar waar die was.
• De punten van Shop de kamer, het formulier "Past het?", de afbeeldingszoom en de cm/in-schakelaar werken allemaal met het toetsenbord.
• Verwijdert een klant een artikel uit de winkelwagen, dan gaat de focus naar het volgende artikel of naar de kop van de winkelwagen.

Zichtbare focus

Beweegt een klant met de Tab-toets door de pagina, dan heeft het element met focus een duidelijke omlijning. De focusvolgorde volgt de volgorde van de pagina.

Overslaan-link

De eerste keer dat een klant op Tab drukt, verschijnt een link Naar inhoud gaan. Deze springt over de koptekst heen naar de hoofdcontent van de pagina.

Minder beweging

Sommige mensen schakelen op hun apparaat de instelling "minder beweging" in. Voor deze klanten:

• schakelt het thema animaties en overgangen uit, zoals het invloeien van secties
• stopt het thema het automatisch wisselen van de aankondigingsbalk
• schakelt het thema vloeiend scrollen uit

Kleurcontrast

• Alle tekst- en achtergrondkleuren in de presets Tenora, Terrace en Lantern hebben een contrastverhouding van minimaal 4,5:1 (WCAG AA). Randen en pictogrammen halen minimaal 3:1.
• Fout- en succesmeldingen gebruiken de tekstkleur van het kleurschema met een gekleurd pictogram. Ze blijven in elk kleurschema leesbaar.
• Wijzig je de kleuren, houd dan een contrastverhouding van minimaal 4,5:1 aan tussen tekst en achtergrond. Je kunt een kleurpaar controleren met elke online contrastchecker.

Schermlezers

• Pagina's gebruiken correcte koppen en landmarks, zoals de koptekst, de hoofdcontent en de voettekst.
• Prijzen, eenheidsprijzen, aanbiedingsprijzen en voorraadstatussen hebben duidelijke labels voor schermlezers.
• De resultaten van "Past het?" en het aantal landen dat de landenzoekfunctie vindt, worden voorgelezen.
• Knoppen en formuliervelden hebben labels, ook in de 30 vertaalde talen.
• Aanraakdoelen zijn minimaal 24 x 24 pixels.

Leesrichting en taal

De paginataal en leesrichting komen van de taal van de webwinkel. Talen die van rechts naar links worden gelezen, worden automatisch gespiegeld. Zie Wereldwijd verkopen.

Wat je zelf kunt doen: alt-tekst

Alt-tekst (alternatieve tekst) beschrijft een afbeelding voor mensen die deze niet kunnen zien. Schermlezers lezen de tekst voor en zoekmachines gebruiken hem.

Waar je alt-tekst toevoegt

• Productafbeeldingen: open een product in het Shopify-beheercentrum, selecteer een afbeelding en selecteer Alt-tekst toevoegen (Add alt text).
• Afbeeldingen in secties en bestanden: ga naar Content → Bestanden, selecteer de afbeelding en bewerk de alt-tekst.
• Collectieafbeeldingen: open de collectie in het Shopify-beheercentrum en bewerk de afbeelding.

Zo schrijf je goede alt-tekst

• Beschrijf wat de afbeelding toont en waarom dat belangrijk is. Bijvoorbeeld: "Eiken eettafel met zes linnen stoelen in een lichte kamer".
• Houd het kort, meestal één zin.
• Begin niet met "Afbeelding van" of "Foto van".
• Noem details die klanten helpen kiezen, zoals kleur, materiaal of maat.
• Herhaal de producttitel niet als de afbeelding niets nieuws toevoegt. Beschrijf in plaats daarvan het aanzicht, bijvoorbeeld "Zijaanzicht met de slanke eiken poten".

Wat het thema automatisch doet

• Productafbeeldingen zonder alt-tekst gebruiken in de productgalerij de producttitel.
• Sommige afbeeldingen zijn decoratief, zoals materiaalafbeeldingen in de kaarten van Materialen en onderhoud en de staalafbeelding naast de titel. Het thema verbergt deze voor schermlezers, omdat de tekst ernaast ze al benoemt.
• Het logo gebruikt de winkelnaam als de logoafbeelding geen alt-tekst heeft.

Wat het thema doet voor snelheid

• Pagina's worden op de server opgebouwd. Het thema gebruikt weinig JavaScript, en elke sectie laadt haar eigen script alleen als de sectie op de pagina staat. Zo laadt het script van "Past het?" alleen bij producten met afmetingen.
• Paginaspecifieke stijlen, zoals die voor de productpagina en de filters, laden alleen op de pagina's die ze gebruiken.
• Afbeeldingen laden in meerdere formaten, zodat elk apparaat het formaat downloadt dat het nodig heeft. Afbeeldingen onder het eerste scherm laden pas als de klant ernaartoe scrolt.
• De eerste grote afbeelding op de pagina (bijvoorbeeld de afbeeldingsbanner) laadt als eerste, zodat de pagina sneller klaar lijkt.
• Video's van YouTube en Vimeo laden pas als de klant ze afspeelt.
• Gerelateerde producten laden als de klant ernaartoe scrolt.
• Lettertypen komen uit de lettertypebibliotheek van Shopify en tonen tekst direct terwijl het lettertype laadt.

Wat je zelf kunt doen: houd je winkel snel

Gebruik de juiste afbeeldingsformaten

Shopify past het formaat van afbeeldingen aan per apparaat, maar een goede originele afbeelding helpt. Gebruik deze formaten:

Waar	Aanbevolen formaat
Afbeeldingsbanner	2400 x 1350px .jpg
Afbeeldingsbanner, mobiele afbeelding (optioneel)	1080 x 1350px .jpg
Afbeelding met tekst	1500 x 1875px .jpg
Shop de kamer	Verhouding 3:2, bijvoorbeeld 2400 x 1600px .jpg
Promotie in megamenu	Verhouding 4:3
Omslagafbeelding van video	Verhouding 16:9
Productafbeeldingen	Minimaal 2000px aan de langste zijde, allemaal in dezelfde verhouding
Logolijst	Transparante .png of .svg
Favicon	.png van 32 x 32px

Tips

• Gebruik .jpg voor foto's en .png of .svg voor logo's.
• Comprimeer foto's voordat je ze uploadt. Streef naar minder dan 500 KB per foto.
• Stel een focuspunt in op belangrijke afbeeldingen. Selecteer de afbeelding in de thema-editor en kies het focuspunt. Tenora gebruikt dit bij het bijsnijden van de afbeelding.

Installeer minder apps

Veel apps voegen eigen scripts en stijlen toe aan elke pagina, ook als je ze niet ziet. Dat kan je winkel vertragen.

• Tenora bevat al afmetingen, "Past het?", materialen, stalen, bezorginformatie en Shop de kamer. Voor deze functies heb je geen app nodig.
• Verwijder apps die je niet gebruikt. Controleer na het verwijderen van een app of er geen code in je thema is achtergebleven. Is dat wel zo, neem dan contact op met de ontwikkelaar van de app.
• Controleer de snelheid van je winkel voordat je een app installeert. Controleer die opnieuw na de installatie.

Gebruik video's met beleid

• Voeg een Omslagafbeelding toe aan de sectie Video. De omslagafbeelding wordt getoond totdat de klant de video afspeelt, en pas dan laadt de speler.
• Houd door Shopify gehoste video's kort en gebruik een redelijke bestandsgrootte.
• Gebruik geen video als eerste element op de homepage als een afbeelding hetzelfde kan. Afbeeldingen laden sneller.

Houd de homepage gefocust

Elke sectie voegt content toe die moet worden gedownload. Gebruik de secties die klanten het meest helpen en verwijder de secties die je niet nodig hebt.

Controleer je snelheid

Ga in je Shopify-beheercentrum naar Onlinewinkel → Thema's en bekijk het snelheidsrapport van je winkel. Controleer het na grote wijzigingen, zoals nieuwe apps of nieuwe secties op de homepage.