Følgende artikel hjælper dig med: Google forklarer alt tekst til logoer og knapper
I en Google Search Off the Record-podcast diskuterer Googles Lizzi Sassman og John Mueller den bedste måde at håndtere alt-tekst til logoer og billedbaserede knapper på.
Der er bedste praksis for at tilføje alt-attributter til logoer og knapper.
Reglerne kan virke lidt komplicerede i starten, men de er faktisk nemme at forstå.
At få alt-attributterne rigtige er godt for brugerne, og i det lange løb er det fantastisk for indtjeningen.
Tilføjelse af alternativ tekst til funktionelle billeder
Lizzi Sassman starter diskussionen med at henvise til funktionelle billeder, billeder der har et funktionelt formål på websiden.
Hun spørger, om alt-teksten skal beskrive, hvad knappen gør, eller hvad billedet på knappen er i den situation, hvor en knap er et ikon.
Til sidst spørger hun, om der er et SEO-formål med at tilføje alt-tekst til funktionelle billeder som knapper.
“Lizzi Sassman:
…Det niveau af omsorg, som vi bruger på det visuelle aktiv, bør vi også lægge samme niveau af energi i ordene, der beskriver det aktiv. Hvilket jeg synes er fantastisk.
En anden kategori af billeder er ligesom den funktionelle ting, som nogle gange kunne være en knap.
Som om det er en grafik, der også fungerer som noget.
Så skal alt-teksten fortælle mig, hvad der er ved at ske?
Hvis du klikker på dette, vil det så føre dig hertil?
Det kunne være som et billede af noget, der så også fungerer som en knap.
Og beskriver du funktionen, eller som den også var, jeg ved det ikke… som et pilbillede?
Og også, betyder det noget for SEO?
John Mueller:
Ja. Jeg tror…
Lizzi Sassman:
Det kunne være som et logo.
John Mueller:
For tilgængeligheden giver det nok mening, bare at gøre noget omkring det.
Men for SEO vil folk ikke søge efter checkout-knappen eller sådan noget.”
Alt tekst på knapper er til tilgængelighed ikke SEO
John Mueller gør det klart, at der ikke er noget SEO-formål med at tilføje alt-tekst til knapper.
Men han bemærkede også, at alt-teksten til denne slags billeder primært er af tilgængelighedshensyn.
Lizzi fortsatte diskussionen:
“Lizzi Sassman:
…Men måske ville de have logoet eller noget i stil med logoet. Når du klikker på det, fører det dig til hjemmesiden eller noget.
Men det er også, “Åh, det er et logo.”
Så siger du, “Dette er logoet for Google Search Central.”
John Mueller:
Jo da.
Lizzi Sassman:
Eller som hvad der ville være beskrivende tekst.
Det er Googlebot i logoet, men er det, der er vigtigst at vide om billedet, det faktum, at det er et logo?
Eller hvordan ser logoet ud?
Jeg tror fra den vinkel, at folk nok leder efter logoet.
John Mueller:
Ja.
Lizzi Sassman:
Hvad er logoet for X-firmaet, måske?
John Mueller:
Ja. Jeg mener, det går tilbage til den slags strategi, som vi prøver at undgå.
Hvad vil du gerne findes til?
Lizzi Sassman:
Ja, men det er vel det vigtigste spørgsmål, for så styrer det ligesom…
Jeg kan lade mig rive med af alle disse kaninhuller, så det ved jeg ikke, prioriterer på en måde, hvad det er for ting, vi skal tænke på, for du behøver ikke nødvendigvis at skrive alle tingene til disse ting, Jeg tror.”
Korrekt brug af alt-tekst på logoer og knapper
Den rigtige måde at bruge alt-tekst på billeder som logoer afhænger faktisk af, om billedet er et link eller ikke et link.
Hvis logobilledet fungerer som et link tilbage til startsiden, er det korrekt at mærke det billede med den funktion, det har, så en besøgende, der bruger en skærmlæser, ikke kan se, at dette logo er et link til hjemmesiden.
Det officielle organ for fremstilling af HTML-standarder, The World Wide Web Consortium (W3C) udgiver en forklarer om hvordan man håndterer logoer.
Logo Hjemmeside Link
Et logo, der fungerer som et startsidelink, bør indeholde alt-tekst, der fortæller en skærmlæserbruger, at logoet er et hjemmesidelink.
W3C bruger dette eksempel på koden:
Ovenstående kode er til et logo, som man kan støde på øverst på siden, der også fungerer som et link tilbage til startsiden.
Eksemplet på alt-teksten fra W3C siger blot “W3C home”, men den kunne være mere beskrivende, hvis du vil.
Link til logo og tekst til hjemmesiden
Der er andre former for logolinks, hvor der er et billedlogo og en tekst lige ved siden af eller under det, og både billedet og teksten er kodet inden for den samme linkkode.
Med andre ord er der ikke to links, såsom ét link til logoet og ét link til teksten, det er kun ét link til både logoet og teksten sammen.
I så fald, fordi teksten beskriver linkets funktion, ville det være gentaget at gentage logolinkets funktion.
Så i det tilfælde er den bedste praksis at bruge en null alt-tekst.
Dette er eksemplet, som W3C giver:
W3C Home Bemærk, hvordan alt-attributten er kodet for billedet:
img src=”https://www.searchenginejournal.com/alt-text-for-logos-and-buttons/469801/w3c.png” alt=””
De tomme anførselstegn for alt-teksten kaldes en null alt-attribut (eller null alt-tekst). En skærmlæser vil simpelthen springe den over.
Grunden til at en null alt-tekst er god, er fordi der er tekst, der beskriver, hvad linkfunktionen er:
W3C Hjem
Alt-tekst til et ikonlink
Nogle gange er et link i form af et ikon, uden tekst til at forklare, hvad det gør, for eksempel et ikon i form af en konvolut (repræsenterer e-mail eller besked) eller en printer (hvilket indikerer, at linket aktiverer en printer).
I denne situation er det en dårlig praksis at beskrive, hvad billedet er (som en konvolut eller en printer).
Den bedste praksis er at beskrive, hvad billedet gør (start en e-mail eller udskriv en webside).
W3C bruger eksemplet med et printerikon med følgende kode og alternativ tekst:
Som du kan se, har ikonet i form af en printer ordene “Udskriv denne side” som alternativ tekst. Det fortæller, hvad ikonet gør. Det er nyttigt.
Alt tekst til en knap
I lighed med eksemplet med ikonet skal alt-teksten for et knapbillede beskrive, hvad billedet gør.
W3C bruger eksemplet med et søgefelt, der har et forstørrelsesglas til en send-knap.
Den dårlige måde at gøre det på er at bruge alt-teksten til at beskrive, at billedet er et forstørrelsesglas.
Den bedste praksis er at bruge alt-teksten til at beskrive, hvad billedet gør.
Dette er eksempelkoden, som W3C viser som et eksempel:
Som du kan se, er alt-teksten for søgeknappen ordet “Søg”, som beskriver, hvad knappens funktion er.
Alt tekst til knapper og logoer
Lizzi og John kom ikke ind i detaljerne om, hvordan man håndterer de forskellige scenarier for logoer og knapper.
Men John påpegede, at der ikke er nogen SEO-værdi for alt-tekst til knapper og logoer, det er for tilgængelighed.
Det er en god praksis at betjene websider, der er funktionelle for brugere, der får adgang til websider med skærmlæsere.
Som tidligere nævnt kan folk, der bruger skærmlæsere, være kunder eller fortalere for din virksomhed eller hjemmeside.
Så det er godt for bundlinjen at bruge bedste praksis for tilgængelighed.
Citater
Lær mere om tilgængelighed for knapper og logoer på W3C
Kombination af tilstødende billed- og tekstlinks til den samme ressource
Brug af alt-attributter på billeder, der bruges som indsend-knapper
Lyt til Search Off the Record-podcasten efter 15:57 minutter:
