Nuttige alt-tekst voor productfoto’s vertelt een klant wat een bepaalde afbeelding toevoegt: het uiterlijk van een product, een detail dat in een ander beeld wordt getoond of het doel van een bedieningselement met een afbeelding. Alt-tekst is een tekstalternatief dat software zoals een schermlezer kan gebruiken om een afbeelding te beschrijven. Begin met het doel op de pagina en controleer de tekst na het opslaan in de daadwerkelijke webwinkel.
Een galerij kan duidelijk lijken terwijl iedere foto dezelfde producttitel als alt-tekst gebruikt. Het vooraanzicht, het detail van de sluiting en de kleurvariant verliezen dan hun onderlinge verschillen in de tekst. Wij stellen voor de galerij van een product als een kleine redactionele taak te beoordelen, waarbij de catalogusredacteur de tekst controleert en de beheerder van de webwinkel de uitvoer controleert.
Waarom alt-tekst voor productfoto’s details verliest
De nuttige beschrijving hangt af van de rol van de afbeelding en de omringende inhoud. De richtlijnen van W3C voor informatieve afbeeldingen vragen auteurs om de informatie over te brengen die in die context van belang is. Als u in een hele galerij een titel, bestandsnaam of zoekterm herhaalt, kan het kenmerk dat een bepaalde foto moest tonen verloren gaan. Het veld invullen is slechts een deel van het werk.
De productnaam wordt als voldoende beschouwd. Een naam identificeert het artikel, maar een close-up kan een detail van een sluiting of vak toevoegen. Bekijk wat de foto boven op de titel en de nabijgelegen beschrijving bijdraagt.
De functie van de afbeelding wordt over het hoofd gezien. Een foto kan ook een link of een galerijknop zijn. In de richtlijnen van W3C voor functionele afbeeldingen maakt de actie of bestemming deel uit van de beslissing. De toegankelijke naam, het label dat ondersteunende technologie voor dat bedieningselement ontvangt, moet het doel begrijpelijk maken.
De opgeslagen invoer wordt als eindresultaat beschouwd. Behandel het beheerveld en de weergegeven pagina als afzonderlijke controlepunten. Bij een import, een hergebruikte afbeelding of aangepaste themalogica moet u de gerenderde uitvoer bekijken, dus wat de betreffende winkelpagina werkelijk beschikbaar stelt, voordat u de hele catalogus wijzigt.
De richtlijnen van Google voor afbeeldingen waarschuwen ook tegen het vullen van alternatieven met zoekwoorden. Schrijf voor het detail of de actie die de klant nodig heeft; een lijst zoektermen geeft die uitleg niet.
Bepaal wat elke afbeelding toevoegt
Beoordeel de afbeelding samen met de omringende tekst en een eventuele link of knop waar ze deel van uitmaakt. Vraag welke informatie of actie zonder de afbeelding onduidelijk zou worden. De beslisboom van W3C maakt onderscheid tussen informatief, functioneel en decoratief gebruik; voor een afbeelding die elders opnieuw wordt gebruikt, is een nieuwe contextuele beslissing nodig. Een later galerijbeeld is niet automatisch decoratief omdat de producttitel al is verschenen.
Denk aan een hypothetische winkel die een blauwe schoudertas verkoopt. Dit zijn verzonnen tekstvoorbeelden, geen beschrijvingen die aan een echte catalogus zijn getoetst.
| Plaatsing | Te beoordelen beslissing |
|---|---|
| Vooraanzicht | Beschrijf het relevante zichtbare uiterlijk, zoals een blauwe tas met een gebogen klep. |
| Close-up van de sluiting | Beschrijf het zichtbare detail van de sluiting dat dit beeld toevoegt. |
| Andere kleur | Stem de beschrijving af op de foto en de geselecteerde variant. |
| Galerijbediening met alleen een afbeelding | Maak de actie van het bedieningselement begrijpelijk, zoals het openen van het beeld van de sluiting. |
| Puur decoratieve herhaling | Overweeg na controle van informatie en functie een bewust leeg alternatief. |
Een leeg alternatief betekent een bewust attribuut alt="". De richtlijnen van W3C voor decoratieve afbeeldingen onderscheiden dit van het weglaten van het attribuut. Bij een productkaartafbeelding in een link kan afdoende tekst binnen diezelfde link een leeg alternatief passend maken. Een afzonderlijke producttitel in de buurt geeft een link die alleen uit een afbeelding bestaat niet automatisch een naam.
Houd gedetailleerde informatie over maten of montage beschikbaar als toegankelijke pagina-inhoud. De richtlijnen van W3C voor complexe afbeeldingen vragen om een uitgebreidere tekstuele uitleg wanneer een kort alternatief de informatie niet kan overbrengen. Prop de instructies van een diagram niet in een korte beschrijving om de rest vervolgens weg te laten.
Schrijf en bewaar een beoordeeld voorbeeld
Maak een voorbeeld dat u kunt controleren voordat u de methode op de hele catalogus toepast. Wij zouden een registratie gebruiken met de pagina-URL, taal, geselecteerde variant, afbeeldingsreferentie, doel, voorgestelde tekst en verificatieresultaat. Een miniatuur of duidelijke mediareferentie helpt de beoordelaar de rij aan de werkelijke foto te koppelen, zonder op basis van een bestandsnaam te gokken.
- Leg de bijdrage van de afbeelding vast. Schrijf op wat de klant uit dit beeld nodig heeft en wat de nabijgelegen tekst al biedt. Vermeld of de afbeelding deel uitmaakt van een link of knop.
- Stel een kort alternatief op. Behoud het onderscheidende zichtbare detail. Controleer kleur en andere relevante feiten aan de hand van de juiste foto en catalogusvermelding; verzin op basis van het uiterlijk geen materiaal, capaciteit of certificering.
- Beoordeel suggesties voordat u ze aanvaardt. Een gegenereerde beschrijving is een concept. Vraag de productredacteur te controleren wat er staat en welk doel de tekst dient, met inbegrip van de geselecteerde variant en taal.
- Controleer onverklaarde bestaande waarden. Als het veld voorraadcodes of ongebruikelijke opmaak bevat, vraag de beheerder dan of aangepaste galerijlogica ervan afhankelijk is. Test wijzigingen in een geautoriseerde preview of een ander omkeerbaar voorbeeld voordat u die waarden op grote schaal vervangt.
- Sla de tekst op via het relevante mediaveld. De huidige desktopinstructies van Shopify verwijzen u naar Producten, het product en vervolgens het media-item. Kies alt-tekst toevoegen, voer de beoordeelde tekst in en selecteer alt-tekst opslaan. Deze route geldt voor productmedia; afbeeldingen in beschrijvingen of themasecties kunnen op een andere plaats worden bewerkt.
- Draag implementatieproblemen over aan de beheerder. Als het veld of bedieningselement het vereiste doel niet kan uitdrukken, geef dan de pagina, afbeeldingsreferentie en het beoogde resultaat door. In onze voorgestelde werkzaamheden aan e-commercewebsites scheidt deze overdracht de inhoudelijke beslissing van de themawijziging en de verificatie daarvan.
Controleer de webwinkel voordat u de catalogus wijzigt
Open na het opslaan de betreffende winkelpagina en controleer precies de plaats die u hebt bewerkt. Bevestig het alternatief van de afbeelding, de toegankelijke naam van elk bedieningselement waar ze bij hoort en wat er gebeurt wanneer u van variant of galerijbeeld wisselt. Als u dit niet zelf kunt inspecteren, vraag de beheerder dan vóór u de bewerking uitbreidt om de uitvoer naast uw registratie te tonen.
- Koppel de werkelijke afbeelding. Gebruik de inspectiehulpmiddelen van de browser, of vraag de beheerder, om het attribuut
altvan de gerenderde afbeelding te lezen. Vergelijk dit met de voorbereide tekst en de foto die op dat moment wordt getoond. - Controleer de naam en actie van het bedieningselement. Inspecteer bij een link of knop zowel het label dat aan ondersteunende technologie wordt doorgegeven als het alternatief van de afbeelding. Controleer of de genoemde actie of bestemming overeenkomt met wat er gebeurt wanneer u het bedieningselement activeert. Een afbeeldingsbeschrijving alleen bepaalt mogelijk niet de volledige naam van het bedieningselement.
- Wijzig het beeld en de variant. Open het detail van de sluiting, selecteer een andere zichtbare kleur en controleer de bijbehorende uitvoer opnieuw. Als een beschrijving aan de verkeerde foto gekoppeld blijft, leg die exacte reeks dan vast voor de beheerder.
- Open de pagina en de relevante taal opnieuw. Controleer of de opgeslagen wijziging nog op de beoogde plaats aanwezig is. Registreer onopgeloste gevallen afzonderlijk, ook wanneer een import- of vertaalproces moet worden onderzocht.
Een browserinspectie controleert de implementatie; een deskundige beoordeling met een schermlezer kan de winkeltaak met die ondersteunende technologie onderzoeken. Houd de reikwijdte van iedere beoordeling duidelijk. Easy Checks van W3C waarschuwt dat voorlopige controles niet definitief zijn. Daarom bewijzen noch een ingevuld veld noch dit voorbeeld de toegankelijkheid van de hele winkel. Onze eerste toegankelijkheidscontroles voor uw website behandelen bredere taken, zoals toetsenbordgebruik en formulieren.
Houd de alternatieven na de bewerking correct
Wijs de verantwoordelijkheid voor de brontekst toe en herhaal de relevante controle wanneer de foto, variant, taal, het thema of de import verandert. Als meerdere systemen de catalogus aanleveren, zoek dan uit welk systeem het veld beheert. Wij zouden die toewijzing opnemen in een workflow voor catalogus- en CRM-integratie voordat we handmatige wijzigingen uitbreiden die door een ander proces kunnen worden vervangen.
Houd beoordeelde plaatsingen, in de webwinkel bevestigde teksten en onopgeloste gevallen bij. Deze registraties tonen het voltooide werk en wat nog aandacht nodig heeft. Ze meten geen verkoopeffect. Bewaar de afbeeldingsreferentie, huidige tekst, redacteur en aanleiding voor de volgende beoordeling samen, zodat iemand anders dezelfde beslissing kan onderhouden.
Waar wij helpen
Wij zouden beginnen met de beelden van een product en afspreken wat elk beeld moet overbrengen. De overdracht verbindt vervolgens de tekst van de redacteur met de opslaglocatie, de uitvoer in de webwinkel en eventueel onopgelost gedrag van bedieningselementen. Begin uw eigen registratie met een product waarvan de galerij verschillende details toont en controleer het voorbeeld voordat u het uitbreidt.
