Το χαρακτηριστικό tabindex

Το χαρακτηριστικό tabindex ορίζει τη σειρά απόκτησης εστίασης κατά τη μετάβαση μεταξύ στοιχείων χρησιμοποιώντας το πλήκτρο Tab.

Πατώντας αυτό το πλήκτρο μπορείτε να ενεργοποιήσετε διαδοχικά μερικά στοιχεία της σελίδας (συνδέσμους και στοιχεία φορμών). Τα ενεργά στοιχεία θα λαμβάνουν την εστίαση εισόδου.

Για τα πεδία εισόδου τύπου input και textarea η εστίαση θα εκφράζεται στο ότι στο πεδίο θα αναβοσβήνει ο δρομέας και σε αυτό θα μπορεί να εισαχθεί κείμενο, για τους συνδέσμους και άλλα στοιχεία αυτό θα είναι η επισήμανση με κάποιο τρόπο (υπογράμμιση, περικύκλωση με διακεκομμένο περίγραμμα κ.λπ., εξαρτάται από το πρόγραμμα περιήγησης).

Εάν τη στιγμή της απόκτησης εστίασης το στοιχείο δεν ήταν ορατό στη σελίδα (λόγω κύλισης), τότε η σελίδα θα κυλήσει σε αυτό το στοιχείο.

Εάν στα στοιχεία δεν έχει οριστεί το χαρακτηριστικό tabindex ή έχει τιμή 0, τότε η μετάβαση σε αυτά με το πλήκτρο Tab θα πηγαίνει με τη σειρά διάταξης των στοιχείων στον κώδικα HTML.

Εάν στη σελίδα υπάρχουν στοιχεία στα οποία έχει οριστεί tabindex, τότε αρχικά η μετάβαση θα πηγαίνει σε αυτά, ξεκινώντας από τη μικρότερη τιμή του χαρακτηριστικού tabindex (η μικρότερη μπορεί να είναι η μονάδα) και ούτω καθεξής κατά αύξουσα τιμή του χαρακτηριστικού, και όταν τέτοια στοιχεία τελειώσουν - η μετάβαση θα συνεχιστεί σε εκείνα τα στοιχεία στα οποία δεν έχει οριστεί tabindex ή έχει τιμή 0.

Ως τιμή του χαρακτηριστικού χρησιμοποιούνται ακέραιοι αριθμοί από 1 έως το άπειρο. Εάν κάποιοι αριθμοί παραλείπονται - τίποτα τρομερό δεν θα συμβεί (για παράδειγμα, εάν λείπει ο αριθμός 2, τότε πρώτα η εστίαση θα πέσει στο στοιχείο με tabindex, ίσο με 1, και μετά στο στοιχείο με tabindex, ίσο με 3).

Εάν στη σελίδα τη στιγμή του πατήματος του πλήκτρου Tab υπάρχει στοιχείο σε εστίαση (η εστίαση μπορούσε να έχει αποκτηθεί όχι μόνο πατώντας Tab, αλλά και κάνοντας κλικ με το ποντίκι στο στοιχείο ή με το χαρακτηριστικό autofocus), τότε το επόμενο πάτημα του πλήκτρου Tab θα οδηγήσει στο ότι η εστίαση θα λάβει το επόμενο στη σειρά στοιχείο μετά από αυτό που βρίσκεται σε εστίαση (για παράδειγμα, εάν τώρα βρίσκεται σε εστίαση το στοιχείο με tabindex 3, τότε επόμενο θα λάβει εστίαση το στοιχείο με tabindex 4).

Εάν σε ένα πεδίο εισόδου έχει οριστεί το χαρακτηριστικό disabled, τότε θα αγνοηθεί από τις μεταβάσεις μέσω του πλήκτρου Tab, ακόμα και αν σε αυτό το πεδίο έχει οριστεί το χαρακτηριστικό tabindex.

Το χαρακτηριστικό tabindex εφαρμόζεται σε τις ετικέτες a, input, textarea, button, select.

Παράδειγμα

Ας ορίσουμε στα πεδία εισόδου το χαρακτηριστικό tabindex. Πατήστε διαδοχικά το πλήκτρο Tab και θα δείτε πώς η εστίαση εισόδου θα μεταβαίνει από το πρώτο πεδίο εισόδου στο τέταρτο, και μετά θα συνεχίσει στους συνδέσμους από την αρχή της σελίδας (καθώς δεν υπάρχουν άλλα στοιχεία με ορισμένο χαρακτηριστικό tabindex):

:

Δείτε επίσης