Εγκατάσταση & Ρύθμιση

Προρυθμισμένες εκδόσεις

Προσαρμοσμένη εγκατάσταση

Για να δημιουργήσετε τη δική σας υλοποίηση, κατεβάστε ένα τοπικό αντίγραφο (ή χρησιμοποιήστε μια έκδοση CDN) ενός πακέτου γλώσσας, του ελαχιστοποιημένου αρχείου JS και του ελαχιστοποιημένου αρχείου CSS, και στη συνέχεια δημιουργήστε ένα νέο στιγμιότυπο “Ed11y”.

Για εισαγωγές ESM/JS module:

Χρησιμοποιήστε τα αρχεία JavaScript .umd για παλαιότερα προγράμματα περιήγησης και συστήματα:

Παράμετροι

Μια πλήρης υλοποίηση θα καλείται μόνο για συνδεδεμένους συντάκτες (δεν θέλετε οι επισκέπτες του ιστότοπού σας να βλέπουν τον ελεγκτή σας!) και μπορεί να παρακάμψει οποιαδήποτε από τις προεπιλεγμένες παραμέτρους.

Σημειώστε ότι παρέχονται προεπιλογές για όλες τις παραμέτρους· συμπεριλάβετε μόνο αυτές που θέλετε να παρακάμψετε.

Μια πολύ προσαρμοσμένη υλοποίηση μπορεί να μοιάζει κάπως έτσι:

Οι έτοιμες ενσωματώσεις συχνά ορίζουν αυτές τις μεταβλητές δυναμικά – π.χ., φορτώνοντας σελίδες σε λειτουργία “assertive” όταν επεξεργάστηκαν πρόσφατα, και επιστρέφοντας σε “polite” μετά από μερικά λεπτά.

Θεματοποίηση

Αρκετές παράμετροι επιτρέπουν την επιλογή θέματος, την παράκαμψη χρωμάτων και την εισαγωγή CSS.

Συμπεριλάβετε μόνο τις παραμέτρους που χρειάζεται να παρακάμψετε για ευκολότερες μελλοντικές ενημερώσεις.

Χρήσιμα συμβάντα JS

Οι δημιουργοί θεμάτων μπορούν να συνδέσουν αυτά τα συμβάντα για να αντιδράσουν και να τροποποιήσουν τη σελίδα όπως χρειάζεται.

Με τυπική σειρά εμφάνισης...

  • ed11yRunCustomTests: εκπέμπεται όταν το αντικείμενο Results είναι έτοιμο να δεχτεί προσαρμοσμένα αποτελέσματα. Σημειώστε ότι η παράμετρος customTests πρέπει να οριστεί στον αριθμό των προσαρμοσμένων συναρτήσεων ελέγχου που θα εκτελέσετε (...πιθανώς μία...) για να εκπεμφθεί αυτό το συμβάν. Λεπτομέρειες στην επόμενη ενότητα.
  • ed11yResults: εκπέμπεται όταν ολοκληρωθούν όλοι οι έλεγχοι. Οι ενσωματώσεις API μπορούν τώρα να εξάγουν δεδομένα από το αντικείμενο Ed11y.results.
  • ed11yPanelOpened: εκπέμπεται αν ο πίνακας ανοίξει, αυτόματα ή χειροκίνητα.
  • ed11yShowHidden: παρέχει έναν αριθμό data-ed11y-result και ένα boolean viaJump. Εκπέμπεται μόνο αν η παράμετρος “ed11yShowHidden” έχει οριστεί και ένας γονέας του στοιχείου ταιριάζει με έναν επιλογέα. Χρησιμοποιείται για την αποκάλυψη ειδοποιήσεων σε κλειστά περιέχοντα στοιχεία, π.χ., ακορντεόν, καρτέλες και καρουζέλ. Παραδείγματα χρήσης στην επόμενη ενότητα.
  • ed11yPop: παρέχει το ID data-ed11y-result, καθώς και αναφορές στα αντικείμενα result και tip. Εκπέμπεται όταν εμφανίζεται μια επεξήγηση, επιτρέποντάς σας να τροποποιήσετε τις συμβουλές κατά την εκτέλεση.
  • ed11yShut: παρέχει το ID data-ed11y-result. Εκπέμπεται όταν κλείνει μια επεξήγηση.
  • ed11yDismissalUpdate: παρέχει εκτεταμένες πληροφορίες όταν ένας χρήστης απορρίπτει ή επαναφέρει μια ειδοποίηση. Χρησιμοποιείται για ενσωματώσεις API. Το αντικείμενο συμβάντος περιέχει:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

Δείγματα μπορείτε να βρείτε στις επόμενες ενότητες.

Τροποποίηση συμβουλών

Αν το μόνο που θέλετε είναι να τροποποιήσετε το κείμενο μιας συμβουλής, τα στοιχεία στο καθολικό αντικείμενο ed11yLang.en (πριν καλέσετε τη βιβλιοθήκη) ή στο Ed11y.M (μετά την κλήση της βιβλιοθήκης) μπορούν να παρακαμφθούν απευθείας. Π.χ., στο module Drupal όπου δημιουργήσαμε ψευδώνυμο του πακέτου γλώσσας στο Drupal.ed11yLang:

Drupal.ed11yLang.lang.testNames.title = “Please write shorter headings.”

Αυτό ισχύει για οποιοδήποτε από τα προεπιλεγμένα κλειδιά στο αρχείο τοπικοποίησης ή στην ενεργή μετάφραση συγκεκριμένης γλώσσας.

Το module Drupal προσθέτει επίσης προσαρμοσμένους συνδέσμους επεξεργασίας στις συμβουλές, χρησιμοποιώντας την παράμετρο editLinks. Σημειώστε τα “Page editor” και “Layout editor:”

Επεξήγηση με συνδέσμους "Page editor" και "Layout editor" εισαγμένους.

Μια απλοποιημένη έκδοση του κώδικα που ορίζει αυτήν την παράμετρο:

Το module Drupal χρησιμοποιεί στη συνέχεια το συμβάν ed11yPop για να εμφανίζει και να αποκρύπτει δυναμικά τον σύνδεσμο επεξεργασίας ανάλογα με το πλαίσιο όταν εμφανίζονται οι συμβουλές.

Αυτό το συμβάν παρέχει αναφορές στα αντικείμενα result και tip:

Προσαρμοσμένοι έλεγχοι

Αν η παράμετρος customTests είναι ένας αριθμός, το Editoria11y θα εκπέμψει ένα συμβάν “ed11yRunCustomTests” κατά τον έλεγχο, και στη συνέχεια θα σταματήσει για έως 500ms περιμένοντας αυτόν τον αριθμό συμβάντων “ed11yResume”.

Αυτό μπορεί να αξιοποιηθεί για να καλέσετε όσα scripts με προσαρμοσμένους ελέγχους θέλετε, τα οποία μπορούν να προσθέσουν τα αποτελέσματά τους στον πίνακα αποτελεσμάτων πριν σχεδιαστούν οι συμβουλές.

Για παράδειγμα, αν θέλατε να δημιουργήσετε αυτή τη συμβουλή, για να επισημάνετε συνδέσμους που έχουν επικολληθεί από email με συγκαλυμμένα URL:

Συμβουλή που γράφει "URL is Safe Link Encoded"

Θα χρειαστεί να:

  1. Προσθέσετε έναν ακροατή για το συμβάν ed11yRunCustomTests
  2. Βρείτε τα αντίστοιχα στοιχεία
  3. Ορίσετε το μήνυμα της συμβουλής
  4. Εκπέμψετε το συμβάν “resume” για να αφήσετε το Editoria11y να σχεδιάσει τη συμβουλή:

Διαχείριση ειδοποιήσεων σε κρυφό ή περιορισμένου μεγέθους περιεχόμενο

Πολλά διαδραστικά στοιχεία (καρτέλες, sliders, ακορντεόν) αποκρύπτουν περιεχόμενο. Ο πίνακας πληροφοριών του Editoria11y περιλαμβάνει κουμπιά επόμενο/προηγούμενο για άμεση μετάβαση στα ζητήματα. Αν το Editoria11y θεωρεί ότι η επεξήγηση του ζητήματος είναι αυτή τη στιγμή αόρατη, θα ειδοποιήσει τον χρήστη ότι κάτι δεν πάει καλά, και στη συνέχεια θα επισημάνει τον πρώτο ορατό πρόγονο – π.χ., το div γύρω από ένα ακορντεόν.

Ιδανικά, το θέμα σας θα κάνει αυτά τα στοιχεία ορατά πριν εκτελεστεί ο έλεγχος ορατότητας του Editoria11y, ώστε όλα να λειτουργούν μαγικά για τους χρήστες σας — τα καρουζέλ προχωρούν αυτόματα και τα ακορντεόν ανοίγουν αυτόματα για να εμφανίσουν το ζήτημα.

Για να το κάνετε αυτό όταν ανοίγει πρώτη φορά ο πίνακας (π.χ., ξεδιπλώνοντας όλα τα πάνελ ακορντεόν με ζητήματα) προσθέστε έναν ακροατή συμβάντων JS για το ed11yPanelOpened, στη συνέχεια κάντε querySelectorAll για τα σχετικά στοιχεία ed11y-element-result, και μετά ενεργοποιήστε όποια συνάρτηση χρησιμοποιεί το θέμα σας για να αποκαλύψει αυτό το μέρος της σελίδας.

Ακολουθεί ένα παράδειγμα βασισμένο σε jQuery. Όταν ανοίγει ο πίνακας, απενεργοποιεί ένα σταθερό μενού (ώστε τα στοιχεία να μην καλύπτονται), και στη συνέχεια αναζητά τυχόν στοιχεία ed11y-element-result μέσα σε κλειστά στοιχεία ακορντεόν και προσομοιώνει ένα κλικ στο κουμπί εναλλαγής τους:

Για να αποκαλύψετε περιεχόμενο μόνο όταν μεταβαίνετε σε μια συγκεκριμένη συμβουλή μέσω του κουμπιού “επόμενο” του πίνακα (π.χ., σε μια κλειστή καρτέλα ή στην επόμενη διαφάνεια καρουζέλ), θα χρειαστεί να ορίσετε τόσο το hiddenHandlers σε σχετικούς επιλογείς CSS όσο και το checkVisible σε TRUE στις παραμέτρους σας. Στη συνέχεια προσθέστε έναν ακροατή για το συμβάν ed11yShowHidden. Αυτό εκπέμπεται αν το Editoria11y αναγνωρίσει ότι μια συμβουλή βρίσκεται μέσα σε ένα περιέχον στοιχείο με έναν από τους καταχωρημένους επιλογείς hiddenHandlers που παρέχονται στη λίστα επιλογών. Αυτό το συμβάν JS θα περιλαμβάνει το ID της συμβουλής που πρόκειται να ανοίξει. Το Editoria11y θα σταματήσει σύντομα μετά την εκπομπή αυτού του συμβάντος, για να δώσει χρόνο στο JS σας να κάνει το στοιχείο ορατό.

Ακολουθεί ένα παράδειγμα από μια υλοποίηση του Penn State. Αναζητά το στοιχείο που ταιριάζει με το παρεχόμενο ID, στη συνέχεια βρίσκει το γονικό διαδραστικό στοιχείο, και ενεργοποιεί το συμβάν του για να ενεργοποιήσει την εναλλαγή του:

Τελευταία σημείωση: ορισμένα θέματα απλά δεν είναι συμβατά με τον έλεγχο ορατότητας — π.χ., το στοιχείο <main> έχει ύψος 0px. Τέτοιοι ιστότοποι θα πρέπει να απενεργοποιήσουν όλο τον έλεγχο ορατότητας ορίζοντας το checkVisible σε false.