Linki otwierane w nowej karcie lub oknie

Otwieranie linków w nowej karcie to w wielu sklepach przyzwyczajenie: strony operatora płatności, tabele rozmiarów, linki do mediów społecznościowych, czasem każdy link zewnętrzny. WCAG tego nie zabrania, ale niespodziewana nowa karta jest dla części osób realną barierą. Ta strona wyjaśnia, co mówi WCAG, kiedy nowa karta ma sens i jak poprawnie uprzedzić użytkownika. Należy do serii dostępne wzorce interfejsu.

Co mówi WCAG

Żadne kryterium sukcesu na poziomie A ani AA nie zabrania target="_blank". Istotne materiały W3C to:

• Technika G201, „Giving users advanced warning when opening a new window” (uprzedzanie użytkownika przed otwarciem nowego okna). W3C wymienia ją jako technikę doradczą dla 2.4.4 Cel łącza (w kontekście), 2.4.6 Nagłówki i etykiety, 2.4.9 Cel łącza (tylko łącze) i 3.2.5 Zmiana na żądanie. „Nie jest wymagana” do spełnienia tych kryteriów – to dobra praktyka.
• 3.2.5 Zmiana na żądanie (poziom AAA) to kryterium, które obejmuje otwieranie nowych okien tylko wtedy, gdy użytkownik o to poprosi.
• 3.2.2 Podczas wprowadzania danych (poziom A) ma znaczenie, gdy nowe okno otwiera się nie z linku, ale po zmianie przycisku opcji, pola wyboru lub listy select. Błąd W3C F37 to „otwarcie nowego okna bez wcześniejszego uprzedzenia, gdy zmienia się wybór przycisku opcji, pola wyboru lub listy wyboru”.

G201 wyjaśnia powód: niespodziewane nowe okna mogą zdezorientować osoby, które mają trudność z odbiorem treści wizualnych, oraz część osób z niepełnosprawnościami poznawczymi, a przycisk Wstecz nie zaprowadzi ich na poprzednią stronę.

Kiedy nowa karta ma sens

• Użytkownik jest w trakcie zadania, a link otwiera pomoc, której potrzebuje obok: tabelę rozmiarów lub regulamin podczas składania zamówienia, gdy wyjście ze strony oznaczałoby utratę wpisanych danych.
• Strona zewnętrzna, z której użytkownik wróci, np. strona śledzenia przesyłki – o ile użytkownik został uprzedzony.

Kiedy zwykle nie pomaga: zwykła nawigacja wewnątrz sklepu, ikony mediów społecznościowych w stopce, artykuły na blogu, każdy link zewnętrzny „żeby użytkownicy nie wychodzili”. Kto chce nowej karty, może ją otworzyć sam; odwrotnie się nie da.

Przykład kodu

<!-- Uprzedzenie w widocznym tekście linku: działa dla wszystkich -->
<a href="/pl/tabela-rozmiarow" target="_blank">Tabela rozmiarów (otwiera się w nowej karcie)</a>

<!-- Ikona z alternatywą tekstową wskazaną przez aria-describedby -->
<a href="https://tracking.example.com/123" target="_blank" aria-describedby="new-tab-note">
  Śledź przesyłkę
  <svg aria-hidden="true" focusable="false" class="icon"><use href="#icon-external"></use></svg>
</a>
<span id="new-tab-note" class="visually-hidden">Otwiera się w nowej karcie</span>

<!-- Plik: powiedz, czym jest, zamiast wymuszać nową kartę -->
<a href="/files/returns-form.pdf">Formularz zwrotu (PDF, 120 KB)</a>

Uwagi:

• G201 pokazuje oba podejścia: uprzedzenie w tekście linku albo ikonę ukrytą przez aria-hidden wraz z opisem tekstowym powiązanym przez aria-describedby, aby usłyszeli go także użytkownicy czytników ekranu.
• Ikona bez alternatywy tekstowej pomaga tylko osobom widzącym, które ją znają. Sama alternatywa tekstowa pomaga tylko użytkownikom czytników ekranu. G201 sprawdza oba warunki: technologia wspomagająca informuje o nowym oknie i istnieje wskaźnik wizualny.
• Uprzedzenie staje się częścią celu linku, więc warto, by było krótkie i jednolite w całym serwisie.

Klawiatura i interakcja

G201 dotyczy zwykłej aktywacji (kliknięcie, Enter). Otwarcie linku w nowej karcie z menu kontekstowego lub środkowym przyciskiem myszy to własny wybór użytkownika i nie wymaga uprzedzenia.

Typowe błędy w sklepach internetowych

• Wszystkie linki w stopce i do mediów społecznościowych otwierają nowe karty bez żadnej informacji.
• Ikona linku zewnętrznego bez alternatywy tekstowej albo ozdobna ikona z alt o treści „ikona”.
• Uprzedzenie tylko w atrybucie title. Przeglądarki pokazują go po najechaniu myszą, więc użytkownicy klawiatury i ekranów dotykowych go nie widzą.
• Kroki płatności lub 3-D Secure otwierane w nowym oknie, którego użytkownicy czytników ekranu nie zauważają, więc myślą, że zamówienie się zawiesiło.
• Przełączniki języka lub kraju zbudowane jako select, który po zmianie otwiera nowe okno – to błąd F37 dla 3.2.2.
• Linki do produktów w opiniach lub wpisach blogowych z target="_blank", które psują przycisk Wstecz na telefonach.

Co wychwytuje kontrola automatyczna, a co wymaga testu ręcznego

Nasze automatyczne kontrole nie zgłaszają target="_blank", ponieważ nie ma wymogu na poziomie A ani AA, a uprzedzenie można sformułować na wiele sposobów. Powiązane karty w bibliotece reguł:

Test ręczny: proszę wypisać wszystkie linki z target="_blank" (narzędzia deweloperskie przeglądarki potrafią je wyszukać), zdecydować, które naprawdę potrzebują nowej karty, i sprawdzić czytnikiem ekranu, czy uprzedzenie jest odczytywane i widoczne. W części ręcznej pomagają rozszerzenie przeglądarki i kroki z poradnika jak testować WCAG.

Proszę zacząć od darmowej kontroli jednej strony. To automatyczna kontrola, a nie pełny audyt.

Najczęstsze pytania

Czy WCAG zabrania linków otwieranych w nowej karcie?

Nie. Żadne kryterium sukcesu na poziomie A ani AA nie zabrania target="_blank". WCAG wymienia uprzedzanie użytkownika przed otwarciem nowego okna jako technikę doradczą (G201), a otwieraniem nowych okien zajmuje się kryterium AAA 3.2.5 Zmiana na żądanie.

Dlaczego nowa karta może być problemem?

Według techniki W3C G201 niespodziewane nowe okno może zdezorientować osoby, które nie widzą, że się otworzyło, oraz część osób z niepełnosprawnościami poznawczymi. Przycisk Wstecz nie prowadzi ich już na stronę, z której przyszły.

Jak uprzedzić, że link otwiera się w nowej karcie?

Dodać informację do tekstu linku, np. „Tabela rozmiarów (otwiera się w nowej karcie)”, albo pokazać ikonę i nadać jej alternatywę tekstową, którą odczyta technologia wspomagająca. Uprzedzenia potrzebują zarówno osoby widzące, jak i użytkownicy czytników ekranu.

Czy linki do PDF powinny otwierać się w nowej karcie?

Niekoniecznie. Zwykle lepiej napisać w tekście linku, że to PDF i jaki ma rozmiar, i pozwolić użytkownikowi zdecydować, jak go otworzyć.

Czy kontrola automatyczna znajdzie linki otwierane w nowej karcie bez uprzedzenia?

Nasze automatyczne kontrole nie zgłaszają target="_blank". To, czy uprzedzenie istnieje i jest odczytywane, musi sprawdzić człowiek.

Źródła

• W3C, Technique G201 Giving users advanced warning when opening a new window: https://www.w3.org/WAI/WCAG22/Techniques/general/G201
• W3C, Understanding 3.2.2 On Input: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html
• W3C WAI, APG Link pattern: https://www.w3.org/WAI/ARIA/apg/patterns/link/