Blog.jirivanek.eu      Digitální zápisník

Jak nastavit náhradní text u ikonového boxu v Elementoru

Pokud byste se zeptali běžných uživatelů WordPressu, který widget v Elementoru používají nejvíce, troufám si říct, že mnoho z nich Vám odpoví, že je to widget textu a widget s ikonou. Ikonový box, jednoduše pojmenovaný jako “Ikona“, je vidět téměř na každém webu, jehož majitel používá Elementor. Důvod je jednoduchý, lze do něj vložit i odkaz, a tím z ikony udělat aktivní prvek, který může provádět přesměrování např. na sociální sítě.

I přes jeho velikou oblíbenost ale tento widget, docela výrazně snižuje hodnocení např. v Pagespeed insight, a to z jednoho prostého důvodu. Widget v základu nemá nikde výrazně označenou kolonku pro náhradní text. A to Google vidí jako chybu v přístupnosti.

Obsah článku

Co je to náhradní text?

Náhradní text a to, že je na odkazu nastavený se velice jednoduše pozná např. tak, že na odkaz najedete kurzorem myši. Tento náhradní text se pak zobrazí v podobě bubliny s popiskem. V reálu to vypadá asi takto:

Jak nastavit náhradní text u ikonového boxu v Elementoru

Je to v podstatě obdoba popisků u obrázku, která mimo jiné říká i vyhledávacímu robotovi, co má pod odkazem asi čekat. Tyto náhradní texty také mohou používat čtečky obrazovek. Pokud tento náhradní text nepoužijete, v testu pagespeed insight dostanete takovouto chybu:

Text odkazů (a náhradní text obrázků, když jsou použité jako odkazy), který je rozeznatelný a jedinečný a který lze vybrat, uživatelům čteček obrazovek usnadňuje procházení stránek. Další informace.

Jak nastavit náhradní text u ikonového boxu v Elementoru?

Je, ale zároveň i není to nastavení jednoduché. Samotné nastavení náhradního textu je triviální, avšak způsob provedení je v Elementoru takový, že praktický žádný začátečník tuto možnost nenajde. Proto pak na internetu vznikají mnohokrát dlouhé diskuze, kde uživatelé tuto funkci hledají, aby měli zdrojový kód webu v pořádku. 

Ano ikonový box tuto funkci opravdu má, i když zapeklitě skrytou.

Pokud tedy použijete ikonu v Elementoru a vložíte do ní odkaz, zkuste se příště ještě zaměřit i na pole “Vlastní atributy“. Protože k tomuto účelu toto pole mimo jiné slouží také.

Kde najdete pole “Vlastní atributy” a co do něj vložit, aby náhradní text fungoval?

Toto pole se skrývá v nastavení odkazu:

  • vložte do textu ikonu, vyberte vzhled, nastavte velikost a barvu
  • přidejte odkaz, na který má ikona směrovat
  • u odkazu klikněte na ozubené kolo pro jeho detailní nastavení
  • zaměřte se na pole “Vlastní atributy

Nyní máte dvě možnosti, jak toto pole využít pro vložení náhradního textu:

				
					title|náhradní text
aria-label|náhradní text
				
			

Jakmile v atributech použijete jeden z výše uvedených kódů pro title nebo aria-label a za rovné lomítko vložíte náhradní text, bude tento text použit jako popisek odkazu.

Video

Závěr

Pokud tedy ikony na svém webu používáte, a pokud do nich vkládáte odkazy, vřele doporučuji si opravdu dát tu práci i s náhradním textem a věnovat se ikoně o pár vteřin déle. Odměnou Vám bude zase o kousek čistější kód a lepší výsledky v Pagespeed insight (a nejen tam).

Více článků o Elementoru

Celá kategorie je zde

Byl pro Vás tento článek užitečný?

Klikni na počet hvězd pro hlasování.

Průměrné hodnocení. 0 / 5. Počet hlasování: 0

Zatím nehodnoceno! Buďte první

Jak užitečný vidíte tento článek.

Sledujte mě na sociálních médiích.

Je mi líto, že pro Vás nebyl článek užitečný.

Jak mohu vylepšit článek?

Řekněte mi, jak jej mohu zlepšit.

Odebírat
Upozornit na
guest
0 Komentáře/ů
Vložené zpětné vazby.
Zobrazit všechny komentáře.

Pokud mi chcete napsat rychlou zprávu, využije, prosím, níže uvedený
kontaktní formulář. Děkuji.

Další Kontaktní údaje