Užitečný alt text produktových obrázků sděluje nakupujícím, čím konkrétní obrázek přispívá: vzhledem produktu, detailem zobrazeným v jiném pohledu nebo účelem ovládacího prvku založeného na obrázku. Alt text je textová alternativa, kterou může software, například čtečka obrazovky, použít k popisu obrázku. Začněte jeho účelem na stránce a po uložení zkontrolujte znění ve skutečném e-shopu.
Galerie může působit srozumitelně, i když každý obrázek používá jako alt text stejný název produktu. Rozdíly mezi pohledem zepředu, detailem zapínání a barevnou variantou se pak v textu ztratí. Navrhujeme kontrolovat galerii produktu jako menší redakční úkol: editor katalogu ověří znění a správce e-shopu výstup.
Proč alt text produktových obrázků ztrácí užitečné detaily
Užitečný popis závisí na úloze obrázku a okolním obsahu. Pokyny W3C pro informativní obrázky žádají autory, aby předali informace důležité v daném kontextu. Opakování názvu, názvu souboru nebo vyhledávací fráze v celé galerii může vynechat vlastnost, kterou měla konkrétní fotografie ukázat. Vyplnění pole je jen část práce.
Název produktu se považuje za dostačující. Název položku identifikuje, ale detailní záběr může přidat informaci o zapínání nebo kapse. Zaměřte se na to, čím fotografie přispívá nad rámec názvu a okolního popisu.
Přehlíží se funkce obrázku. Fotografie může být také odkazem nebo tlačítkem galerie. Pokyny W3C pro funkční obrázky zahrnují do rozhodování akci nebo cíl. Přístupný název, tedy označení, které pro daný ovládací prvek obdrží asistivní technologie, musí jeho účel učinit srozumitelným.
Uložený údaj se považuje za konečný výsledek. Pole v administraci a zobrazenou stránku berte jako dva samostatné kontrolní body. Import, opakovaně použitý obrázek nebo vlastní logika motivu jsou důvodem zkontrolovat vykreslený výstup, tedy co příslušná stránka e-shopu skutečně poskytuje, než změníte celý katalog.
Pokyny Googlu pro obrázky také varují před zaplňováním alternativ klíčovými slovy. Pište pro detail nebo akci, které nakupující potřebuje. Seznam vyhledávacích výrazů takové vysvětlení neposkytuje.
Rozhodněte, co každý obrázek přidává
Posuzujte obrázek spolu s okolním textem a odkazem či tlačítkem, ke kterému patří. Ptejte se, která informace nebo akce by bez něj byla nejasná. Rozhodovací strom W3C rozlišuje informativní, funkční a dekorativní použití. Obrázek použitý jinde vyžaduje nové rozhodnutí podle kontextu. Pozdější pohled v galerii není automaticky dekorativní jen proto, že se již zobrazil název produktu.
Představte si hypotetický obchod prodávající modrou tašku přes rameno. Následující formulace jsou smyšlené příklady, nikoli popisy ověřené podle skutečného katalogu.
| Umístění | Rozhodnutí k posouzení |
|---|---|
| Pohled zepředu | Popište relevantní viditelný vzhled, například modrou tašku se zaoblenou klopou. |
| Detail zapínání | Popište viditelný detail zapínání, který tento pohled přidává. |
| Jiná barva | Přizpůsobte popis fotografii a vybrané variantě. |
| Ovládací prvek galerie tvořený jen obrázkem | Vyjádřete srozumitelně akci prvku, například otevření pohledu na zapínání. |
| Čistě dekorativní opakování | Po kontrole informací a funkce zvažte záměrně prázdnou alternativu. |
Prázdná alternativa znamená záměrný atribut alt="". Pokyny W3C pro dekorativní obrázky jej odlišují od vynechání atributu. U obrázku produktové karty uvnitř odkazu může být prázdná alternativa vhodná, pokud tentýž odkaz obsahuje dostatečný text. Samostatný název produktu poblíž automaticky nepojmenuje odkaz tvořený pouze obrázkem.
Podrobné informace o velikosti nebo sestavení ponechte dostupné jako přístupný obsah stránky. Pokyny W3C pro složité obrázky požadují úplnější textové vysvětlení, pokud krátká alternativa informace nepředá. Nesnažte se vtěsnat pokyny z diagramu do krátkého popisu a zbytek zahodit.
Napište a uložte posouzený vzorek
Připravte vzorek, který lze zkontrolovat před použitím metody v celém katalogu. Použili bychom záznam s URL stránky, jazykem, vybranou variantou, odkazem na obrázek, účelem, navrženým zněním a výsledkem ověření. Miniatura nebo jasný odkaz na médium pomůže hodnotiteli přiřadit řádek ke skutečnému obrázku, aniž by musel hádat podle názvu souboru.
- Zaznamenejte přínos obrázku. Napište, co nakupující z tohoto pohledu potřebuje a co již poskytuje okolní text. Uveďte, zda je obrázek součástí odkazu nebo tlačítka.
- Navrhněte stručnou alternativu. Zachovejte rozlišující viditelný detail. Barvu a další relevantní údaje ověřte podle správné fotografie a záznamu v katalogu. Z vzhledu nevymýšlejte materiál, kapacitu ani certifikaci.
- Před přijetím návrhy posuďte. Vygenerovaný popis je návrh. Požádejte produktového editora, aby zkontroloval jeho obsah a účel včetně vybrané varianty a jazyka.
- Ověřte nevysvětlené stávající hodnoty. Pokud pole obsahuje skladové kódy nebo neobvyklé formátování, zeptejte se správce, zda na nich nezávisí vlastní logika galerie. Před hromadným nahrazením hodnot otestujte změny ve schváleném náhledu nebo jiném vratném vzorku.
- Uložte text v příslušném poli média. Aktuální nápověda Shopify pro počítače vás vede do sekce Produkty, ke konkrétnímu produktu a poté k jeho médiu. Zvolte Přidat alt text, zadejte posouzené znění a vyberte Uložit alt text. Tato cesta platí pro produktová média. Obrázky v popisech nebo sekcích motivu mohou mít jiné místo úprav.
- Předejte problémy s implementací správci. Pokud pole nebo ovládací prvek nedokáže vyjádřit požadovaný účel, poskytněte stránku, odkaz na obrázek a zamýšlený výsledek. V námi navrhované práci na e-shopu toto předání odděluje rozhodnutí o obsahu od změny motivu a jejího ověření.
Před změnou katalogu zkontrolujte e-shop
Po uložení otevřete příslušnou stránku e-shopu a zkontrolujte přesné umístění, které jste upravili. Ověřte textovou alternativu obrázku, přístupný název případného ovládacího prvku a dění při změně varianty nebo pohledu galerie. Pokud to nemůžete zkontrolovat sami, požádejte správce, aby před rozšířením úprav ukázal výstup a porovnal jej s vaším záznamem.
- Přiřaďte skutečný obrázek. Pomocí vývojářských nástrojů prohlížeče přečtěte atribut
altvykresleného obrázku, případně o to požádejte správce. Porovnejte jej s připraveným zněním a právě zobrazenou fotografií. - Ověřte název a akci ovládacího prvku. U odkazu nebo tlačítka zkontrolujte označení poskytované asistivním technologiím i alternativu obrázku. Ověřte, že uvedená akce nebo cíl odpovídá tomu, co nastane po aktivaci prvku. Samotný popis obrázku nemusí určit celý název ovládacího prvku.
- Změňte pohled a variantu. Otevřete detail zapínání, vyberte jinou viditelnou barvu a znovu ověřte odpovídající výstup. Pokud popis zůstane připojen k nesprávnému obrázku, zaznamenejte přesný sled kroků pro správce.
- Znovu otevřete stránku a příslušný jazyk. Ověřte, že uložená změna zůstala na zamýšleném místě. Nevyřešené případy evidujte samostatně, včetně situací vyžadujících prověření importu nebo překladového postupu.
Kontrola v prohlížeči ověřuje implementaci. Kvalifikované posouzení se čtečkou obrazovky může prověřit nákupní úkol s touto asistivní technologií. Jasně vymezte rozsah každého posouzení. W3C v Easy Checks upozorňuje, že předběžné kontroly nejsou konečné. Vyplněné pole ani tento vzorek proto nedokládají přístupnost celého obchodu. Naše první kontroly přístupnosti webu se věnují širším úkolům, jako jsou ovládání klávesnicí a formuláře.
Udržujte alternativy správné i po úpravě
Určete odpovědnost za zdrojový text a zopakujte příslušnou kontrolu při změně fotografie, varianty, jazyka, motivu nebo importu. Pokud katalog zásobuje více systémů, zjistěte, který z nich pole spravuje. Toto mapování bychom zařadili do postupu integrace katalogu a CRM, než rozšíříme ruční úpravy, které by mohl jiný proces přepsat.
Sledujte posouzená umístění, znění potvrzené v e-shopu a nevyřešené případy. Záznamy ukazují dokončenou práci i to, co ještě vyžaduje pozornost. Neměří vliv na prodej. Uchovávejte odkaz na obrázek, aktuální znění, editora a podnět k příští kontrole pohromadě, aby se stejného rozhodnutí mohl držet i někdo jiný.
Kde vám můžeme pomoci
Začali bychom pohledy na produkt a dohodli se, co má každý z nich sdělovat. Předání poté propojí znění editora s místem uložení, výstupem e-shopu a nevyřešeným chováním ovládacích prvků. Začněte vlastní záznam produktem, jehož galerie ukazuje odlišné detaily, a před rozšířením změn vzorek zkontrolujte.
