Google explică text alternativ pentru sigle și butoane

Într-un podcast Google Search Off the Record, Lizzi Sassman și John Mueller de la Google discută cel mai bun mod de a gestiona textul alternativ pentru logo-uri și butoanele bazate pe imagini.

Există cele mai bune practici pentru adăugarea de atribute alt la sigle și butoane.

Regulile pot părea puțin complicate la început, dar sunt de fapt simplu de înțeles.

Obținerea corectă a atributelor alt este bună pentru utilizatori și, pe termen lung, este grozavă pentru câștiguri.

Adăugarea de text alternativ la imaginile funcționale

Lizzi Sassman începe discuția făcând o referire la imagini funcționale, imagini care au un scop funcțional pe pagina web.

Ea întreabă dacă textul alternativ ar trebui să descrie ce face butonul sau ce este imaginea de pe buton în situația în care un buton este o pictogramă.

În cele din urmă, ea întreabă dacă există un scop SEO pentru a adăuga text alternativ la imagini funcționale, cum ar fi butoanele.

„Lizzi Sassman:
… La nivelul de îngrijire în care îl cheltuim activului vizual, ar trebui să punem același nivel de energie și în cuvintele care descriu acel activ. Ceea ce cred că este grozav.

O altă categorie de imagini este ca cea funcțională, care uneori ar putea fi un buton.

Ca și cum ar fi o grafică care funcționează și ca ceva.

Deci textul alternativ ar trebui să-mi spună ce urmează să se întâmple?

Dacă dai clic pe aceasta, atunci te va duce aici?

Ar putea fi ca o imagine a ceva, care apoi funcționează și ca un buton.

Și descrii funcția, sau așa cum a fost, nu știu... ca o imagine cu săgeți?

Și, de asemenea, contează pentru SEO?

John Mueller:
Da. Cred…

Lizzi Sassman:
Ar putea fi ca un logo.

John Mueller:
Pentru accesibilitate, probabil că are sens, să faci ceva în jurul asta.

Dar pentru SEO, oamenii nu vor căuta butonul de plată sau ceva de genul.”

Textul alternativ de pe butoane este pentru accesibilitate, nu pentru SEO

John Mueller arată clar că nu există niciun scop SEO pentru adăugarea de text alternativ la butoane.

Dar el a observat, de asemenea, că textul alternativ pentru aceste tipuri de imagini sunt în principal din motive de accesibilitate.

Lizzi a continuat discuția:

„Lizzi Sassman:
…Dar poate ar fi pentru logo, sau ceva de genul logo-ului. Când dai clic pe el, te duce la pagina de pornire sau ceva de genul ăsta.

Dar este și „Oh, este un logo”.

Deci spuneți: „Acesta este sigla pentru Google Search Central”.

John Mueller:
Sigur.

Lizzi Sassman:
Sau ca ceea ce ar fi text descriptiv.

Este Googlebot în logo, dar lucrul care este cel mai important de știut despre imagine este faptul că este un logo?

Sau cum arată logo-ul?

Bănuiesc că din acest unghi, oamenii probabil caută logo-ul.

John Mueller:
Da.

Lizzi Sassman:

Cum ar fi sigla pentru compania X, poate?

John Mueller:
Da. Vreau să spun că se întoarce la un fel de strategie pe care încercăm să o evităm.

Pentru ce vrei să fii găsit?

Lizzi Sassman:
Da, dar asta e cea mai importantă întrebare, cred, pentru că atunci se cam orientează...

Mă pot lăsa dus de toate aceste gropi de iepure, așa că, nu știu, prioritizează la ce lucruri ar trebui să ne gândim, pentru că nu trebuie neapărat să scrieți toate lucrurile pentru aceste lucruri, Cred."

Utilizarea corectă a textului alternativ pe sigle și butoane

Modul corect de a utiliza text alternativ pe imagini precum logo-uri depinde de fapt dacă imaginea este un link sau nu.

Dacă imaginea logo-ului funcționează ca un link înapoi la pagina de pornire, atunci este corect să etichetați acea imagine cu funcția pe care o are, astfel încât un vizitator al site-ului care folosește un cititor de ecran să nu poată că acest logo este un link către pagina de pornire.

Organismul oficial de elaborare a standardelor HTML, The World Wide Web Consortium (W3C) publică un explicativ despre cum să gestionați logo-urile.

Link de la pagina de pornire logo

O siglă care funcționează ca link pentru pagina de pornire ar trebui să conțină un text alternativ care spune unui utilizator de cititor de ecran că logo-ul este un link către pagina de pornire.

W3C folosește acest exemplu de cod:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="Acasă W3C">
</a>

Codul de mai sus este pentru un logo pe care l-ar putea întâlni în partea de sus a paginii, care servește și ca link înapoi către pagina de pornire.

Exemplul de text alternativ oferit de W3C spune pur și simplu „W3C home”, dar ar putea fi mai descriptiv dacă doriți.

Link de la pagina de pornire pentru logo și text

Există și alte tipuri de link-uri de logo în care există o siglă de imagine și un text chiar lângă el sau dedesubt și atât imaginea, cât și textul sunt codificate în același cod de link.

Cu alte cuvinte, nu există două link-uri, cum ar fi un link pentru logo și un link pentru text, este doar un link atât pentru logo cât și pentru text împreună.

În acest caz, deoarece textul descrie funcția link-ului, ar fi repetitiv să se repete funcția link-ului logo.

Deci, pentru acest caz, cea mai bună practică este să folosiți un text alt nul.

Acesta este exemplul oferit de W3C:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> Acasă W3C
</a>

Observați cum este codificat atributul alt pentru imagine:

 img src="w3c.png" alt=""

Ghilimelele goale pentru textul alternativ se numesc un atribut alt nul (sau text alt nul). Un cititor de ecran îl va omite pur și simplu.

Motivul pentru care un text alt nul este bun este că există un text care descrie ce este funcția de legătură:

Acasă W3C

Alt text pentru un link pentru pictograme

Uneori, un link este sub forma unei pictograme, fără text care să explice ce face, de exemplu o pictogramă sub forma unui plic (reprezentând e-mail sau mesaj) sau o imprimantă (care indică că linkul activează o imprimantă).

În această situație, este o practică proastă să descrii ce este imaginea (cum ar fi un plic sau o imprimantă).

Cea mai bună practică este să descrii ceea ce face imaginea (inițiază un e-mail sau imprimă o pagină web).

W3C folosește exemplul unei pictograme de imprimantă cu următorul cod și text alternativ:

 <a href="javascript:print()">
<img src="print.png" alt="Tipărește această pagină">
</a>

După cum puteți vedea, pictograma în formă de imprimantă are cuvintele „Tipărește această pagină” ca text alternativ. Spune ce face pictograma. E de ajutor.

Alt text pentru un buton

Similar cu exemplul pictogramei, textul alternativ pentru o imagine de buton ar trebui să descrie ceea ce face imaginea.

W3C folosește exemplul unei casete de căutare care are o lupă pentru un buton de trimitere.

Modul prost de a face acest lucru este să folosiți textul alternativ pentru a descrie că imaginea este o lupă.

Cea mai bună practică este să utilizați textul alternativ pentru a descrie ceea ce face imaginea.

Acesta este exemplul de cod pe care W3C îl arată ca exemplu:

 <input type="image" src="searchbutton.png" alt="Căutare">

După cum puteți vedea, textul alternativ pentru butonul de căutare este cuvântul „Căutare”, care descrie care este funcția butonului.

Alt text pentru butoane și logo-uri

Lizzi și John nu au intrat în detalii despre cum să gestioneze diferitele scenarii pentru logo-uri și butoane.

Cu toate acestea, John a subliniat că nu există nicio valoare SEO pentru textul alternativ pentru butoane și logo-uri, este pentru accesibilitate.

Este cea mai bună practică să difuzați în mod corespunzător paginile web care sunt funcționale pentru utilizatorii care accesează pagini web cu cititoare de ecran.

După cum am menționat mai devreme, persoanele care folosesc cititoare de ecran pot fi clienți sau susținători ai afacerii sau site-ului dvs.

Prin urmare, este bine ca rezultatul final să folosească cele mai bune practici de accesibilitate.

Citate

Aflați mai multe despre accesibilitatea pentru butoane și sigle la W3C

Imagini funcționale

Combinarea imaginilor adiacente și a linkurilor text pentru aceeași resursă

Utilizarea atributelor alt pe imaginile folosite ca butoane de trimitere

Ascultă podcastul Search Off the Record la ora 15:57:

Imagine prezentată de Shutterstock/Evgeny Atamanenko