ACCESIBILITATE ≠ OVERLAY · 38
Focalizare vizibilă la tastatură când antetul fix acoperă pasul următor
📅 11 noiembrie 2026 · ⏱ 6 min de lectură
Când apăsați Tab, browserul poate muta focalizarea pe un control aflat în spatele unui antet fix. Pagina continuă să răspundă, dar persoana pierde reperul vizual de care are nevoie pentru a continua.
01. Verificați traseul unei rezervări
Deschideți o pagină de rezervări și alegeți o dată cu tastatura. Când apăsați Tab, vă așteptați să găsiți linkul despre modificări sau butonul de continuare. Documentul se deplasează câțiva pixeli și conturul dispare. Focalizarea a ajuns la controlul corect, dar antetul rămas în partea de sus îl acoperă. Apăsarea tastei Enter poate declanșa următorul pas înainte să vedeți ce acțiune urmează să activați.
Situația se poate omite ușor la verificarea cu mouse-ul. Indicatorul arată poziția aleasă și permite ajustarea derulării înainte de clic. Cu tastatura, browserul urmează ordinea focalizării și decide când să deruleze. Păstrați această succesiune în timpul testului. Derularea manuală înainte de observare poate ascunde tocmai problema pe care încercați să o reproduceți.
02. Distingeți focalizarea, indicatorul și ordinea
Focalizarea identifică elementul care primește comenzile de la tastatură. Indicatorul este semnalul vizual care îl localizează. Ordinea stabilește ce control urmează. Un antet suprapus poate ascunde un buton cu indicator bine definit. Un buton poate fi vizibil fără să afișeze vreun semnal când primește focalizarea. De asemenea, un control clar evidențiat poate apărea într-un moment neașteptat al sarcinii.
Notați controlul așteptat și pe cel care primește efectiv focalizarea. Folosiți instrumentele browserului pregătite dinainte sau repetați succesiunea fără să schimbați focalizarea paginii în timpul observației. Comparați dreptunghiul controlului cu cel al stratului suprapus. O captură arată simptomul. Pașii efectuați la tastatură și starea componentei permit reproducerea rezultatului.
03. Ce cer WCAG 2.2
Criteriul 2.4.7, de nivel AA, privește vizibilitatea indicatorului de focalizare. Criteriul 2.4.11, tot AA, verifică dacă o componentă focalizată rămâne cel puțin parțial vizibilă în raport cu conținutul creat de autorul site-ului. Evaluați cele două cerințe separat. Un fragment vizibil din buton poate evita ascunderea completă și totuși să ofere prea puțină informație pentru a recunoaște confortabil acțiunea.
Criteriul 2.4.12, de nivel AAA, tratează și acoperirea parțială. Ca obiectiv de proiectare, păstrați vizibile întregul control și indicatorul lui. Criteriul 2.4.3, de nivel A, privește ordinea secvențială care păstrează sensul și operabilitatea atunci când succesiunea le influențează. Un antet fix poate afecta o cerință chiar dacă celelalte sunt îndeplinite. Descrieți comportamentul observat în raport și indicați criteriul corespunzător.
04. Identificați stratul care ocupă spațiul de lectură
Un antet fix își poate schimba înălțimea la derulare, la deschiderea meniului sau când fereastra devine mai îngustă. Un mesaj inferior, o bară de acțiuni sau un panou de ajutor pot ocupa altă parte a aceleiași ferestre. Fiecare componentă poate funcționa separat, dar împreună pot lăsa foarte puțin spațiu. Contează înălțimea efectivă în starea în care apare problema.
Verificați ce container se derulează. Pe o pagină simplă este adesea documentul. Într-o aplicație poate fi un panou interior cu derulare și bară proprii. O regulă aplicată documentului poate să nu afecteze panoul. Dezactivați temporar poziția fixă în inspector și repetați secvența. Dacă elementul reapare, aveți o ipoteză concretă de verificat în șablon.
05. Rezervați spațiu în containerul care se derulează
O soluție posibilă este scroll-padding-block-start pe containerul care se derulează, ținând cont de înălțimea antetului. Pentru o bară fixă în partea de jos, analizați scroll-padding-block-end. Tehnica C43 a W3C arată cum se combină spațiul de derulare cu spațiul real din machetă, astfel încât ultimul element să poată ieși din spatele barei. Verificați începutul și sfârșitul traseului, deoarece derularea are limite.
Înălțimea copiată din versiunea de calculator poate fi insuficientă când meniul ocupă două rânduri. Folosiți valori potrivite stărilor șablonului și testați redimensionarea. Dacă stratul ocupă prea mult spațiu într-o fereastră joasă, poate fi preferabil să se deruleze odată cu textul. Verificați derularea automată la focalizare și linkurile interne, deoarece ambele pot plasa conținutul aproape de antet.
06. Faceți indicatorul vizibil în fiecare stare
Păstrați indicatorul browserului sau proiectați unul care se distinge pe fundalurile reale ale site-ului. Un contur vizibil pe un card alb se poate pierde într-un meniu albastru închis. Testați butoane principale, linkuri text, pictograme și câmpuri. Examinați starea normală și cea vizitată și verificați contrastul în contextul fiecărui control.
Selectorul CSS :focus-visible permite aplicarea stilului când browserul consideră că indicatorul trebuie afișat. Evitați eliminarea generală a contururilor fără o alternativă verificată. Căutați containere care taie conturul prin overflow și reguli care îl ascund când modulele se suprapun. Dacă identificați controlul doar când treceți cursorul peste el, reveniți la tastatură și observați starea pe care tema o stilizează.
07. Repetați în ambele direcții și cu mărire
Porniți dintr-o stare reproductibilă și notați browserul, dimensiunea ferestrei și nivelul de zoom. Avansați cu Tab și reveniți cu Shift+Tab. Observați fiecare control în momentul când primește focalizarea. Testați aproape de marginile superioară și inferioară și la ultimul element din panou. Unele straturi acoperă conținutul doar la întoarcere, când browserul derulează în direcția opusă.
Repetați cu antetul extins, meniul închis și mesajele care apar la prima vizită. Într-o fereastră îngustă sau mărită, textul poate trece pe mai multe rânduri și reduce înălțimea disponibilă. O înregistrare scurtă a secvenței ajută la distingerea unei deplasări de o schimbare a focalizării. Persoana trebuie să poată identifica elementul curent înainte să decidă dacă îl activează.
Notați și dacă elementul a fost acoperit complet sau parțial și ce strat se afla deasupra. Includeți starea meniului și poziția aproximativă din pagină. Aceste detalii ajută echipa să compare rezultatul cu situația inițială după o schimbare a șablonului.
08. Corectați șablonul Divi și verificați traseul
În WordPress, identificați dacă antetul vine din temă, dintr-un șablon Theme Builder sau dintr-un modul menținut fix. Găsiți setarea înălțimii și regula care controlează derularea. Corectați componenta responsabilă de suprapunere și verificați paginile care o reutilizează. Includeți o pagină lungă, un formular și un traseu cu navigare internă.
Un overlay poate oferi reglaje de prezentare. Dimensiunile antetului, ordinea focalizării și spațiul rezervat țin de implementarea paginii. Un instrument automat poate găsi unele probleme. Verificați remedierea parcurgând din nou rezervarea cu tastatura, identificând fiecare element când primește focalizarea și confirmând că puteți avansa sau reveni fără să vă pierdeți reperul. Salvați rezultatul și pașii inițiali pentru a repeta testul după modificarea șablonului.