Atrybut aria-label to atrybut HTML należący do specyfikacji WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications), który pozwala nadać elementowi interfejsu tekstową etykietę dostępną wyłącznie dla technologii asystujących, takich jak czytniki ekranu. Stosuje się go wtedy, gdy element nie posiada widocznej etykiety tekstowej lub gdy etykieta domyślna jest niewystarczająca, by przekazać użytkownikowi pełen kontekst danej kontrolki.
aria-labelnie jest widoczny na ekranie — czyta go wyłącznie czytnik ekranu lub inne oprogramowanie wspomagające.- Stosuje się go głównie na przyciskach, linkach, polach formularzy i elementach interaktywnych bez widocznego opisu.
- Ma wyższy priorytet niż natywna etykieta elementu (
<label>) w drzewie dostępności. - Dobra implementacja
aria-labelwpływa na ocenę dostępności strony w Google Lighthouse i Core Web Vitals.
Jak atrybut aria-label działa w praktyce
Składnia i podstawowe użycie
Atrybut aria-label dodaje się bezpośrednio do znacznika HTML jako zwykły atrybut z wartością tekstową. Wartość ta staje się “dostępną nazwą” (accessible name) elementu w drzewie dostępności — strukturze, na podstawie której czytniki ekranu odczytują interfejs użytkownika.
Przykład przycisku zamknięcia okna modalnego, który wizualnie wyświetla jedynie ikonę “×”:
<button aria-label="Zamknij okno">×</button>
Bez aria-label czytnik ekranu odczyta ten przycisk jako “times” lub w ogóle pominie jego znaczenie. Po dodaniu atrybutu użytkownik usłyszy: “Zamknij okno, przycisk”.
Kiedy stosować aria-label, a kiedy inne atrybuty ARIA
Specyfikacja WAI-ARIA oferuje kilka mechanizmów nadawania dostępnych nazw elementom — wybór właściwego zależy od kontekstu.
| Mechanizm | Kiedy stosować | Przykład |
|---|---|---|
aria-label | Brak widocznej etykiety; etykieta ma być inna niż widoczny tekst | Ikona bez opisu tekstowego |
aria-labelledby | Etykieta istnieje w DOM jako osobny element | Nagłówek sekcji jako etykieta regionu |
<label for> | Standardowe pola formularza z widocznym opisem | Pole “Imię” w formularzu kontaktowym |
alt na <img> | Obrazy niosące treść (nie dekoracyjne) | Logo firmy w nagłówku |
Zasada brzmi: jeśli w DOM istnieje widoczny element, który może pełnić rolę etykiety, użyj aria-labelledby. Jeśli etykiety nie ma lub ma być inna niż tekst widoczny na ekranie — sięgaj po aria-label.
Najczęstsze przypadki użycia
W codziennej pracy z kodem najczęściej aria-label pojawia się w kilku powtarzalnych sytuacjach:
- Przyciski ikon — “koszyk”, “szukaj”, “menu hamburger” bez towarzyszącego tekstu.
- Linki z tym samym tekstem — gdy strona zawiera wiele linków “Czytaj więcej” prowadzących do różnych artykułów; każdy powinien mieć unikalny
aria-label, np.aria-label="Czytaj więcej o pozycjonowaniu lokalnym". - Pola wyszukiwarki — gdy brakuje widocznego znacznika
<label>. - Elementy nawigacji — gdy strona zawiera kilka elementów
<nav>, warto je rozróżnić:aria-label="Nawigacja główna"iaria-label="Nawigacja w stopce". - Iframe — każda ramka powinna mieć
aria-labellubtitleopisujący jej zawartość.
Najczęstsze błędy przy stosowaniu aria-label
Błędna implementacja aria-label bywa gorsza niż jej brak — może dezorientować użytkowników korzystających z czytników ekranu. Trzy błędy powtarzają się najczęściej:
- Powielanie widocznego tekstu — jeśli przycisk zawiera tekst “Wyślij formularz”, dodawanie
aria-label="Wyślij formularz"jest zbędne i generuje szum informacyjny. - Nadużywanie na elementach nieinaktywnych —
aria-labelna<div>bez roli ARIA nie zadziała tak, jak się można spodziewać. - Niespójność języka — etykieta powinna być w tym samym języku co reszta strony; etykiety w obcym języku mogą powodować błędne odczytanie przez syntezator mowy.
Znaczenie aria-label dla SEO i widoczności
Atrybut aria-label nie jest czynnikiem rankingowym w klasycznym rozumieniu, ale jego wpływ na pozycjonowanie stron jest pośredni i całkiem wymierny. Google konsekwentnie włącza dostępność do zestawu sygnałów jakości strony — narzędzie Lighthouse ocenia stronę w kategorii Accessibility, a wyniki tej oceny współgrają z ogólną oceną jakości w kontekście Core Web Vitals i sygnałów E-E-A-T.
Strony z niską dostępnością tracą potencjalne kliknięcia ze strony użytkowników korzystających z technologii asystujących — szacuje się, że w Polsce z czytników ekranu korzysta od 1 do 3% internautów. Dla sklepu generującego 50 000 wizyt miesięcznie to od 500 do 1 500 użytkowników, którzy mogą mieć problem z nawigacją po serwisie pozbawionym poprawnych etykiet ARIA.
Czytniki ekranu indeksujące treść (Google korzysta z mechanizmów zbliżonych do tych, których używają technologie asystujące) mogą lepiej zrozumieć strukturę nawigacyjną strony, gdy elementy interaktywne mają precyzyjne etykiety. Dla pozycjonowania sklepów internetowych szczególne znaczenie mają przyciski “Dodaj do koszyka” oraz filtry produktowe — jeśli brakuje im widocznych etykiet, aria-label staje się niezbędny zarówno dla dostępności, jak i dla poprawnego odczytu przez bota.
W standardzie WCAG 2.1 (Web Content Accessibility Guidelines) poprawne etykietowanie elementów interaktywnych to kryterium sukcesu 4.1.2 na poziomie AA — tym samym, który obowiązuje podmioty publiczne i coraz częściej jest wymagany przez klientów korporacyjnych w specyfikacjach zamówień.
FAQ
Czy aria-label wpływa na widoczny tekst na stronie?
Nie — aria-label jest całkowicie niewidoczny dla użytkownika przeglądającego stronę wzrokowo. Jego treść trafia wyłącznie do drzewa dostępności, z którego korzystają czytniki ekranu, oprogramowanie do sterowania głosem i inne technologie asystujące. Nie zmienia wyglądu elementu ani nie pojawia się jako tooltip.
Czy aria-label działa na każdym elemencie HTML?
Technicznie atrybut można dodać do dowolnego elementu, ale przynosi efekt tylko na elementach, które mają rolę w drzewie dostępności — czyli na elementach interaktywnych (<button>, <a>, <input>) oraz na elementach z jawnie przypisaną rolą ARIA (role="region", role="dialog" itp.). Dodanie aria-label do zwykłego <div> bez roli nie przyniesie żadnego efektu dla czytnika ekranu.
Czym różni się aria-label od atrybutu title?
Atrybut title generuje wizualny tooltip po najechaniu kursorem i bywa odczytywany przez czytniki ekranu — jednak jego obsługa przez technologie asystujące jest niespójna między przeglądarkami. aria-label jest niezawodny i przewidywalny: zawsze trafia do drzewa dostępności jako dostępna nazwa elementu. W praktyce dla celów dostępności zawsze wybieraj aria-label zamiast title.
Jak sprawdzić, czy aria-label działa poprawnie?
Najprostszą metodą jest narzędzie Accessibility Tree w DevTools przeglądarki Chrome lub Firefox (zakładka Accessibility w panelu inspektora). Warto też uruchomić audyt w Google Lighthouse — raporty w kategorii Accessibility wskazują elementy z brakującymi etykietami. Dla bardziej zaawansowanej weryfikacji sprawdza się NVDA (darmowy czytnik ekranu dla Windows) lub VoiceOver wbudowany w macOS i iOS.
Etykiety ARIA — mały atrybut, duży wpływ na jakość serwisu
Poprawne stosowanie aria-label to jeden z tych elementów technicznych, który kosztuje niewiele czasu przy wdrożeniu, a zwraca się w postaci lepszej dostępności, wyższej oceny Lighthouse i precyzyjniejszego odczytu interfejsu przez boty. Jeśli chcesz wiedzieć, czy Twoja strona wymaga poprawek w tym obszarze, warto zacząć od audytu SEO, który obejmuje również sprawdzenie struktury dostępności — lub skontaktuj się z Webiti, by porozmawiać o pozycjonowaniu stron z uwzględnieniem standardów WCAG.
