Ferestre modale pe care toată lumea le place, javascript
Ferestrele modale pot fi tratate ca o modalitate excelentă de a cumpăra spațiu suplimentar pe ecran, de a atrage atenția utilizatorului site-ului, de a le oferi o alegere sau de a le avertiza cu privire la schimbări. Sau ca un hack murdar, permițându-vă să impuneți informații vizitatorului, pe care altfel nu i-ar fi acordat atenția.
Acestea sunt punctele extreme ale conducătorului, care măsoară relația noastră cu utilizatorul site-ului. În funcție de obiceiurile, preferințele personale și modul în care este navigată rețeaua, ferestrele modale pot fi o binecuvântare sau un blestem pentru utilizator.
Dacă apariția ferestrei modale a avut loc automat sau pur și simplu nu a fost declanșată în mod explicit de către utilizator, aceasta poate fi dezorientantă și deranjantă. Acest lucru vă permite să faceți vina ferestrelor modale pentru intruziune și intruziune în spațiul privat al utilizatorului.
Se pare că ferestrele modale nu pot interfera serios cu utilizatorul, atâta timp cât conțin controale simple și bine marcate. Puteți să faceți clic pe "cruce" în colțul ecranului, să parcurgeți textul sau să completați această formă de înregistrare.
Dar imaginați-vă că puteți controla browser-ul prin utilizarea chioșc de internet tastatură, afișaj Braille sau un dispozitiv de intrare de voce, și a apărut fereastra modal se mută focalizarea de intrare pentru butonul sau domeniul său, și lăsați-l undeva lângă el, restul conținutului site-ului. Acest lucru va face site-ul inutilizabil pentru utilizare pe dispozitivul nostru.
Și astfel de cazuri apar mai des decât se poate aștepta odată cu dezvoltarea modernă a practicilor de utilizare și a instrumentelor de testare.
Semantica codului contribuie la disponibilitatea site-ului
Ușurința în utilizare și disponibilitatea unui site pe orice dispozitiv suferă adesea atunci când se utilizează ferestre modale. Indiferent de scopul utilizării ferestrei modale, gestionarea acesteia trebuie să fie simplă și universală.
Pentru a realiza acest lucru, trebuie să analizăm cu atenție semantica marcajului. Această cerință pare simplă, dar, din păcate, nu este adesea îndeplinită. Imaginați-vă următorul cod de fereastră cu butonul "Închidere":
element
nu are un anumit sens semantic în acest context. Desigur, acesta poate fi identificat ca un buton de închidere a ferestrei prin semne vizuale: simbolul "X" și schimbarea formei cursorului. Dar dacă există o persoană slab vizibilă sau orb care lucrează cu site-ul?
Pentru a putea să mutați focalizarea la intrare
, trebuie să folosim atributul tabindex. În plus, starea descrisă de pseudo-selector: focalizare. o va identifica ca un element activ. Acest lucru va face posibilă gestionarea site-ului folosind dispozitive alternative, dar nu prea simple.
Cea mai bună soluție în această situație este utilizarea etichetei