Användbar alt-text för produktbilder berättar för kunden vad en viss bild tillför: hur en produkt ser ut, en detalj som visas i en annan vy eller syftet med ett bildbaserat reglage. Alt-text är ett textalternativ som programvara, exempelvis en skärmläsare, kan använda för att beskriva en bild. Börja med bildens syfte på sidan och kontrollera sedan formuleringen i den faktiska butiken när du har sparat den.
Ett galleri kan se tydligt ut trots att varje bild använder samma produkttitel som alt-text. Framifrånvy, detalj av stängningen och färgvariant förlorar då sina skillnader i texten. Vi föreslår att ett produktgalleri granskas som en mindre redaktionell uppgift, där katalogredaktören kontrollerar formuleringen och den butiksansvariga kontrollerar resultatet.
Varför alt-text för produktbilder förlorar användbara detaljer
Den användbara beskrivningen beror på bildens roll och det omgivande innehållet. W3C:s vägledning om informativa bilder ber skribenter förmedla den information som är viktig i sammanhanget. Om en titel, ett filnamn eller en sökfras upprepas i hela galleriet kan den egenskap som ett visst fotografi skulle visa gå förlorad. Att fylla i fältet är bara en del av arbetet.
Produktnamnet anses vara tillräckligt. Ett namn identifierar varan, men en närbild kan tillföra en detalj om en stängning eller ficka. Se efter vad fotografiet tillför utöver titeln och beskrivningen i närheten.
Bildens funktion förbises. Ett fotografi kan också vara en länk eller en galleriknapp. W3C:s vägledning om funktionella bilder gör åtgärden eller målet till en del av beslutet. Det tillgängliga namnet, alltså den etikett som hjälpmedelstekniken tar emot för reglaget, måste göra dess syfte begripligt.
Det sparade värdet betraktas som slutresultatet. Behandla administrationsfältet och den visade sidan som separata kontrollpunkter. En import, en återanvänd bild eller anpassad temalogik motiverar att du granskar det renderade resultatet, alltså vad den aktuella butikssidan faktiskt exponerar, innan du ändrar hela katalogen.
Googles bildvägledning varnar också för att fylla alternativen med nyckelord. Skriv för att förklara detaljen eller åtgärden som kunden behöver. En lista med söktermer ger inte den förklaringen.
Bestäm vad varje bild tillför
Granska bilden tillsammans med den omgivande texten och eventuella länkar eller knappar som den tillhör. Fråga vilken information eller åtgärd som skulle bli oklar utan den. W3C:s beslutsträd skiljer mellan informativ, funktionell och dekorativ användning. En bild som återanvänds någon annanstans kräver ett nytt beslut utifrån sammanhanget. En senare gallerivy blir inte automatiskt dekorativ bara för att produkttiteln redan har visats.
Tänk dig en fiktiv butik som säljer en blå axelväska. Formuleringarna är påhittade exempel, inte beskrivningar som har verifierats mot en verklig katalog.
| Placering | Beslut att granska |
|---|---|
| Framifrånvy | Beskriv det relevanta synliga utseendet, exempelvis en blå väska med en böjd klaff. |
| Närbild av stängningen | Beskriv den synliga detalj av stängningen som den här vyn tillför. |
| Annan färg | Anpassa beskrivningen till fotografiet och den valda varianten. |
| Gallerireglage med enbart en bild | Gör reglagets åtgärd begriplig, exempelvis att öppna vyn av stängningen. |
| Rent dekorativ upprepning | Överväg ett avsiktligt tomt alternativ efter att ha kontrollerat informationen och funktionen. |
Ett tomt alternativ innebär ett avsiktligt alt=""-attribut. W3C:s vägledning om dekorativa bilder skiljer detta från att utelämna attributet. För en bild på ett produktkort inuti en länk kan tillräcklig text inom samma länk göra ett tomt alternativ lämpligt. En separat produkttitel i närheten ger inte automatiskt ett namn åt en länk som enbart består av en bild.
Se till att detaljerad information om storlek eller montering finns som tillgängligt sidinnehåll. W3C:s vägledning om komplexa bilder efterlyser en utförligare textförklaring när ett kort alternativ inte kan förmedla informationen. Försök inte pressa in instruktionerna i ett diagram i en kort beskrivning och kasta bort resten.
Skriv och spara ett granskat exempel
Förbered ett exempel som du kan kontrollera innan du tillämpar metoden i hela katalogen. Vi skulle använda en post med sidans webbadress, språk, vald variant, bildreferens, syfte, föreslagen formulering och verifieringsresultat. En miniatyr eller tydlig mediereferens hjälper granskaren att koppla raden till rätt bild i stället för att gissa utifrån ett filnamn.
- Registrera bildens bidrag. Skriv vad kunden behöver få ut av den här vyn och vad texten i närheten redan tillhandahåller. Ange om bilden ingår i en länk eller knapp.
- Skriv ett kort alternativ. Behåll den särskiljande synliga detaljen. Kontrollera färg och andra relevanta fakta mot rätt fotografi och katalogpost. Hitta inte på material, kapacitet eller certifiering utifrån utseendet.
- Granska förslag innan du godtar dem. En genererad beskrivning är ett utkast. Be produktredaktören kontrollera vad den säger och vilket syfte den fyller, inklusive vald variant och språk.
- Kontrollera oförklarade befintliga värden. Om fältet innehåller lagerkoder eller ovanlig formatering ska du fråga den butiksansvariga om anpassad gallerilogik är beroende av dem. Testa ändringar i en godkänd förhandsvisning eller ett annat återställningsbart exempel innan du ersätter värdena i stor skala.
- Spara via det relevanta mediefältet. I Shopifys aktuella anvisningar för dator går du till Produkter, väljer produkten och sedan dess medieobjekt. Välj Lägg till alt-text, ange den granskade formuleringen och välj Spara alt-text. Den här vägen gäller produktmedier. Bilder i beskrivningar eller temaavsnitt kan ha en annan redigeringsplats.
- Lämna implementeringsproblem till den butiksansvariga. Om fältet eller reglaget inte kan uttrycka det nödvändiga syftet ska du ange sidan, bildreferensen och det avsedda resultatet. I vårt föreslagna arbete med e-handelswebbplatser skiljer denna överlämning innehållsbeslutet från temaändringen och verifieringen av den.
Kontrollera butiken innan du ändrar katalogen
Öppna den aktuella butikssidan när du har sparat och kontrollera exakt den placering som du redigerade. Bekräfta bildens alternativ, det tillgängliga namnet på eventuella reglage som den tillhör och vad som händer när du ändrar variant eller gallerivy. Om du inte själv kan granska detta ska du be den butiksansvariga visa resultatet mot din post innan redigeringen utökas.
- Matcha den faktiska bilden. Använd webbläsarens granskningsverktyg, eller fråga den butiksansvariga, för att läsa den renderade bildens
alt-attribut. Jämför det med den förberedda formuleringen och det fotografi som visas för tillfället. - Kontrollera reglagets namn och åtgärd. För en länk eller knapp ska du granska etiketten som exponeras för hjälpmedelstekniken samt bildalternativet. Kontrollera att den angivna åtgärden eller destinationen stämmer överens med vad som händer när du aktiverar reglaget. En bildbeskrivning ensam avgör kanske inte reglagets fullständiga namn.
- Ändra vy och variant. Öppna detaljen av stängningen, välj en annan synlig färg och kontrollera motsvarande resultat igen. Om en beskrivning förblir kopplad till fel bild ska du registrera den exakta sekvensen åt den butiksansvariga.
- Öppna sidan och det aktuella språket igen. Kontrollera att den sparade ändringen fortfarande finns på den avsedda placeringen. Registrera olösta fall separat, även när ett import- eller översättningsflöde behöver undersökas.
En webbläsargranskning kontrollerar implementeringen. En kunnig granskning med skärmläsare kan undersöka köpuppgiften med hjälpmedelstekniken. Håll omfattningen av varje granskning tydlig. W3C:s Easy Checks varnar för att preliminära kontroller inte är definitiva. Därför fastställer varken ett ifyllt fält eller detta exempel tillgängligheten i hela butiken. Våra första tillgänglighetskontroller för din webbplats omfattar bredare uppgifter, såsom tangentbordsanvändning och formulär.
Håll alternativen korrekta efter redigeringen
Fördela ansvaret för källtexten och upprepa den relevanta kontrollen när fotografiet, varianten, språket, temat eller importen ändras. Om flera system förser katalogen med data ska du ta reda på vilket som äger fältet. Vi skulle inkludera den kartläggningen i ett arbetsflöde för katalog- och CRM-integrering innan manuella redigeringar som kan ersättas av en annan process utökas.
Följ upp granskade placeringar, formuleringar som har bekräftats i butiken och olösta fall. Dessa poster visar det genomförda arbetet och vad som fortfarande behöver åtgärdas. De mäter ingen försäljningseffekt. Förvara bildreferensen, den nuvarande formuleringen, redaktören och vad som ska utlösa nästa granskning tillsammans, så att någon annan kan upprätthålla samma beslut.
Så kan vi hjälpa till
Vi skulle börja med produktens vyer och komma överens om vad var och en behöver förmedla. Överlämningen kopplar sedan redaktörens formulering till platsen där den sparas, resultatet i butiken och eventuella olösta beteenden hos reglage. Börja din egen post med en produkt vars galleri visar tydliga, skilda detaljer och kontrollera exemplet innan du utökar det.
