Linkuri care se deschid într-o filă sau fereastră nouă

Deschiderea linkurilor într-o filă nouă este un obicei în multe magazine: paginile procesatorului de plăți, ghidurile de mărimi, linkurile spre rețelele sociale, uneori toate linkurile externe. WCAG nu interzice acest lucru, dar o filă nouă neașteptată este o barieră reală pentru unele persoane. Această pagină explică ce spune WCAG, când o filă nouă este rezonabilă și cum să avertizați corect utilizatorii. Face parte din seria modele UI accesibile.

Ce spune WCAG

Nu există niciun criteriu de succes de nivel A sau AA care să interzică target="_blank". Materialele W3C relevante sunt:

• Tehnica G201, „Giving users advanced warning when opening a new window” (avertizarea din timp a utilizatorilor la deschiderea unei ferestre noi). W3C o enumeră ca tehnică consultativă pentru 2.4.4 Scopul linkului (în context), 2.4.6 Titluri și etichete, 2.4.9 Scopul linkului (doar linkul) și 3.2.5 Schimbare la cerere. Ea „nu este obligatorie” pentru îndeplinirea acestor criterii — este o bună practică.
• 3.2.5 Schimbare la cerere (nivel AAA) este criteriul care cere ca ferestrele noi să se deschidă doar când utilizatorul o solicită.
• 3.2.2 La introducerea datelor (nivel A) este relevant când o fereastră nouă se deschide nu dintr-un link, ci când cineva schimbă un buton radio, o casetă de bifare sau un select. Eșecul W3C F37 este „deschiderea unei ferestre noi fără avertizare prealabilă când se schimbă selecția unui buton radio, a unei casete de bifare sau a unei liste select”.

G201 explică motivul: ferestrele noi neașteptate pot dezorienta persoanele care percep greu conținutul vizual și unele persoane cu dizabilități cognitive, iar butonul Înapoi nu le va întoarce la pagina anterioară.

Când o filă nouă este rezonabilă

• Utilizatorul este în mijlocul unei sarcini, iar linkul deschide ajutorul de care are nevoie în paralel: un ghid de mărimi sau termenii și condițiile în timpul checkout-ului, unde plecarea de pe pagină ar pierde datele introduse.
• O pagină terță de pe care utilizatorul se va întoarce, cum ar fi o pagină de urmărire a coletului, dacă utilizatorul este avertizat.

Când de obicei nu ajută: navigarea obișnuită în magazinul dumneavoastră, pictogramele rețelelor sociale din subsol, articolele de blog, toate linkurile externe „ca utilizatorii să nu plece”. Utilizatorii care vor o filă nouă și-o pot deschide singuri; invers nu este posibil.

Exemplu de cod

<!-- Avertisment în textul vizibil al linkului: funcționează pentru toată lumea -->
<a href="/ro/size-guide" target="_blank">Ghid de mărimi (se deschide într-o filă nouă)</a>

<!-- Pictogramă cu o alternativă text referită prin aria-describedby -->
<a href="https://tracking.example.com/123" target="_blank" aria-describedby="new-tab-note">
  Urmăriți coletul
  <svg aria-hidden="true" focusable="false" class="icon"><use href="#icon-external"></use></svg>
</a>
<span id="new-tab-note" class="visually-hidden">Se deschide într-o filă nouă</span>

<!-- Un fișier: spuneți ce este în loc să forțați o filă nouă -->
<a href="/files/returns-form.pdf">Formular de retur (PDF, 120 KB)</a>

Observații:

• G201 arată ambele abordări: avertismentul în textul linkului sau o pictogramă ascunsă cu aria-hidden plus o descriere text legată prin aria-describedby, astfel încât să o audă și utilizatorii de cititoare de ecran.
• O pictogramă fără alternativă text îi ajută doar pe utilizatorii care văd și care cunosc pictograma. O alternativă text singură îi ajută doar pe utilizatorii de cititoare de ecran. G201 le testează pe amândouă: tehnologiile asistive anunță fereastra nouă și există un indicator vizual.
• Avertismentul devine parte din scopul linkului, așa că păstrați-l scurt și consecvent pe tot site-ul.

Tastatura și interacțiunea

G201 se aplică activării obișnuite (clic, Enter). Deschiderea unui link într-o filă nouă din meniul contextual sau cu clic pe rotița mouse-ului este alegerea utilizatorului și nu are nevoie de avertisment.

Greșeli frecvente în magazinele online

• Toate linkurile din subsol și spre rețelele sociale deschid file noi fără nicio indicație.
• O pictogramă de link extern fără alternativă text sau o pictogramă decorativă cu un alt care spune „pictogramă”.
• Avertisment doar în atributul title. Browserele îl arată la trecerea mouse-ului, așa că utilizatorii de tastatură și de ecrane tactile nu îl văd.
• Pași de plată sau 3-D Secure care se deschid într-o fereastră nouă pe care utilizatorii de cititoare de ecran nu o observă, așa că ei cred că checkout-ul s-a blocat.
• Selectoare de limbă sau de țară construite ca select care deschide o fereastră nouă la schimbare — acesta este eșecul F37 pentru 3.2.2.
• Linkuri spre produse în recenzii sau articole de blog cu target="_blank" care strică butonul Înapoi pe mobil.

Ce prind verificările automate vs testarea manuală

Verificările noastre automate nu semnalează target="_blank", pentru că nu există o cerință de nivel A sau AA, iar un avertisment poate fi formulat în multe feluri. Fișe înrudite din biblioteca de reguli:

Testarea manuală: faceți o listă cu toate linkurile cu target="_blank" (le puteți căuta în instrumentele pentru dezvoltatori ale browserului), decideți care chiar au nevoie de o filă nouă și verificați cu un cititor de ecran că avertismentul este anunțat și vizibil. Extensia de browser și pașii din cum se testează WCAG vă ajută cu partea manuală.

Începeți cu verificarea gratuită a unei pagini. Este o verificare automată, nu un audit complet.

Întrebări frecvente

Interzice WCAG linkurile care se deschid într-o filă nouă?

Nu. Niciun criteriu de succes de nivel A sau AA nu interzice target="_blank". WCAG enumeră avertizarea utilizatorilor înainte de deschiderea unei ferestre noi ca tehnică consultativă (G201), iar criteriul AAA 3.2.5 Schimbare la cerere se ocupă de deschiderea ferestrelor noi.

De ce poate fi o filă nouă o problemă?

Potrivit tehnicii W3C G201, o fereastră nouă neașteptată poate dezorienta persoanele care nu pot vedea că s-a deschis și unele persoane cu dizabilități cognitive. Butonul Înapoi nu le mai duce la pagina de pe care au venit.

Cum avertizez că un link se deschide într-o filă nouă?

Adăugați avertismentul în textul linkului, de exemplu „Ghid de mărimi (se deschide într-o filă nouă)”, sau afișați o pictogramă și dați-i o alternativă text pe care tehnologiile asistive o anunță. Avertismentul le trebuie atât utilizatorilor care văd, cât și celor care folosesc cititoare de ecran.

Ar trebui ca linkurile spre PDF-uri să se deschidă într-o filă nouă?

Nu neapărat. De obicei este mai bine să spuneți în textul linkului că este un PDF și cât de mare este și să lăsați utilizatorul să decidă cum îl deschide.

Poate o verificare automată să găsească linkuri care se deschid într-o filă nouă fără avertisment?

Verificările noastre automate nu semnalează target="_blank". Dacă există un avertisment și dacă este anunțat trebuie verificat de o persoană.

Surse

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