En un podcast de Google Search Off the Record, Lizzi Sassman i John Mueller de Google discuteixen la millor manera de gestionar el text alternatiu per a logotips i botons basats en imatges.
Hi ha bones pràctiques per afegir atributs alt als logotips i als botons.
Les regles poden semblar una mica complicades al principi, però en realitat són senzilles d’entendre.
Aconseguir els atributs alts correctes és bo per als usuaris i, a la llarga, és fantàstic per obtenir guanys.
Afegir text alternatiu a imatges funcionals
Lizzi Sassman comença la discussió fent una referència a imatges funcionals, imatges que tenen una finalitat funcional a la pàgina web.
Ella pregunta si el text alternatiu hauria de descriure què fa el botó o quina és la imatge del botó en la situació en què un botó és una icona.
Finalment, pregunta si hi ha un propòsit de SEO per afegir text alternatiu a imatges funcionals com els botons.
“Lizzi Sassman:
… El nivell d’atenció en què dediquem a l’actiu visual també hauríem de posar el mateix nivell d’energia en les paraules que descriuen aquest actiu. Cosa que em sembla genial.Una altra categoria d’imatges és com la funcional, que de vegades podria ser un botó.
Com si fos un gràfic que també funciona com a quelcom.
Aleshores, el text alternatiu hauria de dir-me què està a punt de passar?
Si feu clic aquí, us portarà fins aquí?
Podria ser com una imatge d’alguna cosa, que després també funciona com a botó.
I descrius la funció, o com també ho era, no ho sé… com una imatge de fletxa?
I també, importa per al SEO?
John Mueller:
Sí. Penso…Lizzi Sassman:
Podria ser com un logotip.John Mueller:
Per a l’accessibilitat, probablement tingui sentit, fer alguna cosa al voltant d’això.Però per al SEO, la gent no buscarà el botó de pagament, ni alguna cosa semblant”.
El text alternatiu dels botons és per a l’accessibilitat, no per a SEO
John Mueller deixa clar que no hi ha cap propòsit de SEO per afegir text alternatiu als botons.
Però també va observar que el text alternatiu d’aquest tipus d’imatges és principalment per raons d’accessibilitat.
Lizzi va continuar la discussió:
“Lizzi Sassman:
…Però potser ho farien pel logotip, o alguna cosa com el logotip. Quan hi feu clic, us portarà a la pàgina d’inici o alguna cosa així.Però també és: “Oh, és un logotip”.
Així que dius: “Aquest és el logotip de Google Search Central”.
John Mueller:
Segur.Lizzi Sassman:
O com el que seria un text descriptiu.És Googlebot al logotip, però el que és més important saber sobre la imatge és el fet que és un logotip?
O com és el logotip?
Suposo que des d’aquest angle, probablement la gent està buscant el logotip.
John Mueller:
Sí.Lizzi Sassman:
Com quin és el logotip de l’empresa X, potser?
John Mueller:
Sí. Vull dir que es remunta a una mena d’estratègia que estem intentant evitar.Per a què vols que et trobin?
Lizzi Sassman:
Sí, però aquesta és la pregunta més important, suposo, perquè aleshores s’orienta…Em puc deixar portar amb tots aquests forats de conill, així que, no ho sé, prioritza quines són les coses en què hauríem d’estar pensant, perquè no necessàriament cal escriure totes les coses per a aquestes coses, Suposo.”
L’ús adequat del text alternatiu en logotips i botons
La manera correcta d’utilitzar el text alternatiu en imatges com ara logotips depèn en realitat de si la imatge és un enllaç o no.
Si la imatge del logotip funciona com un enllaç de tornada a la pàgina d’inici, és correcte etiquetar aquesta imatge amb la funció que té, de manera que un visitant del lloc que utilitza un lector de pantalla no pugui que aquest logotip sigui un enllaç a la pàgina d’inici.
L’organisme oficial de creació d’estàndards HTML, The World Wide Web Consortium (W3C) publica una explicació sobre com gestionar els logotips.
Enllaç a la pàgina d’inici del logotip
Un logotip que funcioni com a enllaç a la pàgina d’inici ha de contenir un text alternatiu que indiqui a un usuari del lector de pantalla que el logotip és un enllaç a la pàgina d’inici.
El W3C utilitza aquest exemple de codi:
<a href="https://www.w3.org/"> <img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt="W3C home"> </a>
El codi anterior és per a un logotip que es pot trobar a la part superior de la pàgina que també serveix com a enllaç a la pàgina d’inici.
El text alternatiu d’exemple proporcionat pel W3C simplement diu “W3C home”, però podria ser més descriptiu si voleu.
Logotip i text Enllaç a la pàgina d’inici
Hi ha altres tipus d’enllaços de logotip on hi ha un logotip d’imatge i un text just al costat o sota d’ell i tant la imatge com el text estan codificats dins del mateix codi d’enllaç.
En altres paraules, no hi ha dos enllaços, com ara un enllaç per al logotip i un enllaç per al text, només és un enllaç per al logotip i el text junts.
En aquest cas, com que el text descriu la funció de l’enllaç, seria repetitiu repetir la funció de l’enllaç del logotip.
Per tant, per a aquest cas, la millor pràctica és utilitzar un text alt nul.
Aquest és l’exemple que proporciona el W3C:
<a href="https://www.w3.org/"> <img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""> W3C Home </a>
Tingueu en compte com es codifica l’atribut alt per a la imatge:
img src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png" alt=""
Les cometes buides per al text alternatiu s’anomena atribut alt nul (o text alt nul). Un lector de pantalla simplement l’ometrà.
El motiu pel qual un text alt nul és bo és perquè hi ha un text que descriu quina és la funció d’enllaç:
Inici W3C
Text alternatiu per a un enllaç d’icones
De vegades, un enllaç té la forma d’una icona, sense text per explicar què fa, per exemple, una icona en forma de sobre (que representa un correu electrònic o missatge) o una impressora (que indica que l’enllaç activa una impressora).
Per a aquesta situació, és una mala pràctica descriure quina és la imatge (com un sobre o una impressora).
La millor pràctica és descriure què fa la imatge (iniciar un correu electrònic o imprimir una pàgina web).
El W3C utilitza l’exemple d’una icona d’impressora amb el codi i text alternatiu següents:
<a href="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/javascript:print()"> <img src="print.png" alt="Print this page"> </a>
Com podeu veure, la icona en forma d’impressora té les paraules “Imprimeix aquesta pàgina” com a text alternatiu. Explica què fa la icona. Això és útil.
Text alternatiu per a un botó
De manera similar a l’exemple de la icona, el text alternatiu d’una imatge de botó hauria de descriure què fa la imatge.
El W3C utilitza l’exemple d’un quadre de cerca que té una lupa per a un botó d’enviament.
La mala manera de fer-ho és utilitzar el text alternatiu per descriure que la imatge és una lupa.
La millor pràctica és utilitzar el text alternatiu per descriure el que fa la imatge.
Aquest és el codi d’exemple que el W3C mostra com a exemple:
<input type="image" src="https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/searchbutton.png" alt="Search">
Com podeu veure, el text alternatiu del botó de cerca és la paraula “Cerca” que descriu quina és la funció del botó.
Text alternatiu per a botons i logotips
Lizzi i John no van entrar en els detalls de com gestionar els diferents escenaris per als logotips i els botons.
Tanmateix, John va assenyalar que no hi ha cap valor SEO per al text alternatiu per als botons i logotips, és per a l’accessibilitat.
És una pràctica recomanada oferir pàgines web que siguin funcionals per als usuaris que accedeixen a pàgines web amb lectors de pantalla.
Com s’ha esmentat anteriorment, les persones que utilitzen lectors de pantalla poden ser clients o defensors del vostre negoci o lloc web.
Per tant, és bo que els resultats utilitzin les millors pràctiques d’accessibilitat.
Citacions
Obteniu més informació sobre l’accessibilitat per als botons i logotips al W3C
Combinant enllaços d’imatge i text adjacents per al mateix recurs
Ús d’atributs alt a les imatges utilitzades com a botons d’enviament
Escolteu el podcast Search Off the Record a les 15:57 minuts:
Imatge destacada de Shutterstock/Evgeny Atamanenko
