4.1.2 Όνομα, Ρόλος, Τιμή

Τι ελέγχεται;

Όλα τα αυτοσχεδιασμένα στοιχεία ενός ιστοτόπου υλοποιούνται με τέτοιο τρόπο ώστε να υπάρχουν οι σημασιολογικές πληροφορίες. Όπως, όνομα, ρόλος και ιδιότητες. Στοιχεία ή γραφικά στοιχεία που δε βασίζονται σε διαδραστικά στοιχεία της HTML όπως μη σημασιολογικά στοιχεία (<div> ή <span>) και μετατρέπονται σε στοιχεία ελέγχου χρησιμοποιώντας JavaScript. Η σημασιολογία των στοιχείων αυτών παρέχεται χρησιμοποιώντας το WAI-ARIA.

Οι μεταβαλλόμενες καταστάσεις των στοιχείων ελέγχου δεν εμφανίζονται μόνο οπτικά μέσω CSS και JavaScript. Αλλά και μέσω ελεγχόμενων από σενάριο αλλαγών σχετικά των τιμών των χαρακτηριστικών ARIA. Έτσι ώστε η σημασιολογία να είναι διαθέσιμη και για μη οπτική χρήση. Αυτό είναι αντικείμενο από το Σημείο ελέγχου 4.1.2 Όνομα, Ρόλος, Τιμή (Επίπεδο A). Ανοίγει σελίδα με παράδειγμα για κουμπί (button).

Γιατί ελέγχεται;

Τα τυπικά στοιχεία ελέγχου HTML, όπως σύνδεσμοι και στοιχεία φόρμας (<input>, <button>, <checkbox> κλπ.) έχουν ονόματα, ρόλους, τιμές και καταστάσεις. Υπό την προϋπόθεση ότι υλοποιούνται σύμφωνα με τις προδιαγραφές και είναι γενικά αναγνωρίσιμα για εργαλεία π.χ αναγνώστες οθόνης. Για παράδειγμα, οι τυφλοί χρήστες παρατηρούν όταν κάνουν tab σε έναν σύνδεσμο και στη συνέχεια μπορούν να τον ακολουθήσουν.

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

Τώρα, εάν ακατάλληλα στοιχεία (όπως div ή span) μετατραπούν σε συνδέσμους ή στοιχεία ελέγχου χρησιμοποιώντας JavaScript, η σημασιολογία μπορεί να καθοριστεί χρησιμοποιώντας το WAI-ARIA. Επειδή δεν διαθέτουν εγγενή σήμανση.

Αυτό ισχύει επίσης για στοιχεία (Widgets όπως tabpanel, accordeon κλπ.) που δεν είναι διαθέσιμα με σημασιολογικά στοιχεία της HTML. Υλοποιούνται με τη βοήθεια μη σημασιολογικών στοιχείων και σεναρίων. Τα χαρακτηριστικά WAI-ARIA βοηθούν στην κατανόησή τους με τη μετάδοση σημασιολογικών πληροφοριών από το πρόγραμμα περιήγησης στις υποστηρικτικές τεχνολογίες.

Πώς ελέγχεται;

1. Εφαρμογή του σημείου ελέγχου

Το σημείο ελέγχου ισχύει εάν η σελίδα περιέχει διαδραστικά στοιχεία ελέγχου. Όπως, συνδέσμους, στοιχεία φόρμας ή προγραμματισμένα στοιχεία που ανταποκρίνονται σε onclick ή άλλους Event Handler.

2. Έλεγχος

Ανοίξτε τη σελίδα στο πρόγραμμα περιήγησης Firefox.
Ελέγξτε τα στοιχεία ελέγχου της σελίδας ως προς τη σημασιολογία.
- Υπάρχουν προφανείς σύνδεσμοι ή κουμπιά χωρίς χαρακτηριστικό href; Αυτό μπορείτε να ελέγξτε με το επιπρόσθετο Web Developer Toolbar. Επιλέξτε τη συνάρτηση Information > display link details.
- Υπάρχουν στοιχεία φόρμας όπως πλαίσια ελέγχου ή κουμπιά επιλογής που διαφέρουν από τη συνηθισμένη αναπαράσταση συστήματος. Επειδή σχεδιαστήκανε με άλλα στοιχεία όπως <div> ή <img>;
- Υπάρχουν προσαρμοσμένα Widgets στον ιστότοπο, όπως range ή tabpanels;
Χρησιμοποιήστε τα Developer Tools για να ελέγξετε εάν τα ονόματα, οι ιδιότητες υπάρχουν. Επίσης, εάν οι καταστάσεις αντιστοιχίζονται μέσω του WAI-ARIA. Οι αλλαγές στην κατάσταση πρέπει να αντικατοπτρίζονται από αλλαγές στις τιμές των χαρακτηριστικών. Οι αλλαγές κατάστασης γραφικών μέσω της ανταλλαγής εικόνων που χρησιμοποιούνται αντί για στοιχεία ελέγχου πρέπει επίσης να προκαλούν σημαντικές αλλαγές στα χαρακτηριστικά alt. Εναλλακτικά στις ιδιότητες WAI-ARIA που είναι διαθέσιμες για εργαλεία.

3. Σημειώσεις

Εάν έχετε αμφιβολίες, συμβουλευτείτε τον Οδηγό πρακτικών συγγραφής ARIA Authoring Practices Guide.
Τα μη σημασιολογικά στοιχεία όπως το <div> ή το <span> μπορούν να εστιαστούν μόνο με το πληκτρολόγιο εάν έχει οριστεί το χαρακτηριστικό tabindex. Εάν δε συμβαίνει αυτό, ενδέχεται να χρειαστεί να εξεταστούν στοιχεία χρησιμοποιώντας το εργαλείο δρομέα (aViewer).
Το πρόγραμμα ανάγνωσης οθόνης θα πρέπει επίσης να χρησιμοποιείται για τον έλεγχο πολύπλοκων γραφικών στοιχείων.
Για στοιχεία που εμφανίζονται δυναμικά, μπορεί να είναι απαραίτητο να σταματήσετε το σενάριο που εκτελείται για να εξετάσετε το περιεχόμενο που εμφανίζεται. Ένας κατάλληλος τρόπος για να γίνει αυτό είναι να εισαγάγετε το σενάριο setTimeout(function(){debugger}, 5000). Στην κονσόλα εργαλείων προγραμματιστή (η πρόσβαση σε αυτά είναι δυνατή με το F12), ακολουθούμενη αμέσως από την κλήση του περιεχομένου που θα εμφανιστεί. Πέντε δευτερόλεπτα μετά την ενεργοποίηση του σεναρίου της κονσόλας, η εκτέλεση του σεναρίου σελίδας σταματά. Τα δυναμικά στοιχεία μπορούν να εξεταστούν μόνο χρησιμοποιώντας τα Developer Tools.

4. Αξιολόγηση

Κριτήριο δεν ικανοποιείται.

Σημαντικά στοιχεία ελέγχου υλοποιούνται με μη σημασιολογικά στοιχεία HTML. Τα <a> στοιχεία χωρίς χαρακτηριστικό href, χωρίς να έχει αναδημιουργηθεί η σημασιολογία με το WAI-ARIA.

Ταξινόμηση του σημείου ελέγχου 4.1.2 Όνομα, Ρόλος, Τιμή

Διαφοροποίηση από άλλα σημεία ελέγχου

Αυτό το σημείο ελέγχου δεν αφορά την αξιολόγηση της λειτουργικότητας του πληκτρολογίου των στοιχείων ελέγχου με σενάριο. Αυτό είναι το θέμα του σημείου ελέγχου 2.1.1 «Μπορεί να χρησιμοποιηθεί χωρίς ποντίκι».