Transferul nu a fost finalizat. Vă rugăm să ajutați să traduceți acest articol în engleză.
Utilizând tabindex
Atributul tabindex a fost introdus în specificația HTML 4. Acesta vă permite să specificați ordinea în care elementele vor primi focalizare atunci când navigați de la tastatură. Actuala implementare, descrisă în specificațiile HTML 5, este destul de diferită de cea originală. Toate browserele obișnuite respectă noua specificație.
Acest tabel descrie comportamentul elementelor, în funcție de valoarea atributului tabindex:
Focalizați cu mouse-ul sau programabil prin element.focus ()
Mai mult de zero (de exemplu tabindex = "33")
Valoarea atributului tabindex indică ordinea în care elementul va primi focalizare. Cu cât valoarea atributului este mai mică, cu atât mai devreme elementul va primi focalizare. În orice caz, accentul va veni la astfel de elemente mai devreme decât elementele cu tabindex = "0" și elementele care pot primi focalizare fără atributul tabindex (de exemplu tabindex = "7" se va concentra înainte de tabindex = "11")
Controale simple
Pentru a crea un simplu widget disponibil prin intermediul tastei Tab, setați tabindex = "0" pe elementele HTML
Exemplul 1: Un widget simplu care emulează lucrarea casetelor de selectare prin schimbarea imaginilor. Widgetul utilizează tabindex pentru a oferi acces de la tastatură.
Controale grupate
Desigur, este nevoie de a crea widget-uri mai complexe. Exemplele includ meniuri, file, diverse tabele dinamice, vizualizări pentru informații care au o structură arborescentă. Pentru astfel de comenzi, elementul părinte trebuie să aibă atributul tabindex "0". În acest caz, se poate concentra din tastatură. Toate elementele copil (elementele de meniu, file separate, celule, rânduri) ar trebui să aibă tabindex = "- 1". astfel încât să nu atingeți focalizarea atunci când apăsați tab-ul. Utilizatorii ar trebui să poată călători prin elementele copilului folosind săgețile de pe tastatură. (Pentru o descriere mai detaliată a modului în care accesul la tastatură pentru widgeturile utilizate frecvent ar trebui implementat, consultați Ghidul de stil DHTML.)
Mai jos este un exemplu care demonstrează utilizarea acestei tehnici pentru implementarea unui submeniu. După ce elementul principal din meniu este focalizat (
- ), dezvoltatorul trebuie să controleze programabil focalizarea, reacționând la câștigul de taste cu săgeți. Pentru a descrie tehnica de control al focalizării în cadrul widgetului, consultați secțiunea "Gestionarea focalizării în widget" din acest articol.
- Tabindex tranzitoriu. mișcarea focalizării software-ului
- Aria-activedescendent. controlul concentrării "virtuale"
- programați focalizarea pe un alt element
- schimba tabindexul elementului în focus la 0
- schimba tabindex elementului anterior la -1
Exemplul 2: Un meniu care utilizează atributul tabindex pentru a accesa tastatura
Comenzi inactive (dezactivate)
Când controlul devine inactiv, nu trebuie să fie focalizat când se face clic pe fila, care este furnizată prin setarea atributului tabindex = "- 1". Rețineți că elementele inactive dintr-un widget grupat (cum ar fi, sub elementele de meniu) ar trebui să poată fi selectate utilizând săgețile de pe tastatură.
Controlul focalizării în interiorul widget-ului
Când un utilizator părăsește widget-ul și apoi se întoarce înapoi, focalizarea ar trebui să revină la un anumit element care sa focalizat înainte. De exemplu, pe un element particular al unui copac sau al unei celule. Există două opțiuni prin care acest lucru poate fi atins:
Tehnica One: Mutarea tabindex
Ideea acestei tehnici este de a seta atributul tabindex la o valoare zero pentru elementul care a fost ultima în focalizare. În acest caz, dacă utilizatorul părăsește fila din widget și apoi revine, elementul va restabili corect focalizarea. Rețineți că setând tabindex la "0", trebuie să setați tabindex = "- 1" pentru selecția precedentă. Această tehnică vă cere să focalizați elementele programat, reacționând la apăsările de taste.
Pentru a face acest lucru, ascultați evenimentul keydown pentru elementul copil al fiecărui widget. Când utilizatorul dă clic pe săgețile de pe tastatură pentru a trece la alt element:
Prin link puteți vedea un exemplu de vizualizare arborescentă WAI-ARIA. folosind această tehnică.
Utilizați element.focus () pentru a seta focalizarea la element
Nu utilizați createEvent (). initEvent () și dispatchEvent () pentru a seta focalizarea. Evenimentul de focalizare DOM trebuie folosit doar pentru a obține informații despre faptul că sa concentrat asupra elementului, ci este generat de sistem atunci când un element este în focalizare. Nu trebuie folosit pentru a seta focalizarea. În schimb, utilizați element.focus ().
Utilizați evenimentul focalizare pentru a urmări focalizarea
În timpul dezvoltării, nu vă așteptați ca focalizarea să se modifice numai în urma manipulării utilizatorului cu tastatura și mouse-ul. Programele auxiliare, precum cititorii de ecran, pot focaliza pe elemente. Monitorizați evenimentele onfocus și onblur. în loc de evenimente de tip mouse și tastatură.
onfocus și onblur pot fi utilizate cu orice element. Acum, standardele nu descriu o metodă de obținere a unui obiect în focalizare. Prin urmare, dacă trebuie să urmăriți un element cu focalizare, acesta va trebui memorat într-o variabilă.
A doua tehnică: aria-activedescendant
Această tehnică vă permite să fuzionați fiecare handler de evenimente într-un container cu elemente grafice și să utilizați aria-activedescendent pentru a urmări focalizarea "virtuală". (Pentru mai multe informații despre ARIA, consultați prezentarea generală a aplicațiilor și widget-urilor web disponibile.)
Proprietatea activată de către aria identifică ID-ul elementului descendent care are în prezent focalizarea virtuală. Evenimentul este manipulat pe container. Evenimentul este tratat pe container. ARIA exemplu radiogroup pentru o ilustrare directă a modului în care funcționează aceasta.
scrollIntoView
Rețineți că utilizarea acestui model necesită autorul să se asigure că widget-ul focalizat curent este derulat în vizualizare. Ar trebui să puteți folosi funcția element.scrollIntoView (), dar vă recomandăm să utilizați testul quirksmode.
recomandări
Utilizați keykey pentru a prinde evenimente în loc de onkeypress
În IE, evenimentul keypress funcționează numai pentru cheile alfanumerice. Utilizați în schimb cheia.
Asigurați-vă că același mouse și mouse producă aceeași experiență
Pentru a vă asigura că experiența utilizatorului este consecventă, indiferent de dispozitivul de intrare, de tastatură și de mouse. De exemplu, codul care ar trebui să fie utilizat de utilizatorii de clicuri de mouse pentru a produce aceleași modificări.
Asigurați-vă că tastatura poate fi utilizată pentru a activa elementul
Pentru a vă asigura că tastatura poate fi utilizată pentru a activa elementele, orice manipulatoare. De exemplu, pentru a vă asigura că cheia va activa un element, dacă aveți un. trebuie să legați doSomething () de evenimentul key-down: onkeydown = "return event.keyCode! = 13 || doSomething ();" .
Nu utilizați: focalizați pe stilul focalizării (dacă vă interesează IE 7 și mai devreme)
IE 7 și versiunile anterioare nu acceptă: pseudo-selectorul de focalizare; nu o folosiți pentru a focaliza stilul. În schimb, setați stilul într-un handler de evenimente onfocus, de exemplu adăugând un nume de stil CSS la atributul de clasă.
Trageți întotdeauna focalizarea pentru elementele tabindex = "- 1" și elementele care primesc programare focalizată
IE nu va atrage în mod automat schița de focalizare pentru elementele care primesc programatic focalizare. Alegeți între schimbarea culorii de fundal prin ceva de genul this.style.backgroundColor = "gri"; sau adăugați o margine punctată prin acest.style.border = "1px inversat punctat". În linia de frontieră punctată, va trebui să vă asigurați că elementele respective au o margine invizibilă de 1px pentru a începe, că elementul nu crește ).
Împiedicați evenimentele cheie utilizate să execute funcțiile browserului
Dacă widget-ul dvs. gestionează un eveniment cheie, utilizând codul de returnare al dispozitivului de procesare a evenimentului (de exemplu, defilarea ca răspuns la tastele săgeți). Dacă operatorul dvs. de eveniment returnează false. evenimentul nu va fi propagat dincolo de cel care vă ocupă.
Dacă handleKeyDown () revine false. evenimentul va fi consumat, împiedicând browserul să efectueze orice acțiune bazată pe apăsarea tastaturii.