Obliczanie dostępnej nazwy bez tajemnic

Dostępna nazwa to krótka etykieta odczytywana przez czytnik ekranu dla danego elementu, na przykład „Wyślij” dla przycisku lub „Szukaj” dla pola.

Jeśli element nie ma dostępnej nazwy, czytnik ekranu ogłasza tylko jego rolę, na przykład „przycisk”, pozostawiając użytkownika bez informacji o jego działaniu.

Nazwę rzadko ustawia się bezpośrednio. Przeglądarka wykonuje algorytm obliczania nazwy na podstawie znaczników, aby ustalić, jak nazywa się każdy element.

Algorytm sprawdza źródła w ustalonej kolejności priorytetów i używa pierwszego znalezionego źródła. Znajomość tej kolejności pozwala przewidzieć wynik.

Najwyższy priorytet ma aria-labelledby. Jeśli jest obecny, zastępuje wszystkie inne źródła i pobiera tekst ze wskazanych elementów.

Jeśli nie ma labelledby, przeglądarka używa aria-label — ciągu znaków wpisanego bezpośrednio w elemencie jako jego nazwa odczytywana na głos.

Następne są natywne źródła, takie jak label powiązany z polem input lub tekst alt obrazu. Zawsze należy używać ich, gdy jest to możliwe.

W przypadku wielu elementów nazwa jest pobierana z ich treści tekstowej. Przycisk z tekstem Save otrzyma nazwę Save bez dodatkowego atrybutu.

Najniższy priorytet ma atrybut title. Nadaje nazwę elementowi tylko wtedy, gdy nie istnieje lepsze źródło, a jego obecność łatwo przeoczyć.

Obliczona nazwa jest spłaszczana do jednego ciągu znaków, a dodatkowe białe znaki są usuwane, dlatego podziały wierszy i wcięcia nigdy nie trafiają do użytkownika.

Nazwa określa, jak nazywa się element; opis zawiera dodatkowe informacje odczytywane po nazwie. W tej lekcji skupimy się na poprawnym ustalaniu nazwy.

Dowiedział się Pan/Dowiedziała się Pani, jaka jest kolejność obliczania nazwy: labelledby, następnie aria-label, potem natywne etykiety i treść, a na końcu title. 🧩