Έχω δει το χαρακτηριστικό aria παντού, ενώ εργάζομαι με το Angular Material. Μπορεί κάποιος να μου εξηγήσει, τι σημαίνει το πρόθεμα aria; αλλά το πιο σημαντικό είναι ότι αυτό που προσπαθώ να καταλάβω είναι η διαφορά μεταξύ του χαρακτηριστικού aria-hidden
και hidden
.
Το ARIA (Accessible Rich Internet Applications) ορίζει έναν τρόπο για να γίνει το περιεχόμενο του Web και οι εφαρμογές Web πιο προσβάσιμες στα άτομα με αναπηρίες.
Η ιδιότητα "hidden" είναι νέα στην HTML5 και λέει στους φυλλομετρητές να μην εμφανίζουν το στοιχείο. Η ιδιότητα aria-hidden
δηλώνει στους αναγνώστες οθόνης αν πρέπει να αγνοήσουν το στοιχείο. Ρίξτε μια ματιά στα έγγραφα w3 για περισσότερες λεπτομέρειες:
https://www.w3.org/WAI/PF/aria/states_and_properties#aria-hidden
Η χρήση αυτών των προτύπων μπορεί να διευκολύνει τα άτομα με αναπηρία στη χρήση του διαδικτύου.
Ένα κρυφό χαρακτηριστικό είναι ένα boolean χαρακτηριστικό (True/False). Όταν αυτό το χαρακτηριστικό χρησιμοποιείται σε ένα στοιχείο, αφαιρεί κάθε συνάφεια με αυτό το στοιχείο. Όταν ένας χρήστης βλέπει τη σελίδα html, τα στοιχεία με το χαρακτηριστικό hidden δεν πρέπει να είναι ορατά.
Παράδειγμα:
<p hidden>You can't see this</p>
Τα χαρακτηριστικά Aria-hidden υποδεικνύουν ότι το στοιχείο και ΟΛΟΙ οι απόγονοί του εξακολουθούν να είναι ορατοί στο πρόγραμμα περιήγησης, αλλά θα είναι αόρατοι σε εργαλεία προσβασιμότητας, όπως τα προγράμματα ανάγνωσης οθόνης.
Παράδειγμα:
<p aria-hidden="true">You can't see this</p>
Ρίξτε μια ματιά στο αυτό. Θα πρέπει να απαντήσει σε όλες τις ερωτήσεις σας.
Σημείωση: Το ARIA σημαίνει Accessible Rich Internet Applications (προσβάσιμες πλούσιες εφαρμογές διαδικτύου).
Πηγές: Paciello Group
Σύμφωνα με την HTML 5.2:
Όταν καθορίζεται σε ένα στοιχείο, [το χαρακτηριστικό
κρυφό
] υποδεικνύει ότι το στοιχείο δεν είναι ακόμη ή δεν είναι πλέον άμεσα σχετικό με την τρέχουσα κατάσταση της σελίδας ή ότι χρησιμοποιείται για να δηλώσει περιεχόμενο που θα επαναχρησιμοποιηθεί από άλλα μέρη της σελίδας, σε αντίθεση με την άμεση πρόσβαση του χρήστη.
Παραδείγματα περιλαμβάνουν μια λίστα καρτελών όπου ορισμένα πάνελ δεν είναι εκτεθειμένα, ή μια οθόνη σύνδεσης που εξαφανίζεται μετά τη σύνδεση του χρήστη. Μου αρέσει να ονομάζω αυτά τα πράγματα "χρονικά συναφή", δηλαδή είναι συναφή με βάση το χρόνο.
Από την άλλη πλευρά, το ARIA 1.1 λέει:
[Η κατάσταση
aria-hidden
] δείχνει αν ένα στοιχείο είναι εκτεθειμένο στο API προσβασιμότητας.
Με άλλα λόγια, τα στοιχεία με aria-hidden="true"
απομακρύνονται από το δέντρο προσβασιμότητας, το οποίο οι περισσότερες υποστηρικτικές τεχνολογίες τιμούν, και τα στοιχεία με aria-hidden="false"
θα εκτεθούν οπωσδήποτε στο δέντρο. Τα στοιχεία χωρίς το χαρακτηριστικό aria-hidden
βρίσκονται στην κατάσταση "undefined (default)", που σημαίνει ότι οι πράκτορες χρήστη θα πρέπει να τα εκθέτουν στο δέντρο με βάση την απόδοση τους. Π.χ. ένας πράκτορας χρήστη μπορεί να αποφασίσει να το αφαιρέσει εάν το χρώμα του κειμένου του ταιριάζει με το χρώμα του φόντου του.
Τώρα ας συγκρίνουμε τη σημασιολογία. Είναι σκόπιμο να χρησιμοποιείτε το hidden
, αλλά όχι το aria-hidden
, για ένα στοιχείο που δεν είναι ακόμα "χρονικά σχετικό", αλλά που μπορεί να γίνει σχετικό στο μέλλον (οπότε θα χρησιμοποιούσατε δυναμικά σενάρια για να αφαιρέσετε το χαρακτηριστικό hidden
). Αντίστροφα, είναι σκόπιμο να χρησιμοποιήσετε το aria-hidden
, αλλά όχι το hidden
, σε ένα στοιχείο που είναι πάντα σχετικό, αλλά με το οποίο δεν θέλετε να γεμίσετε το API προσβασιμότητας- τέτοια στοιχεία μπορεί να περιλαμβάνουν "οπτικό φανταχτερό", όπως εικονίδια ή/και εικόνες που δεν είναι απαραίτητα για την κατανάλωση από τον χρήστη.
Η σημασιολογία έχει προβλέψιμα αποτελέσματα στους φυλλομετρητές/πράκτορες χρήστη. Ο λόγος για τον οποίο κάνω διάκριση είναι ότι η συμπεριφορά του πράκτορα χρήστη συνιστάται, αλλά δεν απαιτείται από τις προδιαγραφές.
Η ιδιότητα hidden
θα πρέπει να κρύβει ένα στοιχείο από όλες τις παρουσιάσεις, συμπεριλαμβανομένων των εκτυπωτών και των συσκευών ανάγνωσης οθόνης (υποθέτοντας ότι αυτές οι συσκευές τιμούν τις προδιαγραφές της HTML). Αν θέλετε να αφαιρέσετε ένα στοιχείο από το δέντρο προσβασιμότητας καθώς και από τα οπτικά μέσα, το hidden
θα έκανε το κόλπο. Ωστόσο, μην χρησιμοποιείτε το hidden
απλώς επειδή θέλετε αυτό το αποτέλεσμα. Αναρωτηθείτε πρώτα αν το hidden
είναι σημασιολογικά σωστό (βλέπε παραπάνω). Αν το hidden
δεν είναι σημασιολογικά σωστό, αλλά εξακολουθείτε να θέλετε να αποκρύψετε οπτικά το στοιχείο, μπορείτε να χρησιμοποιήσετε άλλες τεχνικές, όπως το CSS.
Τα στοιχεία με aria-hidden="true"
δεν εκτίθενται στο δέντρο προσβασιμότητας, οπότε, για παράδειγμα, τα προγράμματα ανάγνωσης οθόνης δεν θα τα αναγγείλουν. Αυτή η τεχνική πρέπει να χρησιμοποιείται προσεκτικά, καθώς θα παρέχει διαφορετικές εμπειρίες σε διαφορετικούς χρήστες: οι προσβάσιμοι πράκτορες χρήστη δεν θα τα αναγγείλουν/αποδίδουν, αλλά εξακολουθούν να αποδίδονται στους οπτικούς πράκτορες. Αυτό μπορεί να είναι καλό πράγμα όταν γίνεται σωστά, αλλά έχει τη δυνατότητα να γίνει κατάχρηση.
Τέλος, υπάρχει μια διαφορά στη σύνταξη μεταξύ των δύο χαρακτηριστικών.
Το hidden
είναι ένα boolean attribute, που σημαίνει ότι αν το attribute είναι παρόν είναι αληθές-ανεξάρτητα από οποιαδήποτε τιμή μπορεί να έχει-και αν το attribute απουσιάζει είναι ψευδές. Για την περίπτωση true, η καλύτερη πρακτική είναι είτε να μην χρησιμοποιείτε καθόλου τιμή (<div hidden>...</div>
), είτε την κενή τιμή συμβολοσειράς (<div hidden=""">...</div>
). Θα δεν συνιστούσα το hidden="true"
επειδή κάποιος που διαβάζει/αναβαθμίζει τον κώδικά σας θα μπορούσε να συμπεράνει ότι το hidden="false"
θα είχε το αντίθετο αποτέλεσμα, το οποίο είναι απλά λανθασμένο.
Το aria-hidden
, αντίθετα, είναι ένα αριθμημένο χαρακτηριστικό, που επιτρέπει μία από μια πεπερασμένη λίστα τιμών. Εάν το χαρακτηριστικό aria-hidden
είναι παρόν, η τιμή του πρέπει να είναι είτε "true"
είτε "false"
. Αν θέλετε την κατάσταση "undefined (default)", αφαιρέστε το χαρακτηριστικό εντελώς.
Περαιτέρω ανάγνωση: https://github.com/chharvey/chharvey.github.io/wiki/Hidden-Content