Δημιουργία προσπελάσιμων διαφόρων παραθύρων με διάλογο A11y

Modals υποστηρίζονται ευρέως σε σύγχρονα προγράμματα περιήγησης. Μπορούν να χρησιμοποιηθούν ως αναδυόμενα παράθυρα κοινοποίησης, όπως και opt-in πεδία, ή ακόμα και για φωτογραφικές παρουσιάσεις.

Μπορείτε να δημιουργήσετε αυτά τα παράθυρα χρησιμοποιώντας καθαρό CSS αλλά αυτή δεν είναι η πιο προσιτή λύση. Αντ 'αυτού, ελέγξτε έξω A11y Dialog, ένα πλήρως λειτουργικό παράθυρο που στρέφει την εστίαση προσβασιμότητα πρώτα.

Τρέχει vanilla JavaScript με τα δικό προσαρμοσμένο API και υποστηρίζει όλα τα σύγχρονα προγράμματα περιήγησης σε όλες τις συσκευές. Μπορείτε να κάνετε check out αυτό το demo για να δείτε πώς φαίνεται στην πράξη.

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

Εξ ορισμού, το παράθυρο A11y επίσης υποστηρίζει οθόνες αφής, οπότε η κλήση έχει το ίδιο αποτέλεσμα με το κλικ. Μπορείτε να κάνετε κλικ ή να αγγίξετε οπουδήποτε έξω από το παράθυρο για να το κλείσετε ή σε έναν υπολογιστή πατήστε το πλήκτρο ESC.

Κάπως, αυτή η βιβλιοθήκη είναι πολύ μικρή, μόνο 1.2kb, συμπεριλαμβανομένων όλων των κωδικών CSS και JS. Αυτό το καθιστά ελαφρύ πάνω από πλήρως προσβάσιμο.

Μπορείτε να μάθετε περισσότερα διαβάζοντας μέσω του GitHub repo και το παράθυρο A11y έχει το δικό του σελίδα τεκμηρίωσης, πολύ. Αυτό περιλαμβάνει μια ενότητα σχετικά με εγκατάσταση & εγκατάσταση για πλήρεις αρχάριους. Υπάρχει επίσης ένα μακρύ τμήμα που καλύπτει το API DOM για την προσθήκη κουμπιών στη σελίδα σας που μπορεί να ανοίξει (ή να κλείσει) το παράθυρο modal.

Αν προσπαθείτε δημιουργία πιο προσβάσιμων ιστότοπων σκεφτείτε σοβαρά την εκτέλεση του διαλόγου A11y στα σχέδιά σας. Μπορείς πάρτε τον πηγαίο κώδικα από το GitHub ή να το κατεβάσετε από έναν διαχειριστή πακέτων όπως npm ή Bower.

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