Google wyjaśnia tekst alternatywny dla logo i przycisków

W podkaście Google Search Off the Record Lizzi Sassman i John Mueller z Google omawiają najlepszy sposób obsługi tekstu alternatywnego w logo i przyciskach graficznych.

Istnieją sprawdzone metody dodawania atrybutów alt do logo i przycisków.

Zasady mogą początkowo wydawać się nieco skomplikowane, ale w rzeczywistości są łatwe do zrozumienia.

Poprawne ustawienie atrybutów alt jest dobre dla użytkowników, a na dłuższą metę jest świetne dla zarobków.

Dodawanie tekstu alternatywnego do obrazów funkcjonalnych

Lizzi Sassman rozpoczyna dyskusję od odniesienia do obrazów funkcjonalnych, obrazów, które mają funkcjonalny cel na stronie internetowej.

Pyta, czy tekst alternatywny powinien opisywać, co robi przycisk lub jaki jest obraz na przycisku w sytuacji, gdy przycisk jest ikoną.

Na koniec pyta, czy dodanie tekstu alternatywnego do funkcjonalnych obrazów, takich jak przyciski, ma jakiś cel SEO.

„Lizzi Sassman:
…Poziom staranności, z jaką poświęcamy uwagę zasóbowi wizualnemu, powinniśmy również włożyć ten sam poziom energii w słowa, które również opisują ten zasób. Co moim zdaniem jest świetne.

Inna kategoria obrazów jest jak rzecz funkcjonalna, którą czasami może być przycisk.

Jakby to była grafika, która również funkcjonuje jako coś.

Czy tekst alternatywny powinien informować mnie o tym, co ma się wydarzyć?

Jeśli to klikniesz, to zabierze cię tutaj?

Może być jak obraz czegoś, co działa również jako przycisk.

A czy opisujesz funkcję, czy też tak było, nie wiem… jak zdjęcie strzałki?

A także, czy ma to znaczenie dla SEO?

John Mueller:
Tak. Myślę…

Lizzi Sassman:
To może być jak logo.

John Mueller:
Jeśli chodzi o dostępność, prawdopodobnie ma to sens, po prostu zrobić coś wokół tego.

Ale w przypadku SEO ludzie nie będą szukać przycisku kasy ani czegoś takiego”.

Tekst alternatywny na przyciskach służy ułatwieniu dostępu, a nie SEO

John Mueller wyjaśnia, że ​​nie ma sensu SEO dodawania tekstu alternatywnego do przycisków.

Zauważył również, że tekst alternatywny dla tego rodzaju obrazów jest głównie ze względu na dostępność.

Lizzi kontynuowała dyskusję:

„Lizzi Sassman:
…Ale może za logo, albo coś w stylu logo. Kiedy go klikniesz, przeniesie Cię na stronę główną lub coś.

Ale to także: „Och, to logo”.

Czy powiesz: „To jest logo Centrum wyszukiwarki Google”.

John Mueller:
Pewny.

Lizzi Sassman:
Albo jak tekst opisowy.

W logo jest Googlebot, ale czy najważniejsze jest, aby wiedzieć o obrazie, że jest to logo?

Albo jak wygląda logo?

Myślę, że pod tym kątem ludzie prawdopodobnie szukają logo.

John Mueller:
Tak.

Lizzi Sassman:

Może na przykład jakie jest logo firmy X?

John Mueller:
Tak. Chodzi mi o to, że wracamy do strategii, której staramy się unikać.

Po co chcesz być znaleziony?

Lizzi Sassman:
Tak, ale to chyba najważniejsze pytanie, bo wtedy to jakby steruje…

Potrafię dać się ponieść wszystkim tym króliczym norom, więc w pewnym sensie, nie wiem, ustala się priorytety, o których powinniśmy myśleć, ponieważ nie musisz koniecznie pisać wszystkich rzeczy o tych rzeczach, Chyba."

Właściwe użycie tekstu alternatywnego na logo i przyciskach

Właściwy sposób użycia tekstu alternatywnego na obrazach, takich jak logo, zależy od tego, czy obraz jest linkiem, czy nie.

Jeśli obraz logo działa jako łącze do strony głównej, należy oznaczyć go etykietą z funkcją, którą ma, aby odwiedzający witrynę korzystający z czytnika ekranu nie mógł stwierdzić, że to logo jest łączem do strony głównej.

Oficjalny organ tworzący standard HTML, The World Wide Web Consortium (W3C) publikuje wyjaśnienie, jak obchodzić się z logo.

Link do strony głównej logo

Logo, które działa jako link do strony głównej, powinno zawierać tekst alternatywny informujący użytkownika czytnika ekranu, że logo jest linkiem do strony głównej.

W3C używa tego przykładu kodu:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt="Strona główna W3C">
</a>

Powyższy kod dotyczy logo, które można napotkać u góry strony, które służy również jako link do strony głównej.

Przykładowy tekst alternatywny dostarczony przez W3C mówi po prostu „dom W3C”, ale może być bardziej opisowy, jeśli chcesz.

Link do strony głównej z logo i tekstem

Istnieją inne rodzaje linków do logo, w których znajduje się logo obrazu i tekst tuż obok lub pod nim, a zarówno obraz, jak i tekst są zakodowane w tym samym kodzie linku.

Innymi słowy, nie ma dwóch linków, takich jak jeden link do logo i jeden link do tekstu, to tylko jeden link do logo i tekstu razem.

W takim przypadku, ponieważ tekst opisuje funkcję linku, powtórzenie funkcji linku logo byłoby powtarzalne.

W takim przypadku najlepszą praktyką jest użycie pustego tekstu alternatywnego.

Oto przykład, który podaje W3C:

 <a href="https://www.w3.org/">
<img src="w3c.png" alt=""> Strona główna W3C
</a>

Zwróć uwagę na kodowanie atrybutu alt dla obrazu:

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

Puste cudzysłowy dla tekstu alternatywnego są nazywane pustym atrybutem alt (lub pustym tekstem alt). Czytnik ekranu po prostu go pominie.

Powodem, dla którego pusty tekst alt jest dobry, jest to, że istnieje tekst opisujący funkcję linku:

Strona główna W3C

Tekst alternatywny linku do ikony

Czasami łącze ma postać ikony, bez tekstu wyjaśniającego, co robi, na przykład ikona w postaci koperty (reprezentująca wiadomość e-mail lub wiadomość) lub drukarki (co wskazuje, że łącze aktywuje drukarkę).

W tej sytuacji złą praktyką jest opisywanie, czym jest obraz (np. koperta lub drukarka).

Najlepszą praktyką jest opisanie działania obrazu (zainicjowanie wiadomości e-mail lub wydrukowanie strony internetowej).

W3C używa przykładu ikony drukarki z następującym kodem i tekstem alternatywnym:

 <a href="javascript:print()">
<img src="print.png" alt="Drukuj tę stronę">
</a>

Jak widać, ikona w kształcie drukarki zawiera słowa „Wydrukuj tę stronę” jako tekst alternatywny. Mówi, co robi ikona. To pomocne.

Tekst alternatywny przycisku

Podobnie jak w przypadku ikony, tekst alternatywny dla obrazu przycisku powinien opisywać, co robi obraz.

W3C używa przykładu pola wyszukiwania, które ma lupę dla przycisku przesyłania.

Złym sposobem na to jest użycie tekstu alternatywnego do opisania, że ​​obraz jest szkłem powiększającym.

Najlepszą praktyką jest użycie tekstu alternatywnego do opisania działania obrazu.

Oto przykładowy kod, który W3C pokazuje jako przykład:

 <input type="image" src="searchbutton.png" alt="Szukaj">

Jak widać, tekst alternatywny przycisku wyszukiwania to słowo „Szukaj”, które opisuje funkcję przycisku.

Tekst alternatywny dla przycisków i logo

Lizzi i John nie zagłębiali się w szczegóły, jak radzić sobie z różnymi scenariuszami dla logo i przycisków.

Jednak John zwrócił uwagę, że nie ma wartości SEO dla tekstu alternatywnego dla przycisków i logo, ale dla dostępności.

Najlepszym sposobem jest odpowiednie serwowanie stron internetowych, które są funkcjonalne dla użytkowników uzyskujących dostęp do stron internetowych za pomocą czytników ekranu.

Jak wspomniano wcześniej, osoby korzystające z czytników ekranu mogą być klientami lub rzecznikami Twojej firmy lub witryny.

Dlatego warto korzystać z najlepszych praktyk dotyczących ułatwień dostępu.

Cytaty

Dowiedz się więcej o dostępności przycisków i logo w W3C

Funkcjonalne obrazy

Łączenie sąsiednich linków graficznych i tekstowych dla tego samego zasobu

Używanie atrybutów alt na obrazach używanych jako przyciski przesyłania

Posłuchaj podcastu Search Off the Record o godzinie 15:57:

Polecane zdjęcie: Shutterstock/Evgeny Atamanenko