Οι εφαρμογές μιας σελίδας θέτουν μια σημαντική πρόκληση προσβασιμότητας όταν πρόκειται για την επικοινωνία των αλλαγών προβολής. Χωρίς ανανέωση σελίδας, οι αναγνώστες οθόνης δεν λαμβάνουν αυτές τις σημαντικές αλλαγές διεπαφής χρήστη, αφήνοντας τους χρήστες με προβλήματα όρασης σύγχυση και αγνοία.
Μία λύση είναι να δημιουργήσετε ένα μήνυμα με βάση τον τίτλο της σελίδας και να αξιοποιήσετε μια ζωντανή περιοχή ARIA για να ανακοινώσετε ρητά, μέσω ενός χρήσιμου μηνύματος, ότι έχει φορτωθεί μια νέα προβολή. Δημιουργήστε πρώτα μια συνάρτηση που καλείται όταν ενημερώνεται το viewContent. Το AngularJS παρέχει ένα συμβάν $ viewContentLoaded για το σκοπό αυτό. Στον κωδικό ελεγκτή, ακούστε το συμβάν και καλέστε μια συνάρτηση (στο CoffeeScript):
app.controller «PageController», ($ εύρος, $ τοποθεσία, $ http) -> εύρος $. $ on «$ viewContentLoaded», mengumumkan_view_loaded
Στη συνάρτηση allow_view_loaded, ενημερώστε τον τίτλο της σελίδας και ανακοινώστε το μήνυμα. Ενώ τα πλαίσια μίας σελίδας δεν ενημερώνουν αυτόματα τους τίτλους της σελίδας, η διατήρηση του τίτλου της σελίδας συγχρονισμένη με την τρέχουσα προβολή βελτιώνει την κατανόηση της προβολής από τους χρήστες.
Ένας τρόπος για να το κάνετε αυτό είναι να χρησιμοποιήσετε ένα χαρακτηριστικό δεδομένων κάπου στην προβολή για να αποθηκεύσετε τον τίτλο προβολής:
document.title = $ («[data-viewtitle]»). δεδομένα «viewtitle»
Τώρα δημιουργήστε ένα μήνυμα χρησιμοποιώντας τον ενημερωμένο τίτλο σελίδας και ανακοινώστε το:
$ .announce (document.title + ', προβολή φορτώθηκε')
Το $ .announce () είναι μια συνάρτηση jQuery που χρησιμοποιεί μια μόνο, μη ορατή ζωντανή περιοχή για να ανακοινώσει περιεχόμενο. Αυτή η προσέγγιση συμβάλλει στην απλοποίηση του κώδικα και στις προσπάθειες εντοπισμού σφαλμάτων σε σύγκριση με την ad hoc χρήση ζωντανών περιοχών. Ωστόσο, υπάρχουν μερικές βέλτιστες πρακτικές που πρέπει να θυμάστε.
Αρχικά, δημιουργήστε μια μοναδική ζώνη "εκφωνητής" στη σελίδα σας για να ανακοινώσετε περιεχόμενο χρησιμοποιώντας το aria-live = "polite | assertive". Μην χρησιμοποιείτε άλλες ζωντανές περιοχές, συμπεριλαμβανομένων ρόλων ζωντανών περιοχών (π.χ. role = "alert | timer | log"). Ένα παράδειγμα ζωντανής περιοχής:
div aria-live = "polite" id = "ανακοινωτής"> (Το κείμενο που θα προστεθεί ή θα ενημερωθεί εδώ θα ανακοινωθεί) / div>
Δεύτερον, διαγράψτε τα περιεχόμενα της ζωντανής περιοχής λίγο μετά την ενημέρωση του περιεχομένου. Αυτό αποτρέπει τους χρήστες από το να σκοντάψουν τα παλιά μηνύματα.
Τέλος, όπως και με οποιαδήποτε τεχνική προσβασιμότητας, χρησιμοποιήστε $ .announce () με σύνεση. Θα πρέπει να χρησιμοποιείται μόνο για την επικοινωνία σημαντικών ενημερώσεων διεπαφής χρήστη.
Λόγια: Πάτρικ Φοξ
Ο Patrick Fox είναι διευθυντής τεχνολογίας Web UI στο Razorfish στο Ώστιν. Αυτό το άρθρο δημοσιεύτηκε αρχικά στο τεύχος 271 του περιοδικού net.
Σας άρεσε αυτό; Διαβάστε αυτά!
- Ο οδηγός του σχεδιαστή για την ψηφιακή προσβασιμότητα
- Οι καλύτερες γραμματοσειρές δωρεάν σεναρίου
- Δωρεάν επιλογή γραμματοσειρών γκράφιτι
