Odkazy, které se otevírají na nové kartě nebo v novém okně

Otevírání odkazů na nové kartě je na mnoha e-shopech zvykem: stránky platební brány, tabulky velikostí, odkazy na sociální sítě, někdy každý externí odkaz. WCAG to nezakazuje, ale nečekaná nová karta je pro některé lidi skutečnou bariérou. Tato stránka vysvětluje, co WCAG říká, kdy je nová karta rozumná a jak uživatele správně upozornit. Je součástí série přístupné vzory UI.

Co říká WCAG

Neexistuje žádné kritérium úspěšnosti úrovně A ani AA, které by zakazovalo target="_blank". Relevantní materiály W3C jsou:

• Technika G201, „Giving users advanced warning when opening a new window“ (předem upozornit uživatele na otevření nového okna). W3C ji uvádí jako doporučenou techniku pro 2.4.4 Účel odkazu (v kontextu), 2.4.6 Nadpisy a popisky, 2.4.9 Účel odkazu (pouze odkaz) a 3.2.5 Změna na požádání. Ke splnění těchto kritérií „není vyžadována“ — jde o dobrou praxi.
• 3.2.5 Změna na požádání (úroveň AAA) je kritérium, které pokrývá otevírání nových oken jen na žádost uživatele.
• 3.2.2 Při vstupu (úroveň A) je relevantní, když se nové okno neotevírá z odkazu, ale když někdo změní přepínač, zaškrtávací políčko nebo select. Selhání W3C F37 je „otevření nového okna bez předchozího upozornění při změně výběru přepínače, zaškrtávacího políčka nebo seznamu select“.

G201 vysvětluje důvod: nečekaná nová okna mohou dezorientovat lidi, kteří mají potíže s vnímáním vizuálního obsahu, a některé lidi s kognitivním postižením, a tlačítko Zpět je nevrátí na předchozí stránku.

Kdy je nová karta rozumná

• Uživatel je uprostřed úkonu a odkaz otevírá nápovědu, kterou potřebuje souběžně: tabulku velikostí nebo obchodní podmínky během pokladny, kde by odchod znamenal ztrátu vyplněných údajů.
• Stránka třetí strany, ze které se uživatel vrátí, například sledování zásilky, pokud je uživatel upozorněn.

Kdy obvykle nepomáhá: běžná navigace uvnitř vašeho e-shopu, ikony sociálních sítí v patičce, články blogu, každý externí odkaz, „aby uživatelé neodešli“. Kdo chce novou kartu, otevře si ji sám; opačně to nejde.

Příklad kódu

<!-- Upozornění ve viditelném textu odkazu: funguje pro všechny -->
<a href="/cs/size-guide" target="_blank">Tabulka velikostí (otevře se na nové kartě)</a>

<!-- Ikona s textovou alternativou, na kterou odkazuje aria-describedby -->
<a href="https://tracking.example.com/123" target="_blank" aria-describedby="new-tab-note">
  Sledovat zásilku
  <svg aria-hidden="true" focusable="false" class="icon"><use href="#icon-external"></use></svg>
</a>
<span id="new-tab-note" class="visually-hidden">Otevře se na nové kartě</span>

<!-- Soubor: řekněte, co to je, místo vynucování nové karty -->
<a href="/files/returns-form.pdf">Formulář pro vrácení zboží (PDF, 120 KB)</a>

Poznámky:

• G201 ukazuje oba přístupy: upozornění v textu odkazu, nebo ikonu skrytou pomocí aria-hidden a textový popis připojený přes aria-describedby, aby ho slyšeli i uživatelé čteček obrazovky.
• Ikona bez textové alternativy pomůže jen vidícím uživatelům, kteří ikonu znají. Samotná textová alternativa pomůže jen uživatelům čteček obrazovky. G201 testuje obojí: asistivní technologie oznámí nové okno, a existuje vizuální označení.
• Upozornění se stává součástí účelu odkazu, proto ho udržujte krátké a jednotné na celém webu.

Klávesnice a interakce

G201 se týká běžné aktivace (kliknutí, Enter). Otevření odkazu na nové kartě přes kontextové menu nebo prostředním tlačítkem je vlastní volba uživatele a upozornění nepotřebuje.

Časté chyby na e-shopech

• Všechny odkazy v patičce a na sociální sítě otevírají nové karty bez jakéhokoli označení.
• Ikona externího odkazu bez textové alternativy nebo dekorativní ikona s alt, který říká „ikona“.
• Upozornění jen v atributu title. Prohlížeče ho ukazují při najetí myší, takže uživatelé klávesnice a dotykových zařízení ho nevidí.
• Kroky platby nebo 3-D Secure otevřené v novém okně, kterého si uživatelé čteček obrazovky nevšimnou, a myslí si, že pokladna zamrzla.
• Přepínače jazyka nebo země postavené jako select, který při změně otevře nové okno — to je selhání F37 u kritéria 3.2.2.
• Odkazy na produkty v recenzích nebo článcích blogu s target="_blank", které na mobilu rozbíjejí tlačítko Zpět.

Co najdou automatizované kontroly a co ruční testování

Naše automatizované kontroly target="_blank" neoznačují, protože neexistuje požadavek úrovně A ani AA a upozornění lze napsat mnoha způsoby. Související karty v knihovně pravidel:

Ruční testování: vypište si všechny odkazy s target="_blank" (vyhledat je můžete ve vývojářských nástrojích prohlížeče), rozhodněte, které novou kartu opravdu potřebují, a čtečkou obrazovky ověřte, že se upozornění oznamuje a je vidět. S ruční částí pomůže rozšíření prohlížeče a postup v článku jak testovat WCAG.

Začněte bezplatnou kontrolou jedné stránky. Je to automatizovaná kontrola, nikoli úplný audit.

Časté otázky

Zakazuje WCAG odkazy, které se otevírají na nové kartě?

Ne. Žádné kritérium úspěšnosti úrovně A ani AA target="_blank" nezakazuje. WCAG uvádí upozornění před otevřením nového okna jako doporučenou techniku (G201) a otevíráním nových oken se zabývá kritérium AAA 3.2.5 Změna na požádání.

Proč může být nová karta problém?

Podle techniky W3C G201 může nečekané nové okno dezorientovat lidi, kteří nevidí, že se otevřelo, a některé lidi s kognitivním postižením. Tlačítko Zpět je už nevrátí na stránku, odkud přišli.

Jak upozornit, že se odkaz otevře na nové kartě?

Přidejte upozornění do textu odkazu, například „Tabulka velikostí (otevře se na nové kartě)“, nebo zobrazte ikonu a dejte jí textovou alternativu, kterou asistivní technologie oznámí. Upozornění potřebují vidící uživatelé i uživatelé čteček obrazovky.

Mají se odkazy na PDF otevírat na nové kartě?

Ne nutně. Obvykle je lepší uvést v textu odkazu, že jde o PDF a jak je velké, a nechat na uživateli, jak ho otevře.

Najde automatizovaná kontrola odkazy na novou kartu bez upozornění?

Naše automatizované kontroly target="_blank" neoznačují. Zda upozornění existuje a zda se oznamuje, musí ověřit člověk.

Zdroje

• 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/