Co to jest aria-label?

aria-label to atrybut dostępnościowy (ang. Accessible Rich Internet Applications – ARIA), który pozwala na dodanie opisu elementu interfejsu, niewidocznego dla użytkowników widzących, ale dostępnego dla technologii asystujących, takich jak czytniki ekranu. Pomaga on zrozumieć, czym jest dany element lub jaką ma funkcję, szczególnie w sytuacjach, gdy sam element nie dostarcza wystarczających informacji (np. przy przyciskach zawierających jedynie ikony).

Jak działa aria-label?

Atrybut aria-label działa w taki sposób, że dostarcza alternatywny tekst, który opisuje dany element interfejsu użytkownika. Gdy użytkownik korzysta z czytnika ekranu, urządzenie odczytuje tekst znajdujący się w atrybucie aria-label, zamiast odczytywać zawartość wizualną elementu. Może być to szczególnie przydatne, gdy mamy ikony bez tekstu, interaktywne obrazy, lub przyciski, które nie mają wyraźnego podpisu.

Kiedy używać aria-label?

• Gdy element zawiera tylko ikony, a chcesz, aby użytkownicy technologii asystujących wiedzieli, do czego dany element służy.
• Gdy chcesz dostarczyć dodatkowy opis elementu, którego nie można zawrzeć w samej treści elementu.
• Gdy interaktywny element nie ma widocznej etykiety, ale musi być rozpoznawalny dla czytników ekranu.

Przykłady zastosowania aria-label

• Przycisk z ikoną Jednym z najczęstszych zastosowań aria-label jest opisanie przycisków, które zawierają tylko ikonę bez widocznego tekstu. Ikona może być zrozumiała dla widzących użytkowników, ale osoby korzystające z czytników ekranu mogą nie wiedzieć, do czego dany przycisk służy.
  
• Link z ikoną Jeśli masz link, który zawiera tylko ikonę (np. ikonę mediów społecznościowych), aria-label może zapewnić odpowiednią informację dla użytkowników korzystających z technologii asystujących.

Dobre praktyki przy używaniu aria-label

• Nie nadużywaj atrybutu aria-label. Używaj go tylko wtedy, gdy rzeczywiście jest to konieczne. W wielu przypadkach lepszym rozwiązaniem jest stosowanie standardowych etykiet HTML (label dla pól formularzy, alt dla obrazów).
• Krótko i na temat. Tekst w aria-label powinien być zwięzły, ale wystarczająco opisowy, aby zrozumieć funkcję elementu.
• Testowanie. Upewnij się, że twoja strona działa poprawnie z technologiami asystującymi, takimi jak czytniki ekranu. Regularne testy mogą pomóc wykryć problemy z dostępnością.

Jeśli przypiszesz tytuł do iframe, zdefiniujesz atrybut alt dla lub dodasz label do input, aria-label nie jest konieczny. Jednakże, jeśli atrybut aria-label jest obecny, ma on pierwszeństwo nad tytułem iframe, atrybutem alt obrazu lub tekstem label jako nazwa dostępna dla tego elementu.

Dla jakich elementów nie działaja atrybuty aria-label?

Nie wszystkie elementy mogą mieć przypisaną nazwę dostępną. Ani aria-label, ani aria-labelledby nie powinny być używane z elementami o rolach strukturalnych inline, takich jak:

• code
• caption
• definition
• deletion
• emphasis
• generic
• insertion
• mark
• paragraph
• presentation / none
• strong
• subscript
• superscript
• suggestion
• term
• time