Tekst alternatywny - jak pisać, by wspierał SEO i dostępność?

Tekst alternatywny to jeden z tych elementów HTML, które łatwo zlekceważyć, a potem najbardziej ich brakuje: w dostępności, w czytelności treści i w tym, jak wyszukiwarki rozumieją obraz. Dobrze napisany opis grafiki pomaga użytkownikom korzystającym z czytników ekranu, wyjaśnia sens obrazu, gdy plik się nie wczyta, i porządkuje komunikację na stronie. W tym tekście pokazuję, jak pisać go sensownie, kiedy zostawić pusty, a kiedy opisać obraz krótko, a kiedy szerzej.

Po co jest tekst alternatywny i kiedy naprawdę ma znaczenie

W praktyce patrzę na tekst alternatywny jak na opis funkcji obrazu, a nie jego wyglądu dla samego wyglądu. Jeśli obraz przekazuje informację, decyzję zakupową, instrukcję albo element interfejsu, użytkownik musi dostać tę samą wartość także bez widoku grafiki. To jest ważne nie tylko dla osób korzystających z czytników ekranu, ale też wtedy, gdy obraz nie wczyta się z powodu błędu, blokady lub słabego połączenia.

Najprostsza reguła brzmi: jeśli usunę obraz i treść traci sens, alt ma ten sens przenieść. Jeśli obraz niczego nie tłumaczy, tylko wzmacnia układ strony, jego opis powinien zniknąć. Dzięki temu nie przeciążasz odbiorcy dodatkowymi komunikatami, a strona pozostaje czytelna w różnych warunkach i na różnych urządzeniach. Z tego punktu łatwo przejść do pytania, jak taki opis napisać dobrze, a nie tylko poprawnie technicznie.

Jak pisać dobry tekst alternatywny

Dobry alt opisuje to, co użytkownik musi wiedzieć, a nie wszystko, co da się zobaczyć. Nie zapisuję w nim „zdjęcie przedstawia”, nie rozpisuję się o detalach, które nic nie wnoszą, i nie próbuję upchnąć słów kluczowych na siłę. Lepszy jest opis krótki, precyzyjny i dopasowany do kontekstu strony niż długi akapit, którego nikt nie potrzebuje.

• Opisuj funkcję, nie piksele. Zamiast „niebieski prostokąt” napisz, że to przycisk „Pobierz PDF”, jeśli właśnie to ma znaczenie.
• Zaczynaj od najważniejszej informacji. W obrazie produktu najpierw podaj cechę, która odróżnia go od innych.
• Trzymaj się zwięzłości. W większości przypadków wystarcza jedno zdanie albo krótka fraza.
• Nie kopiuj podpisu pod zdjęciem bezrefleksyjnie. Podpis i alt mogą się uzupełniać, ale nie muszą być identyczne.
• Uważaj na obrazy z tekstem. Jeśli grafika zawiera istotny napis, alt powinien oddać jego treść albo lepiej, gdy taki napis będzie zwykłym tekstem HTML.
• Dopasuj opis do otoczenia. Ten sam obraz na karcie produktu i w artykule blogowym może wymagać innego altu.

Przykład praktyczny: dla zdjęcia produktu lepsze będzie alt="Białe buty do biegania z amortyzowaną podeszwą" niż alt="buty sportowe". Wykres sprzedaży nie potrzebuje katalogu osi i punktów, tylko krótkiego streszczenia, na przykład alt="Wykres pokazuje wzrost sprzedaży od marca do sierpnia". Jeśli obraz jest złożony, resztę dopowiadam w treści artykułu albo w osobnym opisie pod ilustracją. To właśnie ten podział robi największą różnicę w praktyce.

Najłatwiej zobaczyć to na kodzie, bo właśnie tam najczęściej widać, czy opis jest przemyślany, czy tylko dopisany na szybko.

[search_image]przykłady alt atrybutu w HTML na obrazach i zrzutach ekranu kodu

Jak wygląda poprawne wdrożenie w HTML

W HTML atrybut alt wpisuję bezpośrednio do elementu . To on jest miejscem na tekst alternatywny, nie w i nie jakiś dodatkowy trik z CSS. Jeśli korzystasz z obrazów responsywnych, zasada się nie zmienia: opis nadal należy do właściwego znacznika obrazu.

Jeśli obraz jest tylko ozdobą, zapisuję go tak:

Ważny szczegół: w pustym alt nie powinno być nawet spacji. To drobiazg, ale w dostępności takie drobiazgi decydują o tym, czy czytnik ekranu uzna grafikę za pomijalną. W praktyce nie liczę też na title jako zamiennik altu, bo to dodatek, a nie podstawowy opis obrazu. Z tego miejsca łatwo przejść do pytania, kiedy pusty alt jest dobrym wyborem, a kiedy byłby błędem.

Kiedy zostawić alt pusty

Pusty atrybut nie oznacza braku dbałości. Oznacza, że obraz nie niesie informacji, którą trzeba przekazać użytkownikowi. To ważne rozróżnienie, bo wiele osób wciąż traktuje pusty alt jak brak opisu, a to nie to samo. Dobrze użyty alt="" redukuje szum i pozwala skupić uwagę na treści, która naprawdę ma znaczenie.

Jeżeli obraz jest dekoracyjny, często lepiej podać go jako tło w CSS niż przez . Jeśli jednak już używasz znacznika obrazu, alt="" jest poprawnym i świadomym rozwiązaniem. To właśnie tutaj najczęściej pojawia się chaos: ktoś wpisuje opis dla wszystkiego albo zostawia puste pole przy grafice, która jednak coś komunikuje. Po opanowaniu tej różnicy łatwiej zrozumieć, jak alt działa po stronie dostępności i SEO.

Jak alt wspiera dostępność i SEO, ale nie zastępuje treści

Od strony dostępności tekst alternatywny staje się częścią dostępnej nazwy obrazu. Czytnik ekranu wykorzystuje go po to, żeby użytkownik wiedział, co przedstawia grafika albo do czego służy element. Jeśli obraz jest linkiem, alt w praktyce pełni rolę opisu tego, dokąd prowadzi kliknięcie lub jaką akcję uruchamia.

Od strony SEO alt pomaga wyszukiwarce zrozumieć temat obrazu i jego związek z treścią strony. Nie traktuję jednak tego jak miejsca na sztuczne upychanie fraz. O wiele lepiej działa naturalny opis, sensowna nazwa pliku, obraz osadzony blisko właściwego akapitu i spójna treść wokół grafiki. W praktyce wyszukiwarki czytają cały kontekst, a nie sam jeden atrybut.

Warto też pamiętać, że na urządzeniach mobilnych zasada się nie zmienia: opis obrazu powinien być taki sam, jak na wersji desktopowej, a nie uproszczony tylko dlatego, że ekran jest mniejszy. Jeśli używasz grafiki w sklepie lub na stronie usługowej, opis ma pomagać ludziom i robotom, ale nie powinien udawać całej strategii SEO. Dobrze napisany alt jest wsparciem, nie zastępstwem dla jakości strony. Kiedy to rozumiesz, łatwiej wyłapać błędy, które najczęściej psują efekt.

Najczęstsze błędy, które psują efekt

Największe problemy z alt nie wynikają z braku wiedzy technicznej, tylko z pośpiechu. Z własnego doświadczenia widzę trzy powtarzalne schematy: opis zbyt ogólny, opis napakowany słowami kluczowymi i brak rozróżnienia między grafiką informacyjną a ozdobną. Każdy z nich obniża wartość strony, nawet jeśli kod wygląda na poprawny.

• „Zdjęcie”, „obrazek”, „grafika” bez żadnej treści nie mówią nic użytkownikowi.
• Keyword stuffing w stylu upychania wielu wariantów frazy wygląda sztucznie i szkodzi czytelności.
• Pusty alt przy obrazie informacyjnym odbiera użytkownikowi ważną część komunikatu.
• Zbyt długi opis męczy bardziej niż pomaga, szczególnie przy prostych ilustracjach.
• Ten sam alt dla wszystkich zdjęć w sklepie utrudnia odróżnienie produktów i obniża jakość indeksacji.
• Trzymanie istotnej grafiki wyłącznie w CSS sprawia, że nie da się jej sensownie opisać w HTML.
• Brak spójności z podpisem i treścią powoduje, że obraz wygląda jak doklejony przypadek, a nie część komunikacji.

Najlepsza korekta jest zwykle prosta: skrócić opis, usunąć sztuczność i dopisać tylko to, co faktycznie wnosi wartość. Jeśli obraz ma wspierać sprzedaż, opis powinien pomagać rozróżnić produkt. Jeśli ma tłumaczyć proces, alt ma streszczać proces, a nie zachwycać stylistyką. Z tej perspektywy dobrze widać, jak wdrożyć wszystko bez bałaganu na stronie firmowej, sklepie i blogu.

Jak wdrożyć alt bez chaosu na stronie firmowej, sklepie i blogu

Ja stosuję prostą zasadę redakcyjno-technicznej kontroli: zanim opublikuję stronę, pytam, co konkretnie wnosi każdy obraz i czy można to powiedzieć jednym zdaniem. W zależności od typu serwisu wygląda to trochę inaczej, ale logika pozostaje taka sama.

• Na stronie firmowej opisuję zdjęcia zespołu, realizacji, sprzętu i efektów pracy, bo budują wiarygodność.
• W sklepie opisuję produkt, wariant, kolor i cechę odróżniającą, bo to wspiera decyzję zakupową.
• Na blogu skracam alt przy ilustracjach, ale dokładniej opisuję wykresy, schematy i screeny.
• Przy elementach dekoracyjnych zostawiam alt="" albo przenoszę obraz do CSS, jeśli to możliwe.
• Przed publikacją sprawdzam, czy obraz dalej ma sens po odczytaniu bez grafiki.

W praktyce najlepiej działa jeszcze jedna kontrola: czy opis odpowiada na pytanie „co użytkownik ma z tego obrazu zrozumieć?”. Jeśli odpowiedź jest konkretna, alt jest gotowy. Jeśli zaczynam dopisywać ozdobniki, zwykle oznacza to, że opis jest już zbyt długi albo nie na temat. To właśnie ta dyscyplina robi największą różnicę między poprawnym a naprawdę użytecznym wdrożeniem.

Jeśli miałbym zostawić jedną regułę na koniec, byłaby prosta: opisuj tylko to, co ma znaczenie dla odbiorcy w danym kontekście. Wtedy atrybut alt wspiera dostępność, porządkuje treść i pomaga wyszukiwarkom bez sztucznego SEO, a strona staje się po prostu lepiej zrobiona.