Tooltip-uri accesibile

Magazinele folosesc tooltip-uri pentru pictograma „i” de lângă mențiunea despre TVA, pentru explicarea termenelor de livrare, pentru butoanele-pictogramă din antet și pentru sfaturi de mărime. Par simple, dar un tooltip care apare doar la trecerea mouse-ului este invizibil pentru utilizatorii de tastatură și de ecrane tactile, iar unul care acoperă conținutul și nu poate fi închis este un eșec WCAG. Această pagină face parte din seria modele de interfață accesibile.

Când folosiți un tooltip

APG descrie un tooltip drept „un pop-up care afișează informații legate de un element când elementul primește focusul tastaturii” sau când mouse-ul trece peste el. Folosiți-l doar pentru o descriere scurtă, neesențială a unui control — o etichetă pentru un buton-pictogramă, un indiciu. Informațiile importante (prețuri, condiții de livrare, reguli de retur) trebuie să fie text vizibil. Conținutul interactiv își are locul într-un disclosure sau într-un dialog.

Atenție: APG spune că modelul tooltip este „în lucru; nu are încă consensul grupului de lucru”. Tratați-l ca pe o orientare și testați cu tehnologii asistive reale.

Criterii WCAG relevante

• 1.4.13 Conținut la hover sau focus (AA). Conținutul care apare la hover sau la focus trebuie să fie:

  • închidere posibilă — „există un mecanism pentru închiderea conținutului suplimentar fără a muta hover-ul pointerului sau focusul tastaturii” (de obicei Escape), cu excepția cazului în care comunică o eroare de introducere;
  • survolabil — pointerul se poate muta peste tooltip fără ca acesta să dispară;
  • persistent — rămâne până când declanșatorul este îndepărtat, utilizatorul îl închide sau informația nu mai este valabilă.

  Criteriul nu acoperă conținutul a cărui prezentare este controlată de browser; W3C dă ca exemplu principal tooltip-ul de browser al atributului title.

• 2.1.1 Tastatură (A): ce apare la hover trebuie să fie accesibil și cu tastatura.

• 4.1.2 Nume, rol, valoare (A): un buton-pictogramă are nevoie de un nume; un tooltip singur nu este un nume de încredere.

• 1.4.3 Contrast (minim) (AA): textul tooltip-ului are nevoie de 4,5:1.

• 2.4.11 Focus neobstrucționat (minim) (AA): un tooltip nu trebuie să acopere complet elementul focalizat.

Exemplu de cod

<!-- Tooltip ca descriere a unui control focalizabil (model APG) -->
<button type="button" class="icon-btn" aria-describedby="tip-compare">
  <svg aria-hidden="true" focusable="false"><use href="#icon-compare"></use></svg>
  <span class="visually-hidden">Compară</span>
</button>
<div id="tip-compare" role="tooltip" hidden>Adaugă în lista de comparație</div>

<!-- Toggletip: informație deschisă la clic, nu la hover -->
<button type="button" aria-expanded="false" aria-controls="vat-info">
  <span class="visually-hidden">Despre TVA</span>
  <svg aria-hidden="true" focusable="false"><use href="#icon-info"></use></svg>
</button>
<p id="vat-info" hidden>Prețurile includ TVA-ul țării de livrare.</p>

Scriptul pentru tooltip: afișați-l la focus și mouseenter, ascundeți-l la blur și la mouseleave atât de pe declanșator, cât și de pe tooltip (ca pointerul să se poată muta pe el) și ascundeți-l la Escape, cu focusul rămas pe declanșator. APG spune că „widgeturile tooltip nu primesc focus” și că „focusul rămâne pe elementul declanșator cât timp tooltip-ul este afișat”. Declanșatorul face referire la tooltip cu aria-describedby.

Al doilea exemplu este un buton disclosure, același model APG din care sunt construite acordeoanele: comută aria-expanded, iar conținutul rămâne vizibil până când utilizatorul îl închide — mai bine pentru ecranele tactile și pentru texte mai lungi.

Interacțiunea cu tastatura

Greșeli frecvente în magazinele online

• Tooltip-uri doar la hover pe pictograme „i” care sunt elemente span, așa că utilizatorii de tastatură și de ecrane tactile nu văd niciodată mențiunile despre livrare sau TVA.
• Condiții importante doar într-un tooltip: termene de retur, costul transportului, „preț pe kilogram”.
• Tooltip-ul dispare când pointerul se îndreaptă spre el, așa că persoanele care folosesc mărirea ecranului nu îl pot citi.
• Fără Escape, iar tooltip-ul acoperă câmpul următor din formular.
• Linkuri într-un tooltip („Aflați mai multe”) care nu pot primi niciodată focus.
• Butoane-pictogramă denumite doar prin title, care nu apare la focus sau la atingere.
• Text de tooltip cu contrast scăzut, de exemplu gri deschis pe alb.

Ce prind verificările automate și ce testați manual

Toate sunt fișe în biblioteca noastră de reguli. 1.4.13 nu poate fi testat automat: scanarea vede pagina așa cum se încarcă, nu ce apare la hover sau la focus. Testați manual: ajungeți cu Tab la fiecare declanșator, verificați că apare tooltip-ul, apăsați Escape, mutați mouse-ul pe el, măriți la 200 % și verificați că se poate citi în continuare. Extensia de browser vă ajută cu restul paginii.

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

Întrebări frecvente

Ce criteriu WCAG se aplică tooltip-urilor?

1.4.13 Conținut la hover sau focus (nivel AA). Conținutul care apare la hover sau la focus trebuie să poată fi închis fără a muta pointerul sau focusul, să poată fi survolat, astfel încât pointerul să se poată muta pe el, și să fie persistent până când utilizatorul îndepărtează declanșatorul sau îl închide.

Este atributul title un tooltip accesibil?

Tooltip-ul afișat de browser pentru atributul title este în afara domeniului 1.4.13, pentru că îl controlează browserul. Rămâne totuși o modalitate slabă de a transmite informații importante: nu apare la focusul tastaturii și nici pe ecranele tactile.

Ce este modelul tooltip din APG?

Un pop-up cu role="tooltip" care apare când elementul primește focusul tastaturii sau pointerul trece peste el; declanșatorul face referire la el cu aria-describedby, tooltip-ul nu primește niciodată focus, iar Escape îl închide. APG spune că modelul este încă în lucru, fără consensul grupului de lucru.

Poate un tooltip să conțină linkuri sau butoane?

Nu. Un tooltip nu primește niciodată focus, așa că un conținut interactiv din el nu poate fi accesat. Folosiți în schimb un disclosure sau un dialog nemodal care se deschide la clic.

Poate o verificare automată să testeze tooltip-urile?

Găsește elemente role="tooltip" fără nume și butoane-pictogramă fără nume. Dacă tooltip-ul apare la focus, rămâne vizibil când este survolat și se închide cu Escape trebuie verificat manual.

Surse

• W3C WAI, APG Tooltip pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
• W3C, Understanding 1.4.13 Content on Hover or Focus: https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/