A Look into ARIA πρότυπα Web & HTML Apps Προσβασιμότητα
Ένας αληθινά ανοικτός και αποκλειστικός ιστός χρειάζεται τεχνολογίες που επιτρέπουν στους χρήστες με αναπηρία να βασίζονται σε βοηθητικές τεχνολογίες για να απολαμβάνουν δυναμικό περιεχόμενο ιστού και σύγχρονες εφαρμογές ιστού. Τα πρότυπα ιστού προσβασιμότητας του W3C στοχεύουν να συμπληρώσουν τον ιστό με εφαρμογές Rich Internet Access (ARIA) που μπορούν να χρησιμοποιήσουν αποτελεσματικά οι χρήστες με αναπηρίες.
Η ARIA είναι ένα από τα πολυάριθμα πρότυπα προσβασιμότητας και κατευθυντήριες γραμμές που δημοσιεύονται από την Πρωτοβουλία για την Προσβασιμότητα στο Web (WAI). Παρέχει μια πρόσθετη σήμανση που μπορεί εύκολα να εισαχθεί σε έγγραφα HTML. Το WAI-ARIA είναι μια λύση πολλαπλών πλατφορμών που απευθύνεται στην πλατφόρμα Open Web Platform, οπότε δεν σκέφτεστε μόνο τους ιστότοπους, αλλά και τα παιχνίδια, την ψηφιακή ψυχαγωγία, την υγειονομική περίθαλψη, τα κινητά και άλλα είδη εφαρμογών.
Σε αυτή την ανάρτηση θα δούμε πώς μπορείτε να προσθέσετε προσβασιμότητα στα έγγραφά σας HTML με τη βοήθεια των προτύπων WAI-ARIA.
Το Πλαίσιο ARIA
Η σύνταξη της HTML δεν επιτρέπει πάντα στους προγραμματιστές να περιγράψουν τα στοιχεία σωστά, να προσδιορίσουν τους ρόλους τους και να καθορίσουν τις σχέσεις μεταξύ τους. Ενώ αυτό είναι σπάνια πρόβλημα για τους επισκέπτες που έχουν πλήρη κατοχή των αισθήσεών τους, μπορεί να εμποδίσει τους χρήστες βοηθητικής τεχνολογίας από την κατανόηση του τι συμβαίνει στην οθόνη και τη διερεύνηση των επιλογών τους.
Αυτό είναι το σημείο όπου η ΑΡΙΑ έρχεται στη βοήθειά μας, καθώς καθιστά δυνατό τον καθορισμό του σκοπού των διαφόρων στοιχείων με τη βοήθεια της ρόλους ορόσημο, και περιγράψτε τη φύση τους με aria-prefixed attributes. Τα χαρακτηριστικά Aria-prefixed έχουν δύο τύπους: ιδιότητες που περιγράφουν χαρακτηριστικά τα οποία είναι λιγότερο πιθανό να αλλάξουν σε ολόκληρο τον κύκλο ζωής της σελίδας, και κράτη μέλη που παρέχουν πληροφορίες σχετικά με πράγματα που συχνά αλλάζουν λόγω της αλληλεπίδρασης των χρηστών.
Ρόλοι ορόσημων
Ρόλοι ορόσημων είναι οι πιο γνωστές μορφές του μοντέλου ρόλων της ARIA (άλλοι είναι οι αφηρημένοι ρόλοι, οι ρόλοι του Widget και οι ρόλοι δομής εγγράφων). Οι ρόλοι ορόσημων επιτρέπουν στους προγραμματιστές να εντοπίζουν μεγάλους κατανοητές περιοχές στην ιστοσελίδα που υποστηρίζουν οι χρήστες βοηθητικής τεχνολογίας για γρήγορη πρόσβαση.
Υπάρχουν 8 τύποι ρόλων αναφοράς ARIA και πρέπει να προστεθούν ως χαρακτηριστικά στις σχετικές ετικέτες HTML.
ρόλο =”πανό”
Ο ρόλος του banner προορίζεται να χρησιμοποιηθεί κυρίως για περιεχόμενο που σχετίζεται με ολόκληρο τον ιστότοπο και όχι μόνο με μεμονωμένες σελίδες. Προστίθεται συνήθως ως χαρακτηριστικό στην κύρια κεφαλίδα του ιστότοπου για το λογότυπο και άλλες σημαντικές πληροφορίες σε όλη την τοποθεσία. Είναι σημαντικό να μπορείτε να χρησιμοποιήσετε το ρόλο του banner μόνο μία φορά σε οποιοδήποτε έγγραφο ή εφαρμογή HTML.
ρόλο =”κύριος”
Ο κύριος ρόλος ορόσημο σχετίζεται με το κύριο περιεχόμενο του εγγράφου. Δεν μπορεί να χρησιμοποιηθεί περισσότερο από μία φορά σε οποιαδήποτε σελίδα HTML. Συνήθως ακολουθεί το Ο ρόλος πλοήγησης προορίζεται να χρησιμοποιηθεί για την ένδειξη μιας περιοχής που περιέχει στοιχεία πλοήγησης, όπως συνδέσμους και λίστες σε έναν ιστότοπο. Ο συμπληρωματικός ρόλος ορόσημο περιγράφει πρόσθετο περιεχόμενο που σχετίζεται με το κύριο περιεχόμενο του ιστότοπου. Πρέπει να τοποθετηθεί στο παρόμοιο επίπεδο στην ιεραρχία DOM ως Ο ρόλος contentinfo ενημερώνει τους χρήστες σχετικά με την παρουσία μιας περιοχής όπου μπορούν να βρεθούν διαφορετικά είδη μεταδεδομένων, όπως πληροφορίες πνευματικών δικαιωμάτων, νομικές δηλώσεις και δηλώσεις απορρήτου. Χρησιμοποιείται συνήθως για το υποσέλιδο ενός ιστότοπου. Ο ρόλος ορόσημο φόρμας υποδεικνύει μια φόρμα που περιμένει την είσοδο του χρήστη. Για τις φόρμες αναζήτησης θα πρέπει να χρησιμοποιήσετε Ο ρόλος αναζήτησης είναι αρκετά αυτονόητος, σκοπός του είναι να βοηθήσει τις βοηθητικές τεχνολογίες να προσδιορίσουν τη λειτουργικότητα αναζήτησης μιας ιστοσελίδας. Μπορείτε να χρησιμοποιήσετε τον ρόλο ορόσημο εφαρμογής για μια περιοχή που θέλετε να δηλώσετε ως εφαρμογή ιστού αντί για έγγραφο ιστού. Δεν συνιστάται να συμπεριληφθεί σε παραδοσιακούς ιστότοπους, καθώς υποδεικνύει ότι οι τεχνολογίες υποβοήθησης θα αλλάξουν από τη λειτουργία κανονικής περιήγησης σε λειτουργία περιήγησης εφαρμογών. Θα πρέπει να χρησιμοποιείτε μόνο αυτό το ρόλο ορόσημο με μεγάλη προσοχή. Ενώ οι ρόλοι σας επιτρέπουν να ορίσετε τη σημασία των ετικετών HTML, οι καταστάσεις και οι ιδιότητες παρέχουν στον χρήστη επιπλέον πληροφορίες σχετικά με τον τρόπο αλληλεπίδρασης με αυτές. Και τα δύο κράτη και οι ιδιότητες σημειώνονται με aria-prefixed attributes με τη σύνταξη αρία-*. Τα πιο γνωστά χαρακτηριστικά ARIA είναι πιθανώς η ιδιότητα που απαιτείται για την aria και η κατάσταση ελέγχου της περιοχής. Η Aria που απαιτείται είναι α ιδιοκτησία επειδή είναι ένα μόνιμο χαρακτηριστικό ενός στοιχείου εισόδου (δηλ. ο χρήστης πρέπει να το συμπληρώσει), ενώ η aria-checked είναι a κατάσταση επειδή ένα πλαίσιο ελέγχου μπορεί συχνά να αλλάξει την αξία του λόγω της αλληλεπίδρασης του χρήστη. Τα κράτη και οι ιδιότητες λαμβάνουν ενίοτε τιμές συμβολής (περιορισμένο σύνολο προκαθορισμένων τιμών), για παράδειγμα η ιδιότητα aria-live μπορεί να έχει 3 διαφορετικές τιμές: μακριά από, ευγενικός, κατηγορηματικός. Η σύνταξη σε αυτό το παράδειγμα μοιάζει με αυτή: Σε άλλες περιπτώσεις οι τιμές των χαρακτηριστικών aria-prefixed αντιπροσωπεύονται από χορδές, αριθμούς, ακεραίων, Αναφορές ID ή Σωστό Λάθος αξίες. Χρησιμοποιήστε χαρακτηριστικά σχέσης για να υποδείξετε σχέσεις μεταξύ διαφορετικών στοιχείων στον ιστότοπό σας, που δεν μπορούν να καθοριστούν διαφορετικά από τη δομή εγγράφων. Για παράδειγμα, το Αφού ορίσετε έναν ρόλο ορόσημο ARIA για μια αντιληπτή περιοχή στη σελίδα σας HTML, μπορεί να βοηθήσει πολύ βοηθητικές τεχνολογίες εάν αλλάξετε τις καταστάσεις και τις ιδιότητες των εξαρτημάτων ARIA σύμφωνα με τα συμβάντα που συμβαίνουν στην οθόνη. Αυτό μπορεί να είναι κρίσιμο όταν οι χρήστες πρέπει να αλληλεπιδρούν με τον ιστότοπο, για παράδειγμα συμπληρώνοντας μια φόρμα ή τρέχοντας ένα ερώτημα αναζήτησης. Ο γενικός κανόνας του σχεδιασμού προσβασιμότητας είναι ότι η τρέχουσα κατάσταση του περιβάλλοντος χρήστη πρέπει πάντα να γίνεται αντιληπτή από τις υποστηρικτικές τεχνολογίες. Για παράδειγμα, αν ο χρήστης επιλέξει μια επιλογή σε μια φόρμα, πρέπει να εμφανιστεί επιλεγμένη και για βοηθητικές τεχνολογίες. Αυτό μπορεί εύκολα να επιτευχθεί με τη χρησιμοποίηση της επιλεγμένης από aria κατάστασης με την ακόλουθη σύνταξη: Η κατευθυντήρια γραμμή WAI-ARIA για τις πρακτικές συγγραφής της W3C μπορεί να σας δώσει πολλές άλλες μεγάλες ιδέες σχετικά με τον τρόπο σωστής εναρμόνισης των οπτικών και προσβάσιμων διεπαφών του ιστότοπού σας. Η χρήση των ρόλων και των χαρακτηριστικών ARIA μπορεί μερικές φορές να είναι περιττή. Όταν χρησιμοποιείτε σημασιολογικές ετικέτες του HTML5 όπως Για παράδειγμα, είναι περιττό να χρησιμοποιήσετε το μορφή ορόσημο για τον καθορισμό του Έτσι, αν έχετε ήδη προσθέσει το κεκρυμμένος Χαρακτηριστικό HTML σε μια είσοδο φόρμας, είναι περιττό να προσθέσετε το aria-κρυμμένο κατάσταση, όπως το πρόγραμμα περιήγησης περιλαμβάνει από προεπιλογή.. Το τελευταίο προστέθηκε στις προδιαγραφές του W3C με σκοπό τη χαρτογράφηση του κύριος Ο ρόλος ορόσημο ARIA σε ένα σημασιολογικό στοιχείο HTML. ρόλο =”πλοήγηση”
ρόλο =”συμπληρωματικός”
ρόλο = "κύριο". Σχετικές αναρτήσεις, δημοφιλή άρθρα, τελευταίες παρατηρήσεις είναι τυπικά παραδείγματα αυτόνομου συμπληρωματικού περιεχομένου.ρόλο =”contentinfo”
ρόλο =”μορφή”
ρόλος = "αναζήτηση" αντι αυτου.ρόλο =”Ψάξιμο”
ρόλο =”εφαρμογή”
Κράτη και ιδιότητες
Η σύνταξη των ιδιοτήτων Aria-prefixed
Πώς να χρησιμοποιήσετε τα κράτη και ιδιότητες του ARIA
1. Δημιουργία σχέσεων μεταξύ στοιχείων με χαρακτηριστικά σχέσης
aria-labelledby ιδιότητα προσδιορίζει το στοιχείο που επισημαίνει το τρέχον στοιχείο.aria-labelledby - μεταξύ άλλων - μπορεί να δεσμεύσει τις επικεφαλίδες στις περιοχές ορόσημων της ARIA με τον ακόλουθο τρόπο:Αυτό είναι μια κατεύθυνση
Κυρίως περιεχόμενο… 2. Συγχρονισμός κρατών και ιδιοτήτων με τον κύκλο ζωής του στοιχείου
3. Ταίριασμα των οπτικών και των προσβάσιμων διεπαφών
.Μην παραμελίνετε την ARIA
ή , τα σύγχρονα προγράμματα περιήγησης ιστού προσθέτουν από προεπιλογή την κατάλληλη σημασιολογία ARIA. Σε αυτήν την περίπτωση δεν έχει νόημα να ορίσετε χωριστά τους ρόλους των ορόσημων της ARIA. στοιχείο. Αντί της σύνταξη είναι αρκετά τέλεια για να χρησιμοποιήσετε μόνο . Είναι επίσης περιττό να χρησιμοποιούμε τα εγγενή χαρακτηριστικά της HTML μαζί με το κατάλληλο χαρακτηριστικό ARIA.
