#Παράδειγμα 6/8: πλαίσιο ελέγχου (checkbox)

Το στοιχείο input του τύπου checkbox

Το στοιχείο <input> του τύπου checkbox της HTML αποδίδεται ως πλαίσιο ελέγχου το οποίο επισημαίνεται όταν ενεργοποιείται. Η ακριβής εμφάνιση εξαρτάται από τη διαμόρφωση του λειτουργικού συστήματος κάτω από την οποία εκτελείται το πρόγραμμα περιήγησης. Γενικά αυτό είναι τετράγωνο αλλά μπορεί να έχει στρογγυλεμένες γωνίες. Ένα πλαίσιο ελέγχου σάς επιτρέπει να επιλέξετε μεμονωμένες τιμές. Σημείωση: Τα κουμπιά επιλογής είναι παρόμοια με τα πλαίσια ελέγχου, αλλά με μια σημαντική διάκριση. Tα κουμπιά επιλογής με το ίδιο όνομα ομαδοποιούνται και μπορεί μόνο ένα κουμπί να επιλεγεί κάθε φορά. Ενώ τα πλαίσια ελέγχου σάς επιτρέπουν να ενεργοποιείτε και να απενεργοποιείτε μεμονωμένες τιμές (πολλαπλές επιλογές είναι δυνατόν).

Σημαντικές πληροφορίες για το στοιχείο input του τύπου checkbox

• Σύνταξη: Ετικέτα έναρξης: Απαραίτητη. Ετικέτα λήξης: Δεν έχει ετικέτα λήξης.
• ARIA-Ρόλος (προκαθορισμένος): checkbox
• Γονικά στοιχεία: Οποιοδήποτε στοιχείο που δέχεται phrasing content.
• Αποδεκτό περιεχόμενο: Χωρίς περιεχόμενο. Κενό στοιχείο.

Δημιουργία του πλαισίου ελέγχου μέσω της ARIA και της JavaScript

Υπάρχουν περιπτώσεις στις οποίες συνιστάται η δημιουργία πλαισίου ελέγχου μέσω της ARIA και της JavaScript. Τα χαρακτηριστικά που διακρίνουν το στοιχείο αυτό είναι role="checkbox" και aria-checked="false". Τώρα, το στοιχείο με το χαρακτηριστικό role="checkbox" μπορεί να έχει τρεις καταστάσεις μέσω του χαρακτηριστικού aria-checked: true, false, ή mixed.

Εάν ο ρόλος εφαρμόζεται σε ένα μη διαδραστικό στοιχείο δηλαδή σε ένα στοιχείο χωρίς δυνατότητα εστίασης, χρησιμοποιήστε το χαρακτηριστικό tabindex για τον μετασχηματισμό σε διαδραστικό στοιχείο. Η αναμενόμενη συντόμευση πληκτρολογίου για την ενεργοποίηση ενός πλαισίου ελέγχου είναι το πλήκτρο Space.

Τώρα, τα API προσβασιμότητας δεν έχουν τρόπο αναπαράστασης σημασιολογικών στοιχείων που είναι φωλιασμένα σε ένα στοιχείο με το ρόλο checkbox. Για να αντιμετωπίσουν αυτόν τον περιορισμό, τα προγράμματα περιήγησης εφαρμόζουν αυτόματα τον ARIA ρόλο presentation σε όλα τα φωλιασμένα στοιχεία οποιουδήποτε στοιχείου με το ρόλο checkbox. Είναι ένας ρόλος που δεν υποστηρίζει σημασιολογικά φωλιασμένα στοιχεία όπως, H1-H6 κλπ.

Σημείωση: Το δέντρο προσβασιμότητας (Accessibility tree) περιέχει πληροφορίες που σχετίζονται με την προσβασιμότητα για τα περισσότερα στοιχεία της HTML. Τα προγράμματα περιήγησης μετατρέπουν τη σήμανση σε μια εσωτερική αναπαράσταση που ονομάζεται δέντρο DOM. Το δέντρο DOM περιέχει αντικείμενα που αντιπροσωπεύουν όλα τα στοιχεία, τα χαρακτηριστικά και τους κόμβους κειμένου της σήμανσης. Στη συνέχεια, τα προγράμματα περιήγησης δημιουργούν ένα δέντρο προσβασιμότητας με βάση το δέντρο DOM, το οποίο χρησιμοποιείται από το API προσβασιμότητας.

Όποτε είναι δυνατόν, θα πρέπει να χρησιμοποιείτε τα εγγενή πλαίσια ελέγχου που κάνει η γλώσσα HTML διαθέσιμα. Όμως, είναι δυνατό να δημιουργήσετε πλαίσια ελέγχου μέσω της τεχνολογίας ARIA [εξωτερικός σύνδεσμος, στα Αγγλικά] . Μπορούν να λειτουργούν ακριβώς όπως τα εγγενή πλαίσια επιλογής της HTML. Έχει πλεονεκτήματα τόσο για βλέποντες χρήστες όσο και για ηχητικούς χρήστες που χρησιμοποιούν πρόγραμμα ανάγνωσης οθόνης.

Σημείωση: Η χρήση το ποντικιού αλλά και του πληκτρολογίου είναι δυνατόν. Ο κώδικας του παραδείγματος είναι έτσι αναπτυγμένος, ώστε οι συναρτήσεις να λειτουργούν ανεξάρτητα της συσκευής. Τώρα, το μαρκάρισμα του πλαισίου ελέγχου οδηγεί στη δημιουργία μηνύματος κατάστασης το οποίο ανακοινώνετε από τον αναγνώστη οθόνης. Σχετίζεται με το κριτήριο επιτυχίας 4.1.3 Μηνύματα κατάστασης (Επίπεδο AA).

Παράδειγμα για πλαίσιο ελέγχου μέσω της ARIA και της JavaScript

Ο πηγαίος κώδικας του παραδείγματος

Ακολουθεί ο πηγαίος κώδικας του πλαισίου ελέγχου το οποίο δημιουργήθηκε μέσω του στοιχείου <span> της HTML, της τεχνολογίας ARIA και της γλώσσας σεναρίων JavaScript.

Σε αυτή τη σελίδα παρουσιάζουμε το παράδειγμα Δημιουργία πλαισίου ελέγχου μέσω του στοιχείου span και ARIA σήμανση και κάνουμε επίσης υλικό διαθέσιμο δωρεάν. Αφενός θέλουμε να κάνουμε την ιδιαίτερη σημασία του στοιχείου <span> της HTML γνωστή, και αφετέρου να απασχολήσουμε το ζήτημα της ανάπτυξης του πλαισίου ελέγχου μέσω της τεχνολογίας ARIA και του στοιχείου <span>.

Επισημάνομε ότι η χρήση του στοιχείου <span> ως ένα στοιχείο δίχως προκαθορισμένη σήμανση συνιστάται σε συνδυασμό με την τεχνολογία ARIA. Στοχεύοντας πάντα την ενίσχυση των δημιουργών ιστοσελίδων με έμφαση την προσβασιμότητα.

Τώρα, τις τεχνικές που παρουσιάζουμε εδώ είναι σύγχρονες και από τις βασικότερες για την εξυπηρέτηση των επισκεπτών με ειδικές ανάγκες. Παρακάτω θα βρείτε τον σύνδεσμο για τη λήψη των πόρων σχετικά του παραδείγματος "Δημιουργία πλαισίου ελέγχου μέσω του στοιχείου span και ARIA σήμανση". Κατέβασμα των πόρων για πλαίσιο ελέγχου (checkbox). Σε μορφή ZIP