# Łącza muszą mieć odróżniający je tekst

<https://www.fixreports.com/pl/issues/link-name>

WCAG 2.4.4 Cel łącza (w kontekście), 4.1.2 Nazwa, rola, wartość · poziom A

Niektóre linki nie mają tekstu, który mógłby odczytać czytnik ekranu; często są to linki w postaci samych ikon, np. ikon mediów społecznościowych lub ikony koszyka.

## Co sprawdza ta reguła
Łącza mają odróżniający je tekst.

## Dlaczego to ważne
WCAG 2.4.4 i 4.1.2 wymagają, aby linki miały dostępną nazwę opisującą ich cel.

## Jak to naprawić
### Na dowolnej stronie
1. Znajdź linki bez nazwy. Najczęściej są to ikony lub obrazy wewnątrz tagu <a>.
2. Dodaj w linku tekst ukryty wizualnie albo atrybut aria-label, np. aria-label="Instagram" lub aria-label="Cart".
3. Jeśli link obejmuje obraz, nadaj zamiast tego obrazowi znaczący tekst alternatywny.

### W Shopify
1. Znajdź linki bez nazwy. Najczęściej są to ikony lub obrazy wewnątrz tagu <a>.
2. Dodaj w linku tekst ukryty wizualnie albo atrybut aria-label, np. aria-label="Instagram" lub aria-label="Cart".
3. Jeśli link obejmuje obraz, nadaj zamiast tego obrazowi znaczący tekst alternatywny.

### W WooCommerce i WordPressie
1. Znajdź linki bez nazwy. Najczęściej są to ikony lub obrazy wewnątrz tagu <a>.
2. Dodaj w linku tekst ukryty wizualnie albo atrybut aria-label, np. aria-label="Instagram" lub aria-label="Cart".
3. Jeśli link obejmuje obraz, nadaj zamiast tego obrazowi znaczący tekst alternatywny.

## Jak sprawdzić poprawkę
- Przeskanuj ponownie i potwierdź, że błąd link-name zniknął.
- Przy włączonym czytniku ekranu przejdź klawiszem Tab do każdego linku i posłuchaj jego nazwy.

## Źródła
- Dokumentacja reguły axe-core (Deque): https://dequeuniversity.com/rules/axe/4.13/link-name
- Objaśnienie kryterium WCAG 2.4.4 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context
- Objaśnienie kryterium WCAG 4.1.2 (W3C): https://www.w3.org/WAI/WCAG22/Understanding/name-role-value