Navigarea prin tastatură în javascript - caracteristici speciale, mdn

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.

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:

1. Tabindex tranzitoriu. mișcarea focalizării software-ului
2. Aria-activedescendent. controlul concentrării "virtuale"

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:

1. programați focalizarea pe un alt element
2. schimba tabindexul elementului în focus la 0
3. schimba tabindex elementului anterior la -1

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.

Nu vă bazați pe comportamentul consistent pentru repetarea cheii, în acest moment









Articole similare

• Caracteristici speciale - ferestre enciclopedice electronice

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: