Nyttig alt-tekst til produktbilleder fortæller kunden, hvad et bestemt billede bidrager med: et produkts udseende, en detalje vist i en anden visning eller formålet med et billedbaseret betjeningselement. Alt-tekst er et tekstalternativ, som software såsom en skærmlæser kan bruge til at beskrive et billede. Begynd med billedets formål på siden, og tjek derefter formuleringen i den faktiske butik, når den er gemt.
Et galleri kan se tydeligt ud, selv om alle billeder bruger den samme produkttitel som alt-tekst. Visningen forfra, detaljen af lukningen og farvevarianten mister dermed deres forskelle i teksten. Vi foreslår, at et produktgalleri gennemgås som en mindre redaktionel opgave, hvor katalogredaktøren tjekker formuleringen, og den butiksansvarlige tjekker resultatet.
Hvorfor alt-tekst til produktbilleder mister nyttige detaljer
Den nyttige beskrivelse afhænger af billedets rolle og det omgivende indhold. W3C’s vejledning om informative billeder beder skribenter formidle de oplysninger, som er vigtige i sammenhængen. Hvis en titel, et filnavn eller en søgefrase gentages i hele galleriet, kan den egenskab, som et bestemt fotografi skulle vise, gå tabt. At udfylde feltet er kun en del af arbejdet.
Produktnavnet betragtes som tilstrækkeligt. Et navn identificerer varen, men et nærbillede kan tilføje en detalje om en lukning eller lomme. Se på, hvad fotografiet bidrager med ud over titlen og beskrivelsen i nærheden.
Billedets funktion bliver overset. Et fotografi kan også være et link eller en galleriknap. W3C’s vejledning om funktionelle billeder gør handlingen eller destinationen til en del af beslutningen. Det tilgængelige navn, altså den etiket, som hjælpemiddelteknologien modtager for betjeningselementet, skal gøre dets formål forståeligt.
Den gemte værdi betragtes som det endelige resultat. Behandl administrationsfeltet og den viste side som separate kontrolpunkter. En import, et genbrugt billede eller tilpasset temalogik gør det relevant at undersøge det gengivne resultat, altså hvad den relevante butiksside faktisk eksponerer, før du ændrer hele kataloget.
Googles billedvejledning advarer også mod at fylde alternativer med søgeord. Skriv for at forklare den detalje eller handling, kunden har brug for. En liste med søgeord giver ikke den forklaring.
Afgør, hvad hvert billede tilføjer
Gennemgå billedet sammen med den omgivende tekst og eventuelle links eller knapper, som det tilhører. Spørg, hvilke oplysninger eller hvilken handling der ville blive uklar uden det. W3C’s beslutningstræ skelner mellem informativ, funktionel og dekorativ brug. Et billede, der genbruges et andet sted, kræver en ny beslutning ud fra sammenhængen. En senere gallerivisning er ikke automatisk dekorativ, blot fordi produkttitlen allerede er blevet vist.
Forestil dig en fiktiv butik, som sælger en blå skuldertaske. Disse formuleringer er opdigtede eksempler og ikke beskrivelser, der er kontrolleret mod et virkeligt katalog.
| Placering | Beslutning, der skal gennemgås |
|---|---|
| Visning forfra | Beskriv det relevante synlige udseende, såsom en blå taske med en buet klap. |
| Nærbillede af lukningen | Beskriv den synlige detalje ved lukningen, som denne visning tilføjer. |
| En anden farve | Tilpas beskrivelsen til fotografiet og den valgte variant. |
| Galleribetjening med kun et billede | Gør betjeningselementets handling forståelig, såsom at åbne visningen af lukningen. |
| Rent dekorativ gentagelse | Overvej et bevidst tomt alternativ efter at have tjekket oplysningerne og funktionen. |
Et tomt alternativ betyder en bevidst alt=""-attribut. W3C’s vejledning om dekorative billeder skelner dette fra at udelade attributten. For et produktkortbillede i et link kan tilstrækkelig tekst i det samme link gøre et tomt alternativ passende. En separat produkttitel i nærheden giver ikke automatisk et navn til et link, der kun består af et billede.
Sørg for, at detaljerede oplysninger om størrelser eller samling findes som tilgængeligt sideindhold. W3C’s vejledning om komplekse billeder anbefaler en mere udførlig tekstforklaring, når et kort alternativ ikke kan formidle oplysningerne. Undgå at presse et diagrams instruktioner ind i en kort beskrivelse og kassere resten.
Skriv og gem et gennemgået eksempel
Forbered et eksempel, du kan tjekke, før du anvender metoden i hele kataloget. Vi ville bruge en post med sidens webadresse, sprog, valgt variant, billedreference, formål, foreslået formulering og kontrolresultat. En miniature eller tydelig mediereference hjælper den person, der gennemgår indholdet, med at knytte rækken til det faktiske billede i stedet for at gætte ud fra et filnavn.
- Registrer billedets bidrag. Skriv, hvad kunden har brug for fra denne visning, og hvad teksten i nærheden allerede indeholder. Angiv, om billedet er en del af et link eller en knap.
- Skriv et kort alternativ. Bevar den særlige synlige detalje. Tjek farve og andre relevante fakta mod det korrekte fotografi og den korrekte katalogpost. Opfind ikke materiale, kapacitet eller certificering ud fra udseendet.
- Gennemgå forslag, før du accepterer dem. En genereret beskrivelse er et udkast. Bed produktredaktøren tjekke, hvad den siger, og hvilket formål den opfylder, herunder den valgte variant og sproget.
- Tjek eksisterende værdier uden forklaring. Hvis feltet indeholder lagerkoder eller usædvanlig formatering, skal du spørge den butiksansvarlige, om tilpasset gallerilogik afhænger af dem. Test ændringer i en godkendt forhåndsvisning eller et andet eksempel, hvor ændringerne kan rulles tilbage, før du erstatter disse værdier samlet.
- Gem via det relevante mediefelt. Shopifys aktuelle computervejledning leder dig til Produkter, produktet og derefter dets medieelement. Vælg Tilføj alternativ tekst, indtast den gennemgåede formulering, og vælg Gem alternativ tekst. Denne vej gælder produktmedier. Billeder i beskrivelser eller temasektioner kan have en anden redigeringsplacering.
- Send implementeringsproblemer videre til den butiksansvarlige. Hvis feltet eller betjeningselementet ikke kan udtrykke det nødvendige formål, skal du angive siden, billedreferencen og det ønskede resultat. I vores foreslåede arbejde med e-handelswebsteder adskiller denne overdragelse indholdsbeslutningen fra temaændringen og kontrollen af den.
Tjek butikken, før du ændrer kataloget
Åbn den relevante butiksside efter lagring, og tjek præcis den placering, du redigerede. Bekræft billedets alternativ, det tilgængelige navn på ethvert betjeningselement, det tilhører, og hvad der sker, når du skifter variant eller gallerivisning. Hvis du ikke selv kan undersøge dette, skal du bede den butiksansvarlige vise resultatet sammenholdt med din post, før redigeringen udvides.
- Match det faktiske billede. Brug browserens inspektionsværktøjer, eller bed den butiksansvarlige om at læse det gengivne billedes
alt-attribut. Sammenlign den med den forberedte formulering og det fotografi, der vises i øjeblikket. - Tjek betjeningselementets navn og handling. For et link eller en knap skal du undersøge den etiket, der eksponeres for hjælpemiddelteknologien, samt billedalternativet. Tjek, at den angivne handling eller destination stemmer overens med det, der sker, når du aktiverer betjeningselementet. En billedbeskrivelse alene afgør muligvis ikke hele betjeningselementets navn.
- Skift visning og variant. Åbn detaljen af lukningen, vælg en anden synlig farve, og tjek det tilsvarende resultat igen. Hvis en beskrivelse forbliver knyttet til det forkerte billede, skal du registrere den præcise rækkefølge til den butiksansvarlige.
- Åbn siden og det relevante sprog igen. Tjek, at den gemte ændring stadig findes på den ønskede placering. Registrer uløste tilfælde separat, herunder hvor en import- eller oversættelsesproces skal undersøges.
En browserinspektion kontrollerer implementeringen. En kvalificeret gennemgang med skærmlæser kan undersøge købsopgaven med den pågældende hjælpemiddelteknologi. Hold omfanget af hver gennemgang tydeligt. W3C’s Easy Checks advarer om, at indledende tjek ikke er endelige. Derfor fastslår hverken et udfyldt felt eller dette eksempel hele butikkens tilgængelighed. Vores første tilgængelighedstjek af dit websted omfatter bredere opgaver såsom brug af tastaturet og formularer.
Hold alternativerne korrekte efter redigeringen
Fordel ansvaret for kildeteksten, og gentag det relevante tjek, når fotografiet, varianten, sproget, temaet eller importen ændres. Hvis flere systemer leverer kataloget, skal du finde ud af, hvilket system der ejer feltet. Vi ville medtage denne kortlægning i et arbejdsforløb til katalog- og CRM-integration, før vi udvider manuelle redigeringer, som en anden proces kan erstatte.
Hold styr på gennemgåede placeringer, formuleringer, der er bekræftet i butikken, og uløste tilfælde. Disse poster viser det udførte arbejde, og hvad der stadig kræver opmærksomhed. De måler ikke en salgseffekt. Opbevar billedreferencen, den nuværende formulering, redaktøren og udløseren for næste gennemgang samlet, så en anden person kan opretholde den samme beslutning.
Her kommer vi ind
Vi ville begynde med produktets visninger og aftale, hvad hver af dem skal formidle. Overdragelsen forbinder derefter redaktørens formulering med det sted, hvor den gemmes, resultatet i butikken og eventuel uløst adfærd for betjeningselementer. Begynd din egen post med et produkt, hvis galleri viser tydeligt forskellige detaljer, og tjek eksemplet, før du udvider det.
