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

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

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

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

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

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

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

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

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

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

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

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

2. Έλεγχος

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

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

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

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

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

Ταξινόμηση του σημείου ελέγχου

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

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

Ταξινόμηση του σημείου ελέγχου σύμφωνα με το WCAG 2.1

Κατευθυντήρια γραμμή Κριτήριο επιτυχίας Τεχνικές Γενικές τεχνικές HTML τεχνικές ARIA τεχνικές Αποτυχίες

Πηγές

WAI-ARIA Spezification ARIA in HTML ARIA-Widgets